On today’s episode, we are going to talk about how to create a child theme after modifying a parent theme, right here on Your Website Engineer podcast, episode No. 268. Hello, everybody, welcome back to another episode of Your Website Engineer podcast. My name is Dustin. Today we’re gonna be talking about themes, and child themes in particular.

We’ll get to that in just a second. I do have some announcements that I wanna share with you that is coming out of the WordPress space this week. The first one that I wanna let you know about is WooCommerce 2.5 has shipped. That actually shipped on Monday of this week, and you can update it via the dashboard.

Since WooCommerce is a free plugin, you can go ahead and do that right from your WordPress dashboard. It should give you the indicator that it’s time to update to the latest and greatest version. Now, each code release of WooCommerce has a name, and this one is called Dashing Dolphin.

Dashing Dolphin, one of its big core features is now it improves the speed of your store. It does a lot of things on the back end to enhance that speed and make things load a lot faster, especially if you have a very, very large store.

They also improve the layout of the email setting. This was kind of a pain before, to manage all of the different email messages that can be sent and how to customize those. Those have been completely redone and laid out.

It’s much more simple to access, configure, and edit your email, and you could also edit the ones that are going out to people who want to customize – that need to log back into their account, or things along those lines. You can customize every single email message that gets sent out through WooCommerce about.

Also, they’ve improved the REST API again. That allows your WooCommerce store to talk with other services and share more information, and so there’s a whole bunch that’s in the documentation for that.

Then, the last thing is they added support for WP CLI. This is the interface that allows you to talk with your site via the command line. They’ve added some new things and some ability to do a bunch of really cool things that you can do, and you can manage things right from your WP CLI.

That means that you can go and you can look at your coupon codes right from the command line, you can go and add products right from the command line. It is really cool and really, really sneaky how much stuff they have packed into this release.

If you are using WooCommerce, I highly recommend updating it to the latest version and then giving that a shot and taking a look right there and seeing what could happen with your website, see how much faster things will load, and see how much easier it is to manage your ecommerce store.

Another thing that I wanna share with you this week is – this actually happened last week, but it happened after the show was published, was Matt Mullenweg and a few of the leaders from Automatic were in Cape Town, and they had a role community meet up. Can you imagine what that would be like if Matt Mullenweg just showed up to your community meet up of 25 people or whatever? Well, they had this, and they are calling it a Fireside Chat. It was basically a bunch of question and answers.

I put a link in the show notes to a WP Tavern article, where you can watch the whole thing, they recorded the whole thing. I think there was more than 70 people that showed up live and were there to ask questions and hang out. I think the audio is just a little bit rough on it, but still, you get the impression. You can hear all of the question and all the answers that Matt provides, which is really cool.

Let’s see what else is happening in the news. Oh, this week, Drupal turns 15. Can you believe that? Why am I talking about Drupal? This is one of the few times that we’re gonna say anything about Drupal, but it’s just another CMS that’s out there. It is one that probably paved the way for WordPress since Drupal is 15 years old, WordPress right on its heels at 12 years old.

It was probably some of the things that Drupal was doing that kind of initiated and helped to form what WordPress is today, and so I just wanted to say happy birthday to Drupal, that’s the last we’ll talk of Drupal.

Lastly, this was kind of a neat article as well that I found and I’ll link to in the show notes, but Weaver Themes has a – they wrote this big long case study about how they turned 600 theme options all into the customizer. The customizer is where you go to in your dashboard, if you go to appearance and then customize, you can go straight from there, and then you can see a slide bar comes out to the left, and then you can add your menu items, you can – I mean, you could do a lot of customization to your website.

You can pick a different theme, you can do a bunch of stuff, and the cool part about using the customizer is that everything updates live and in real time. Well, this theme that they had, I guess one of the big things that I heard recently was that all themes have to start to adapt to use the customizer. Of course, these folks weren’t happy because they had 600 options in their built-in – they had their built-in own section where you could customize their theme, they created a new menu option and all that kinda good stuff.

They weren’t super happy about it, but went in and took a little bit of time and went and re-did everything, so now, instead of having their own frames within frames and all of these settings, they took some time, they kinda deep-dived and analyzed how would be the best way to lay this out, and then they created a customizer panel were they can go in and you can change your colors, your spacing, your width, your styles, typography, visibility, layout, all that good stuff. All the options are still there, but now they’re in the customizer.

It’s kind of a neat article to read. Again, it’s linked in the show notes for this episode, but again, it’s really cool how it says how the experience is so much better because it’s in the customizer, and when somebody changes a color from blue to green, you can see that instantly on your website.

I thought that was kind of interesting piece of the puzzle that’s out in the news, and so if you want to learn a little bit more about that, you can go and head on over to weavertheme.com, and there’s an article there, or you can find a link in the show notes for episode No. 268.

That’s all that I have in way of news this week. There is a plugin that I wanna talk about in the Is There a Plugin for That section because remember, there’s more than 42000 plugins in the WordPress repository, and I just wanna highlight a new plugin every single week just to make sure that we are kind of exploring and figuring out different plugins that are out there. This one has to be the one that has the longest name in the history of plugins, but it is called Display Post in Grid Layout Without Coding-Content Views.

The name really describes pretty much everything about it. It’s a simple to easy query into display latest posts or any posts for that matter by category tag or author in a grid without any coding. You may want to put in, on your theme or on a page, maybe you wanna list the most ten recent posts, and you wanna have them in a grid, and you can do this with this free plugin. It does some really cool things.

If you need gridding for anything, if you need the ability to put things in grids or columns, then this is definitely the plugin to check out. You can go to the WordPress repository and search for Display Posting Grid Layout Without Coding, or you can probably search for Content Views, and this plugin will pull up.

It’s got more than 20000 active installs, is to it’s one with a bunch of five-star ratings, over 100 five-star ratings, and so it is a well-liked plugin as well. You wanna go ahead and check that out if that’s something you are interested in.

All right, today we wanna talk a little bit about how to create a child theme after modifying a parent theme. I know I’m throwing out these bus words, like child theme and parent theme, but we’re gonna dive in, and we’re gonna talk about this. Basically, what we’re gonna do is we’re gonna dive into what those two are, and what we can do if we’ve accidentally not followed the WordPress standard, and we’ll talk about that, too.

Let’s go ahead and just talk about a parent theme and a child theme. If you go ahead and purchase a theme from somebody, or from somewhere, or maybe you buy it from a theme shop, or maybe you’ve paid somebody to create a custom theme for you, these are what are called parent themes. They’re just the main theme, and the WordPress name for them is parent theme.

Almost every – if you go to themeforest.net to buy a theme, or Elegant Themes, or any of these places, you’re gonna buy a parent theme. A lot of times, we want to make customizations to these parent themes. I know for a fact that back when I first got started WordPress, I would just go in and I would find of files that I need, and I’d make a change here, and I’d make a change there, and then I’d modify some other files, and I’d do some of this other stuff, and I would make it look exactly like I wanted it to.

The problem is that when that theme had an update, maybe JavaScript changed, or maybe – all kinds of things can lead a theme developer to push out a new version of their theme, but when that happened, and I clicked that button, I lost everything. It overwrote all of my files that I made all of those modifications to, it was heartbreaking because it was all gone. It was, “Oh, man, there was so much work there.”

WordPress has this ability to create what’s called a child theme. A child theme is basically – it will inherit all the properties of a parent theme, and then what happens is you can make modifications to the code inside a child theme. Then, if your theme ever updates, it never breaks, or it never erases all the code that you have custom created.

After a few years, I figured out, “Okay, this is the right way to do this. I should be doing things the right way,” and not necessarily this crazy backwards way that I had been doing it, and I’d lose changes, and then I’d always be fearful of updating and clicking that update button and be like, “How much did I actually modify in this?”

There’s a reason why this is the best practice. Now, if you’ve already done this, if you’ve already hacked your theme to smithereens, which is fine, it’s how I got started, there’s a lot of themes that I’ve hacked in my day, but if you’ve already done this but you want to go back to the best practices, I want to just kinda give you some ideas of what we can do and how we can get back to having a parent theme and a child theme, kinda get that relationship going back the correct way again.

Let’s see. What do we wanna do? The first way is the brute force method, I’m gonna call it. You’ll need to get the original theme times, and you’ll also need to get all of the theme files that are on your server. What you wanna do is you wanna have these two folders, and I would name them Live Server and Original.

Name them in some way, shape, or form where you’re gonna know which one is which because you don’t wanna get confused and put the wrong one in the wrong place. What you wanna do is you want to compare each file to see if there’s any differences. Now, this is the slow way to do it, and this is a way that may be the most efficient for you depending on your skill set.

Most text editors, something like Sublime Text, or there is one called TextEdit, there is BBText, there’s tons of – Text Expander – not Text Expander. There’s another one called TextWrangler. TextWrangler I know that can do this one for sure, but you can basically open up two files, and then you can click a button, and it can compare and contrast those two files, and they can find any differences.

The first way is you can go in and you can look at every file that’s on your server, and every file that is part of the original theme, and you can compare and contrast. Any file that you find that is different or modified that is on your server, you wanna go ahead and duplicate that to its own folder, and then we’ll get to that in just a little bit. You wanna go ahead and do that.

You could also do some cool terminal command line type things to find differences between files and what not. That’s above my pay grade. I’m gonna go ahead and do it this way. One thing that you can do is you could actually take a look at the file dates. That’s another thing that we can do.

Let’s go ahead and talk about that second method. The first method doing a brute force, and we’re gonna go ahead and we’re gonna check every file line by line. If you have a pretty simple theme, that’s not gonna take very long, but a lot of these themes have a lot of different modifications. They’ve got the includes file, they’ve got JS files, they’ve got all kinds of other files, so that could take a little bit of time.

Now, this second option, is going to need you to have access to your serve via FTP, so if you are comfortable with using the FTP editor, I would recommend logging into your sight, going to the WP-content/themes/ and then the name of your theme, and you wanna look in that file.

What I normally do is you can actually sort those by modified date, and/or sort them by most recently updated because the FTP client will let you know when the last time that file was updated. Then what you can do is you’re gonna see a whole chunk of them that have the exact same date. That date is going to the day that you added that theme to the server, whether you uploaded it via a zip file, folder, or you added to an FTP client.

What you wanna do then is you wanna find all the ones that have different dates than that main date, and then what you can do is you can take all of those files, and then you can drag those onto your computer, or you can save them into a folder, and then those are all your modified files. Then, from there, what we can do is we can start to build out a child theme, and then we can use the parent theme and the parent theme relationship.

Now, I could spend a lot of time talking about how to build a child theme, and it’d require a little bit of code and talking all about how to add this and how to add that, but instead of doing that, and in order to keep this podcast concise, I do have a create a child theme webinar reply that’s on my website. There’s a link to it in the show notes for this episode.
Basically, I go through the same process of starting with a parent theme like 2012 or 2015, one of those themes, creating my own child theme, and then what you would do in this case is you would take all of those modified files, anything that you have modified at one point, and you would add those to your child themed folder once your child theme has been created and your child theme is working.

The cool part is once you create a child theme, you can basically create a child theme and you can put zero customizations in it whatsoever, and it will load your original parent theme. Then you can start adding these customized files, the ones that you’ve made modifications to, and then it’s going to start to inherit those properties, and it’s going it start – your website will be put back together. Now you’ll have a parent theme, and you can have a child theme.

Now, if this all sounds way too complicated, and it’s like, “Dustin, this isn’t really worth all the effort to try to figure out how to change a parent theme into a child theme with all the modifications and customizations,” the other thing that you could do, a different approach, is you could just switch themes, and then, from there, once you’ve switched themes, then follow those best practices of any time you need to make a modification, just do it right the next time.

If you’ve had your same theme for half a dozen years, maybe five or six years, and have never had a theme update, then you’re pretty safe in assuming that you won’t have another theme update in another five or six years. I mean, maybe they’ll only have one or so, or maybe you’ll just wait for the time that you get that next theme update, and say, “Okay, by the time that next theme comes, I’m just gonna make sure that I launch a new version of my website, and I’m gonna do it correctly with a child theme.”

That’s kinda what I wanted to share. I had a listener that wrote in and was wondering how the best practices to do this, and there’s really not a super straightforward way. You’re basically looking for – you need to go in and you need to find all the differences in the main theme file and what the files that you’ve created and what you’ve changed. Then you take anything that you’ve modified, and you add that to your child theme. Then you can roll back your main website to the parent theme, and then you can use your customized view. All is going to happen from your child theme.

Again, all of this should be done on a development server. Never try to do all of this work on a live testing website because it won’t fail – it’s going to be time for you to stop for dinner, and then your website’s gonna be broken, and you’re just gonna stress about it the entire time it can’t get back online. That’s what I wanted to share, and that’s the reason for this topic this week.

Lastly, I just wanna say thank you to those who are using my affiliate links and are using some of the recommended services and products over at yourwebsiteengineer.com/resources. Today, I wanna highlight a FTP applications that I use, and that one’s called Transmit. It’s a really cool application that you can see files on webservers, you can easily upload files directly to Amazon S3. I love this ability, to be able to upload my webinar replays and things right to the cloud without having to log into their web interface.

I also like this because I’m super lazy, and I don’t know the command, the terminal command, to show hidden files on my computer. There’s some terminal command that you can make sure that any file that has a dot in front of it is visible, and I don’t remember how to do that ever, and I don’t wanna have to Google it.

With transmit, you can toggle those on and off very, very easily. If I’m trying to figure out if a folder has a git repository or not, and those are all hidden, invisible files, I can easily go to Transmit, I can look for it, I can turn on those files, and it just works absolutely beautiful.

You can download a free trial at panic.com/transmit if you’re looking for an FTP manager, and I guess FTP client or FT manager is a very – it sounds very scary. Basically, what it is, it’s a Windows Explorer box or a Windows Explorer window, or a Finder window, and it’s just connecting to a server, and then it just shows you the files and folders on a server.

Those are the big ideas, the big ideas that I wanted to share with you this week. With that, we’re gonna wrap up this episode. Never fear that if you have made modifications to your theme in the past, you can always go back. You can separate them between parent theme and child theme. It’s gonna be a little tedious, and it’s gonna be a little bit of work, but you can definitely do it.

It’s gonna save your sanity in the long run when it’s time for a theme update, and it’s just following WordPress best practices, which they’re best practices for a reason, and I try to do as many best practices as I can. That’s all I’ve got to share this week. Talk to you again soon. Take care. Bye-bye.