On today’s episode we are going to talk about how to customize your theme the right way right here on Your Website Engineer Podcast number 299.

Hello everybody. Welcome back to another episode of Your Website Engineer Podcast. My name is Dustin and I am almost fully recovered from my bout of poison ivy that I had last week. Man, it was terrible. Like, it was just so itchy everywhere. It ended up starting around my neck and it was on my face. My eye was half swollen shut and my arms, my legs. It just got everywhere and somehow I managed to acquire said poison ivy and I am thankful to say I am mostly recovered. And, I don’t itch nearly as much. So, I have time to do a full prep for a show and do a full episode for you this week.

Alright, today like I said we’re going to be talking about how to customize your theme the right way. And, this is going to be a short snip it of what my WordCamp Talk is going to be for this weekend. I’ll be speaking at WordCamp Columbus. So, if you’re in the area and you’re interested in checking that out, you can head on over to 2016.columbus.wordcamp.org and you can purchase a ticket. It’s $40. It’s a three-day event. I’ll be there Friday and Saturday and spending time just talking about that, working at the WooCommerce booth and just kind of hanging out. And, just getting energized by the WordPress community. It’s been quite a while; it’s been since Dayton which was back in March that I’ve been to a Word Camp. So, I’m really excited about spending some time this weekend just with some other WordPress users, and just hanging out and learning, and seeing what kind of struggles and pain points that they may be having with their websites.

So, there is a couple pieces of news that I want to share with you this week. I guess the first one has to do with along with WordCamps. But, WordCamp U.S. is looking for volunteers. They’re estimating 3,000 people that are coming to the event and they’re looking to have somewhere between 150 and 180 volunteers. And, so that’s about the expected number of volunteers for 3,000 attendees. And, so there’s only a certain order they can go, but there’s an application that you can submit. And, it is open until August 31st. So, if you want to head to Philadelphia in the first week of December and spend time with 2,999 of your closest WordPress friends then you want to check that out. And, this is a good way for you to go. You can help out. You can get a free ticket and spend some time there. So, definitely check that out if you are interested.

Also, lastly I want to share that Jetpack4.2 came out and it has its release with performance and security updates. And, it looks like the main differences between 4.1 and 4.2 is just the queries have reduced by a lot. So, the front end database queries have reduced by 69 percent for all page views. They’ve reduced the WP Admin database queries by 43 percent. Memory usage has improved by more than 20 percent when a site is viewed by a logged out user. And, improvement time by about 10 percent on shared hosting environments. And, so since Jetpack is… it’s known for it’s a “bloated” piece of software, and I say that in quotes. It just has a lot of connectivity between WordPress.com and there’s just a lot of things going on with it. But, to see these types of results is really, really huge. And, so that is really nice and Jetpack 4.1.2 or 4.2.1 was released to fix a few issues that popped up after the release. But, it’s really just a plugin that – there’s not a lot of new features, but it’s just made to speed things up and it just works a lot quicker and much more responsive. Again, a lot of the Jetpack things… once you set them up you don’t have to reconfigure them. So, you don’t have to go through the Dashboard and stuff. It doesn’t seem like it’s that much faster. I mean it is, but then it’s just all about the visitors coming to your website. Your pages are going to load just that much faster, especially on share hosting. So, if you haven’t had a chance go ahead and update to Jetpack 4.2.

And, then lastly on Is there a Plugin for that? Section, I don’t like to share these all of the time, but this one was kind of a neat pop up builder. It’s just called Pop Up in the WordPress Repository. And, it basically is a… it says it’s the most complete pop up builder. I don’t know about that. But, you can include HTML and images and short codes all inside your pop up. You can also have people sign up and be able to subscribe via Facebook or Twitter, things like that. You can do a countdown right from a pop up box. You can do a lot of really cool things. It’s a free plugin. It’s got more than 20,000 downloads and you can find it by searching pop up in the Word Press Repository.

Alright, today as I was thinking about what I was going to talk about in the show I figured well, I might as well share some details about my upcoming talk that’s happening this weekend at WordCamp Columbus. And, the whole talk… the premise of the talk is how to customize your site the right way. And, so we’re just going to spend a little bit of time today in just going through the basics of some of the things I’ll be covering. Again, there will be no screenshots and things. But, I’m planning on doing some sort of recording hopefully and just kind of repurposing the content just so you can see this at a later point. But, what I want to talk about is there’s a few different ways basically to customize a theme or a template. And, then I want to talk about those. I want to talk about the wrong ways to go ahead and do this and then I want to talk about some of the right ways that you can go ahead and customize these.

So, there’s types of… there’s different types of customization. So, the first one is there’s small visual changes and these would be something like, “Oh, I would like all my H1 tags all to be a different color.” Maybe that, there’s just really visual things. They’re mostly stylish type things and those are very small changes. It’s very, very easy to make these types of changes. But, what’s the best method to do these types of changes? So, those are one type of change we want to talk about. The next one is rearrange content on a page. Sometimes you purchase a theme or you’re doing something, you know, you have a plugin or something. And, you just want to rearrange a portion; maybe the sidebar widgets are hard coded into the theme and you just want to rearrange them. One goes on top of the other and you just want to flip them. Or, maybe there’s something inside your theme that you don’t really like the way that it’s there and you want to remove the element completely, but you don’t want to just hide it with “Display None” in CSS. You want to really remove that so it doesn’t affect the page load time. Things like that. Maybe there’s pieces pulling from the database that you just don’t need that information. Maybe you don’t want the tags to appear on your post anymore and you just want to remove that whole section. So, those are the types of customizations on a theme level.

Then, other types of customization that could be made is, like an output of a plugin. This one is my best example that I could think of. Was with WooCommerce you have the way that a single product loads, it has different elements. So, it loads page title, then it loads the image. Then, it loads the description. Then, it adds the Add to Cart button. Well, maybe you want the Add to Cart button right at the very top. And, those type of customizations is just reordering and reorganizing the way that the plugin is exporting its content or displaying its content on your website. So, those are kind of the three big buckets, the three different ways you can rearrange your different content to make customizations to your theme or your website. And, this whole topic is kind of… there’s two sides to it. Because sometimes you want to change things within your theme. There’s some things you want to change with your plugin.

We’re mostly just going to be focusing on both kinds of at the same time. And, so let’s go ahead and talk about these customizations. The wrong way; how are the wrong way to make the edit to the changes you need? So, the first wrong way is directly editing the theme or the plugin files. Now this is something before I really knew how the WordPress worked and the standard practices behind WordPress and things like that… this was something that I did regularly. I’m kind of ashamed to admit it, but this was something I wasn’t a great programmer in the fact that I could develop a theme from scratch. But, I could take a plugin or a theme that I liked and I could customize it. I could move things where I wanted it. I could customize it, I could add extra menu items, I could do some really neat things. But, I was customizing the actual theme that I had purchased. And, then once a theme update came or a plugin update obtained I customized a plugin, then I had lost all to those changes.

A great example was when I first got started. I wanted to make some styling adjustments to the Gravity forms. And, for some reason the theme that I was using wasn’t using the… it wasn’t pulling in the styles I had added like the Jetpack plugin, or whatever. Whatever the case may be, it just didn’t work right. Clearly I wasn’t doing it right. That comes down to it. I wasn’t… I didn’t know what I was doing. I was just copying and pasting code until it actually worked. Well, it turns out the only place that I could get it to work was copying that CSS code and putting it into the actual plugin folder itself. So, I would go into wp-cont. I went into plugins, I went into Gravity forms, I went into the style sheet, and then I just pasted it right at the bottom. And, it worked perfectly. It was beautiful. The forms, I forget even what I was trying to do… make the forms fields bigger or have different columns. I don’t even remember what it was at this point. But, it worked perfectly. And, then until the next time around when all of the sudden there was a plugin update. I was like, “Oh, I need to update Gravity forms. Great. Let’s go ahead and click that.” And, I clicked the Gravity forms button and it automatically updated. But, all of the sudden all of my styling was gone and it was just a complete pain because then I had to go and look up that styling again and of course I had no version control. I had no record of what I had done. I just found code online somewhere. I copied it and pasted it. I put it into my style file, inside Gravity forms, and it had updated and it was completely gone. And, so I was like, “Ah. This isn’t the best way to do that but let’s just do it again.” So, I did the same process again.

But, this time what I did was I took a file and I added a text file and I would add that right to my folder. Using FTP, I would put that in a directory so it was just text file with all that custom CSS that I had added. So, the next time around I simply just drug that file. I put it on my desktop. I updated the plugin, then I could copy and paste that code. And, granted it was faster because I didn’t have to relook up everything. I could just copy and paste. But, it wasn’t the best method because anytime that you make customizations to either a theme or a plugin and that theme or plugin gets updated by the author of the theme or plugin, then any customizations you made have been wiped out. And, then so you can do what I did and spend a lot of time in keeping your custom snip its in different places or have one document for every client and say, “Okay. this is what I did. These are the modifications I made to the plugin.” But, it just spends a lot of extra time. You’re just wasting time that you necessarily need to be wasting. So, that’s something to think about. So, that’s editing things the wrong way part one.

Part two is adding code to a functions.php file. I know you see this all over the web. I know that I’ve recommended it probably for the first 100 plus episodes or so. But, adding code to a functions.php file – yes, it will work and yes it won’t break anything and yes I guess if you put it in there then you update your theme you’re going to override it. But, doing that, putting it in there – that means that any customization that you add to your website will be removed when you update your theme to a new theme. Let me say that again. Any code that you added to the functions.php file, when you change themes and you will someday. Whenever you change themes, then you have to add that functionality back in. Now, that’s not a huge deal. You could say, “Here’s all of my changes. I’m building a new theme. I’m just going to copy and paste all of these.” That could work. The problem is it gets a little tricky when sometimes you’re debugging issues, trying to figure out where a conflict is coming from and you change from your custom theme to the 2016 theme. Now, all the sudden your website is not quite the same anymore because all those custom functionality is now removed because you’re not using that theme anymore and you can’t really tell was that part of the problem? It just makes it really, really difficult. And, again it can be overwritten when a theme updates. Now, themes don’t update nearly as often as plugins do and that’s something to think about as well. Those are the two ways to do it and I’ll tell you a little bit in a little bit how… what I recommend instead of using the functions.php files.

So, okay. Let’s go into it the right way. So, I’ve got one, two, three, four different right ways in my outline here of the right way to make customizations to your theme. And, so your first one is if you want to do visuals then probably the best way is if you have something built into your theme itself. I know that Canvas is a WooCommerce theme and that has settings and panel. It’s got stuff built into so you can just add, you can do the customizations there. You can pick the different colors. You can pick the main fonts for your different H1 tags and stuff like that. It’s pretty basic. That’s the easy way. If you’ve got some built in within your theme you can go ahead and do that. If you update your theme it’s not going to overwrite those changes. You’ll always have those. So, you don’t have to worry about losing any changes or customizations when you update a plugin. Or, when you update a theme when those settings made inside the plugin, or inside the theme itself. This holds true for plugins as well. So, if you have a plugin and it asks for, maybe there’s some customizations, you can pick color, you can add different font, whatever that is, different texts. You can do it within the WordPress dashboard, you’re safe from anything being erased when a plugin or a theme update happens. So, that’s the first way. It’s pretty basic and you’re not going to do a lot of changes. That’s just basically going to be aesthetically you’re changing the colors, the fonts, the sizes, the spacing, stuff like that.

The next one is to use a theme customization plugin. There’s one called Jetpack, there’s one called a Custom CSS, there’s one called Theme Customizations, or Customizer Theme. I put a link to all of these in the show notes. But, basically these are third party plugins that will allow you to just paste in code to do whatever you need to. So, this is if you need minimal coding experience. Maybe you found something online that is a, “Oh. I need to copy and paste and put in your functions.php file.” Well, you can actually use this plugin with theme customizations plugin or a few others that kind of mimics the functions.php file. And, then it’s a plugin that you can go ahead and just copy and paste those in.

Another great thing about using a plugin for a function.php type code is you can actually turn it on and off. You can deactivate it and enable it so then if you’re running some sort of issue you can turn it off and see if that’s what’s causing the issue without having to change your theme. So, that’s really, really nice. You can do some troubleshooting that way. So, maybe you found some CSSs that’s going to help you visually change something on your website, you can copy and paste those into Jetpack or CustomCSS or something along those lines. And, even some of them have the ability to add the job description. So, if you want to target a specific class on your website with some sort of fun element, whether it be an image. It bounces in or whatever that is, you can add some JavaScript type of plugins as well without effecting any of your theme or anything along those lines. So, that’s something to think about as well. That’s kind of if you need minimal code, but you don’t need a lot of code.

Okay. The next one that I want to share is the Custom Plugin route and it just takes a few lines of code to create your own custom plugin. But, from there you can go ahead and add an area where you can put functions.php type code. You can add CSS, you can add JavaScript. And, then that’s all within your own plugin and when it’s in your own plugin what’s really nice is that if you’re having some sort of issue, you want to troubleshoot, you can deactivate that from the plugins menu. Another really cool part about this is that if you’re always using the Storefront theme from WooCommerce and you’ve added this custom functionality and you want to move this to another site you can just duplicate this plugin. And, then that custom plugin you built and then just move it to your next site and now all of those customizations and then your styling came with it.

Now all of these, with custom plugins, there’s not going to be a lot that you can do. You can obviously change CSS stuff, you can add some fun elements with JavaScript whether you want images to bounce on your website or the text to scroll across your page. You know, stuff like that. And, you can do, you can rearrange different items within Storefront, like you can put the Add to Cart button first by rearranging them by using functions, by calling functions, and just reordering stuff like that. But, really structurally you can’t really do a whole lot. It’s just normal things you can do with a custom plugin.

But, if you want really intense changes. You want to do some really big things then what you want to do it build a child theme. And, a child theme kind of just expands on the custom plugin that gives us the ability – child themes will inherit all the properties of your parent theme. So, whatever theme that you may be building and then it inherits all of those. And, then you can add your customizations and then whenever your parent theme updates it never overwrite your custom child theme. So, that’s really, really nice. And, things that you can do with a child theme is you can go ahead and copy the single.php which is the file that controls what a single post looks like. And, then you can customize it, and you can move things around, and you can remove code. So, this would be the one if you want to remove tags from single posts. You would go ahead and do that there.

Or, maybe if you wanted to modify some of the output of WooCommerce what you could do then was copy WooCommerce files into a folder inside your child theme WooCommerce and then you could put it in there and you can make changes. So, it would load those template files over the template files in WooCommerce. So, it would give you the ability to customize WooCommerce. And, so that’s probably the most fun way, the one that if you have a lot of changes that you’re desiring for your current theme or your plugin. Whatever that is, probably the best way to do that is a child theme.

Now, one word of advice is that there are themes out there that you can buy that are child themes. And, so this would be something like on Storefronts, they have child themes. There’s a Galleria, there’s a HomeStore. There’s a whole bunch of them. And, with those you would want to – you can’t make a child theme of a child theme. So, there’s no grandchild theme. But, what you would have to do is you would have to go and you would have to use the custom plugin route or use the plugin like Jetpack, or Custom CSS, or the Theme Customization plugin to go ahead and make those changes. You don’t want to make changes to a child theme because those child themes, when created by somebody else can update and can overwrite any changes that you may have made.

So, that’s kind of in an overall nutshell… those are the four different options that you have so you can do very basic stuff from whatever is add within the dashboard within WordPress. You can add the Jetpack plugin or Theme Customizations plugin to do small, little bits of code. You can add a custom plugin so you can turn on and turn off those types of pieces of functionality. And, then lastly, the main way, the biggest way that you can make changes is to build a child theme. And, you can build a child theme to pull things from your parent theme so your website will look exactly the same until you start making changes in the child theme. But, when you have a child theme you have to have both your main theme installed and your child theme. And, it just kind of works like a theme would. You can go ahead and upload those. You can sit those as your primary theme and they just kind of start working.

So, those are some things that I wanted to share with you today. Obviously I’ve got to stretch this into about 20 more minutes to fit into an entire WordCamp presentation with slides and examples. I want to kind of show the what happens when you make custom modifications to a theme itself. And, then you click the update button and now they’re all gone, the headaches and frustrations there. So, I guess also one last thing. Kind of like I was saying earlier if you really want to modify something. If you – nobody’s going to stop you. It’s not WordPress’ best practice, but you can go in and you can go make those adjustments like I was doing to the style.CSS inside of Gravity forms. If you’re going to do something like that just make sure you make really good notes of where you made modifications and different things so when plugins do update, things like that then you have the ability to go in and easily and quickly fix them without spending hours trying to redo all of the code that you’ve already done.

So, that’s going to be a wrap for this week’s episode. Thanks so much for tuning in and I look forward to seeing some of you, maybe, at WordCamp Columbus. If you are there just come up and say hi. I’ll be there on Friday and Saturday and until next week. I’m not sure what’s going to happen. Next week is episode number 300, which is really hard to believe. I don’t have anything big planned, it’s just going to be kind of like WordPress 4.6. It’s just going to be another episode that’s going to be continuing to help you improve WordPress and your WordPress skills and just get better at using WordPress as a platform. So, with that… that’s all I’ve got this week. Take care and we’ll talk again soon. Bye, bye.