On today’s episode, we are going to talk about the different ways that we can add code snippets to our WordPress sites, both CSS and PHP. Right here on Your Website Engineer podcast, episode number 437.

Hello, and welcome to another episode of Your Website Engineer podcast. My name is Dustin Hartzler. I’m excited to be here with you today because WordPress is all about customization. And I wanted today to just spend some time talking about the different ways and the different opportunities that there are for customizing WordPress and doing it the correct way, the easiest way and, sometimes, even the hard way. And so, we’ll talk a little about that in just a couple minutes.

The first few things that I want to share with you is three announcements and a plugin, of course. The first announcement is one that kind of shocked me when I heard it, but it is GoDaddy acquires ThemeBeans, CoBlocks, Block Gallery, and Block Unit Tests and so these are, obviously, some themes and some plugins that GoDaddy has acquired and nothing is going to change other than the fact that now these products are under the GoDaddy WordPress.org user name. And so, that’s one of the big things. One of the code developers of CoBlocks is joining the GoDaddy team as well. And so just some rearranging in the space and getting GoDaddy that brand recognition for some of these big-name plugins.

I did talk about CoBlocks a few episodes back when we were talking about different plugins that you could add new blocks to your WordPress site. And so, that’s what that plugin’s all about. It’s a really cool plugin and it adds a lot of new blocks to the WordPress new block editor. And so, if you haven’t checked that out, I definitely recommend checking out CoBlocks and giving it a try if you need and you want to try out some different blocks that aren’t necessarily built into WooCommerce or I guess WordPress itself.

The second announcement is about WordSesh. It’s an online training session but they’re looking for speakers. Maybe if you’ve tried to speak at WordCamps before or wanted to speak on this online conference, you can go ahead and there’s a link in the show notes for where you can apply. The speaker application deadline is on April 19 so just a couple days away and WordSesh is happening on May 22. And so, it’s a great opportunity. The sessions are paid sessions so you will get a $250.00 stipend if your session is selected. And so, that is a little incentive if you want to share some knowledge when it comes to WordPress. And so, go ahead and check that out.

The third piece of news today is all about WordPress and WordPress 5.2 Beta 3. It’s now available. It’s getting really close to that launch date of April 30 is what we’re targeting. And I feel like the podcast is always going to have something about the new version of WordPress now that we’ve hit that 5.0. We’ve got into 5.1 and 5.2 very, very quickly once 5.0 has come out.

And there’s continued work on the new site help feature. Just giving you more information about what’s happening on your site. It’s got a minimum PHP version update so you’ve gotta be running at least a 5.6.2. And, again, we talked a couple weeks ago about PHP 7.0 is recommended. So, I would recommend checking this out if you are a theme developer or a plugin developer, or you just wanna make sure that your sites not going to break. Always testing the software out a little bit early gives you a little bit more time to play around with and make sure that everything is updated and ready to go.

Speaking of development sites and getting things kind of working and what not, there is a cool plugin that I found out there today. And it’s called a WP Dev flag. And this is a plugin that makes it easy to distinguish between your local development and your live site. And I don’t know if this has ever happened to you, it happens to me all the time, or it did happen to me all the time is I would go, and I would make some changes, and then I would refresh my site, and I wouldn’t see any changes. And I would continue to do this, and nothing was happening, and I was wondering, “What in the world is going on?” Well, it turned out, I was either updating my Dev site and looking at my live site, or I was updating my live site and looking at my Dev site. And I was never looking at the right site.

But this little plugin is called the WP Dev flag at a vertical, I think it’s vertical, I think you can also position it horizontal if you want. But you can add this tag that’s called development site, or you can say Dev site, or not live, or you can call it whatever. But it’s a little banner that hangs out on the left-hand side of your site and it just kind of gives you that extra visual reminder that, “Hey, this isn’t a live site.” I typically like to use orange and so I would use an orange color in the settings to make that background orange. You can put it on the left or the right, I guess. Looking here at the settings you can do a vertical position, a top, middle, or bottom. And you can change the color of the text, the background color, and you can change the message and what that is.

And so, it’s just something that hangs out in the plugin section and it’s really cool. It’s a neat way to visualize that you are looking at a Dev site versus a live site. Other plugins I’ve seen turn that whole admin bar across the top to a different color to allow you to distinguish. That’s how I make sure that I’m looking at my Dev site or my live site. I just turn that bar across the top, the eBoard, press admin bar, I just turn that to orange when I am on a Dev site, or when it’s running locally on my computer. And then the live sites are always black like in normal.

So, that is a cool plugin if you’re looking for something that can help you distinguish between those two, a live and a Dev site. I recommend checking out WP Dev flag. You can search for that in the WordPress repository or you can find a link in the show notes for episode number 437.

All right, today, let’s go ahead and talk about code snippets. And I see this a lot and we get a lot of customers coming in for WooCommerce support that’s like, “Oh, do you have a snippet to do this and do you have a snippet to do this?” and, “Oh, can you fix this?” and, “I don’t like how this is positioned on my website,” or, “Can you hide this thing visually on my website?” And so, there’s different ways to go about this and there’s different plugins for doing this code if you will.

And what I want to talk about first is CSS snippets, how to hide things with CSS, or maybe change the color of something with CSS. And then we’ll break it down and we’ll talk about PHP snippets and what that looks like.

CSS is pretty harmless when it comes to your website. It just is controlling the visuals of your website. It’s not doing a whole lot of anything but controlling those visuals. And so, anything that you see, the colors, how big the text is, the way that it’s aligned on the page, that is all CSS. And we use CSS a lot just to change things on your website. Maybe you want the button colors to be from purple, you want to change them to orange. Or maybe you want the font color to be bigger or smaller. Or maybe there’s a whole section that you don’t like. Maybe on your products, it’s displaying the publish date and you don’t want to see that anymore. And so, CSS can handle a lot of those things.

And what we do a lot with WooCommerce support or where I’m helping people is, I usually open up the website in Chrome, then go to the Chrome web developer tools. You can right-click on an item and view inspector and it will take you to the code on the HTML and the CSS that’s controlling that specific section of the website. And then from there, I can go in and you can click around, and you can make some CSS, or you can write some CSS, and it will change visually on your computer itself. But then once you figure out, “Okay, this looks good,” or “this is the right size,” or maybe the font spacing is a little bit too big or too small and you make the adjustments, now you have this little snippet of code and you’re like, “What do I do with this?”

A lot of the times we just paste it into our live chat and say, “Here’s the code that you need,” but then we have to explain how to actually use this. Now, there’s three different ways that you can do CSS and how you can add CSS code. The first one is the easiest and then they get a little bit harder as we go along.

So, the first way is the WordPress Customizer. Starting back in WordPress 4.8 maybe, 4.7, I don’t know, it’s been quite a while, but they came out with an area in the WordPress Customizers, so that’s when you go into your WordPress dashboard, go to appearance, and then go to customize. And then that brings you into what’s called the customizer and that gives you the features and options to change different settings, and it’s all depending on how much the theme has programmed the options to be in the customizer.

But, anyways, in there, there’s an area towards the bottom, it’s called additional CSS. And this is a place where you can open up and you can paste in the CSS and then on the righthand side of the screen, you automatically see that CSS taken in effect, which is really cool. So, it gives you a very neat way that you can paste code in and then you can immediately see what it looks like with that code. And so, that’s the first way. The WordPress Customizer is super easy. You hit save there or update in the customizer and then it’s rolled out across your sitewide. That one’s pretty easy.

The other one that you can use, there’s a plugin called Simple CSS plugin. And you can find this on the WordPress repository. It’s a free plugin. And it pretty much does the same thing except it adds a separate section to your WordPress site where you can add CSS. And so, one way is not necessarily better than the other.

I like keeping things in the WordPress Customizer, it makes it nice and tidy. Because we have to remember that CSS customizations are primarily made for visuals of your site. And the visuals will normally change based on the theme. And so, if you put them in the WordPress Customizer, that is a theme-dependent area. So, if you would go and make a change to your theme and change to a different theme, then all of your CSS would no longer be applied because it’s a different theme.

But if you use the Simple CSS plugin, then that CSS will always be there. Depending on which theme you pick. It’s a plugin, it’s going to continue to run as long as that plugin is activated. So, you have to kinda think through, “Okay, what is this CSS controlling?” If the CSS is controlling something with WooCommerce, or additional plugin, then probably, if we’re customizing that, it’s probably a better option to put it in the Simple CSS plugin area. Because when you change your theme someday down the road, all of those customizations will still be there.

And so, that’s the second way. First, you can use the WordPress Customizer. You can use the Simple CSS plugin as another option. Or, the third way is, you can add the CSS to your child theme’s stylesheet. Now, this is overly complicated for what it needs to be, actually. Because, for the most part, you don’t need to create a child theme if you are just doing some small visual CSS. But if you want to, if you have purchased a theme off the shelf, and maybe you bought the Divi theme or you bought any of the themes that are out there from Genesis or WordPress or you got a free theme there or whatever. You can create what’s called a child theme and then that will allow you to edit and modify your theme without having to actually modify the core file.

The reason we do this is because if you modify a plugin file or you modify a theme that you purchased from elsewhere, then when a update comes along, and updates always come along for security vulnerabilities, or add new features, or what not, then you update. And then all of a sudden anything that you’ve hand-coded into that plugin or theme will automatically be erased. And so, we’re trying to find different ways that we can save this data so that it’s not erased when something is updated.

And so, the purpose of a child theme is for you to take a store-bought theme, you’ve gotten a theme from somewhere, you want to make an adjustment to it, but you don’t want to do it in the actual theme itself so, then you create a child theme. And then you can put all your adjustments in the child theme.

Now for CSS, I think that that’s a little bit overkill. Especially, if you have just one or two little things that you want to change. Those are things that you don’t necessarily have to do with a child theme. And that’s why the WordPress Customizer is great for that or the Simple CSS plugin is great for that as well. So, that’s how you would go about tackling a CSS code issue.

Now, PHP code is a little bit different in the fact that it is a little bit tougher to understand because there is some syntax that you have to understand for it to work. It’s also a little bit more difficult because if it’s not put in just right, it could break your entire website. And so, that’s something you have to think about. And it can crash your site. And I’ve done this before, and it’s not a pretty sight.

One thing that I recommend before starting to use any code snippets that may be found online, I highly recommend having your cPanel access ready, and ready to go. So, what that means is, your hosting account normally has a cPanel. Sometimes they have a file manager or sometimes they have an FTP login and credentials that you can use. So, those are things that you wanna make sure that you’ve got those handy because if you happen to paste in those codes without a semicolon, or maybe with an illegal function in there, or something like that, it could break your entire site and you want to have these tools ready so that you could rollback things very, very quickly.

So, let’s talk about the different ways that you can add this code. And just as a code sample, there is one in the show notes for episode number 437. And it just is a small snippet of codes. Say, for example, you wanna make all of the titles lowercase, for some reason, you just wanna do that. And this is the function that I have a lot of customers use when they’re saying, “My functions.php file, I just put in this code and it’s not working.” And so, I say, “Oh, well, run this code real quick, add this to your functions.php file,” which is one way you can do this, and I’ll talk about it in a second, and just to make sure that that file is working properly.

And so, I put that code in the show notes so you can see it. But just say, for example, you were looking for something like that, and you wanted to change all of the titles sitewide to lowercase. And this is the code that you would use to do that. It would say, “Paste this into your functions.php file.”

Okay, that is one way that you can make modifications and use a custom PHP on your website. Now, it’s a good thing. WordPress made this so it’s easy. So, if you could just take that code, “Oh, that’s the code that I need. I can copy and paste it and put it right in that functions.php file and it’s gonna work.” It’s an awesome way that you can do it but it’s not the best way. If you put things in that functions.php file, there are a few things that could go wrong.

Now, one is, like we talked about, you could break everything. I did this one time on a client’s site. They didn’t have FTP access, they didn’t have back-end access, and I accidentally added an opening PHP tag inside a PHP, which didn’t work well. Or I forgot a semicolon, one of the two, and it gave me a fatal error. It completely crashed the website. And then this guy had to talk to their support team to get it restored. It was a big mess. Now, I realized, “I never want to do this again,” but that could happen.

Now, WordPress also has been getting better that when you add code inside the WordPress editor, itself, and you have an illegal function or something that doesn’t have the correct syntax, then it won’t actually save your code, which is super helpful. But that wasn’t the case in previous years and previous versions of WordPress.

But if you put code in your functions.php file, say this is something that you want everywhere, any website that you ever develop you want the first character of your title to always be lowercase, always. And so, if you put it in your theme’s functions.php file, whenever you change your theme, you’re going to lose that functionality. And so, if this is something that you want to go along with the site wherever it goes, whatever theme you may be using, then the functions.php file isn’t the best way.

The other bad thing about putting in that functions.php file is if your theme does update, then it’s going to be overwritten. All that code is going to be erased and so you’re gonna have to put it back every time. And I did this for a while when I wasn’t really sure what I was doing. I would have a text file for each WordPress site and inside that text file, I’d say, “Here’s all my custom code that needs to go back into functions.php when the theme updates.” Obviously, now I know that that’s not the best way and it’s not the solution that we need to take. But that’s one way that you can go about doing it, the functions.php file.

The other thing that you could do is you could also, like CSS, you could create a child theme for your theme and then you could put your snippets in that functions.php file. And that’s going to save you from any updates that the theme might have, but it’s also going to keep it very specific to that theme itself. So, if you change themes or whatever, then you’re going to lose those customizations. So, it’s not much better but it is a better solution in the fact that if the theme updates, you’re not gonna lose those changes.

The next better way, I guess, is one plugin called the Code Snippets plugin. And it’s a free plugin on the WordPress repository. And I recommend this probably two or three times per day for WooCommerce customers. But basically, what this is, is a plugin that you can create a new snippet block. And so, you could say lowercase letters, you could call it the lowercase letter block. You could paste in this code and then you can toggle that on and off, which is really nice.

So, you can have a bunch of functions in there and then you can toggle things on and off specifically for each function that you add. And this is really helpful in the fact that maybe you’re doing some troubleshooting, maybe you’re trying to figure out why something’s broken on your website, and if you don’t wanna turn off the entire plugin, which is a good way to do some troubleshooting, you can do that. But you can toggle these code snippets off one at a time. And that’s probably the best way or the easiest way to start adding these snippets. You just add the extra plugin and then you can add each function inside a new little section inside the Code Snippets plugin.
And then the last way that you can do this, and I use this on Your Website Engineer.com, and it’s basically creating a custom functionality plugin. So, I just have a plugin called Dustin’s custom functions and these are things that I know that I wanna have stick around when I change themes. So, I think in there I have the code for the different custom post sites, I have stuff that…I can’t even remember what’s all in there. Maybe some custom code that makes my login page look neat. There are a handful of things that I have that’s all built-in and it’s just a custom functionality plugin. That’s a little bit harder to get through and to set up and what not but it’s definitely something that could be done. But my recommendation for the show is going to be to use the Code Snippets plugin.

A good exercise that you could do is you could go in and you could start grabbing those files that are in your functions.php folder, in that file itself, and then you could start moving those into the Code Snippets plugin. This would be a great exercise just to try to get all of that stuff out of there. Maybe you added a bunch of things there that you know that you’ll need later and so you could go ahead and just kind of transition and move things to that Code Snippets plugin. That’s something that I recommend everyone do to just to make sure that you’re not holding things in that functions.php file.

Now, those are the things that I wanted to share. I do see a lot of times where people are like, “Oh, well, I needed to customize WooCommerce, so I went in and changed WooCommerce.” Then, “Oh, I needed this, that and the other thing, and so I went in and I just custom-modified it.” Well, that’s gonna work but then a year down the road you’re gonna have a year-old version of WooCommerce or a year-old version of your theme. And you’re gonna be missing features, and you’re gonna miss security patches, and what not. So, I recommend highly, highly, highly never to make changes to those core files.

So, that’s what I wanted to share with you this week. Hopefully, we can go in this week and kinda clean up our sites just a little bit and get the CSS or the PHP into a code snippet plugin, or kinda move it to a customizer, or what not, and do a little bit of spring housecleaning when it comes to our sites. I’m gonna look through mine to make sure that I don’t have anything in the theme’s functions.php files and either move them to a custom functionality plugin or over to the Code Snippets plugin.

So that’s what I wanted to share with you this week. Take care and we’ll talk to you next week. Bye-bye.