WordPress 101 Part 5: How to make a child theme & why you need one

Wordpress 101 Part 5

Wordpress 101 Part 5Finding a WordPress theme you love is an endless search, and can seem like an impossible one. There are thousands of themes out there, and while some of them are beautiful, there are usually atleast a few things you want to change to make the theme perfect for you. Tweaking the design of a premade theme can seem daunting when you don’t know where to start, but the truth is that it’s very simple.

You could go into the CSS of your theme, and make some changes. For example, you could change the background from white to pink if that’s what you wanted. However, a good theme will continue to be updated as time goes on. And when you click update on your theme, you are essentially deleting all your old files, and replacing them with the new ones. And, unfortunately, that means that any changes you made in those files would be gone too. Luckily, there is an easy solution to this problem, and that is to create a child theme.

What is a child theme?

A child theme is a theme you create that is based off of your original theme (also known as the parent theme). The child theme uses all the original files of the parent theme, but allows you to make changes that override the original theme in a separate theme folder. This way, when you update a theme and the old files are replaced with new ones, your changes are all safe because they are within a separate theme.

For example, I created a child theme for this blog, and that is what you are seeing. My parent theme is Twenty Sixteen. This means that my child theme is pointing to Twenty Sixteen. So, if my child theme was empty, this site would look exactly like the Twenty Sixteen theme. If you click through and take a look at the preview of Twenty Sixteen, you’ll see that my site looks nothing like that. That’s because I’ve added so many CSS changes to my child theme. So, my site draws all the information from Twenty Sixteen, and then draws the information from my child theme, which overrides any corresponding information in Twenty Sixteen.

So, if all I had in my child theme was body { background: pink; } then my site would look exactly like the Twenty Sixteen theme, just with a pink background. As I add more and more customizations more things start to change, and eventually you can’t even tell what theme a child is based on. Though you might want to use a child theme like I have to completely customize your theme, you can also use it to make little changes to tweak small aspects of the design.

Getting your child theme up and running in the first place can be tricky, but after you do you should never have to adjust any of the settings again, and can just add CSS code to change how your site looks!

It’s important to note, that with standard themes like Twenty Sixteen that have one stylesheet, you can make a child theme using this tutorial. However, some themes are more complicated and a child theme made using this tutorial might not work. So, some themes offer their own child theme download that you would just have to upload to your site. Before you follow this tutorial, look wherever you purchased your theme from and see if there is a child theme download available.

Why do you need a child theme?

Like I said at the begining of this post, the most important reason to create a child theme is so that you can keep your parent theme up to date, without losing all your changes. You always want to keep your theme up to date so that it is compatible with the latest versions of WordPress, so you want to be able to click Update without worrying about losing anything.

Not to mention that using a child theme keeps all the core file of your parent theme safe. You don’t want to go rooting around in your parent theme fiddling with files and potentially damage something that could crash your site. Instead, when you create a child theme, you only have to put two files in there so there’s less chance of accidentally break any of the functionality of your website.

How do you make a child theme?

Making a child theme is surprisingly simple, and can be started in just a few minutes. Here I’ll take you through the steps that you need to take to create a child theme. Once you do that and you know it’s working, you can start making CSS changes immediately and you will never have to run through this setup process again.

Step 1

First, you want to login to FTP. If you’ve never logged into your FTP before, then that’s the first thing you need to get a handle on. FTP stands for File Transfer Protocol and is the service that allows you to transfer the files between a client and a server. AKA it lets you see the files that run your website, and edit them. You can visit my post here on How to Find Your FTP Login and How to Use It. Once you know how to login to FTP, you can come back here and continue on.

Step 2

Once you have logged into FTP, you will see a list of folders (or directories) and files that are on your server.

Before we dig any deeper I’ll say, don’t mess around with things you don’t understand. You are getting into the functionality of your website here and if you edit or delete anything important, it will affect your website.

So, lets find your WordPress files. Here is the path you want to follow wp-content > themes. To follow each path, you just double click on that folder to open it up.

In the themes folder you will see a bunch of other folders. Each one of these is a different theme that you have installed on your WordPress site. You would see these same themes if you went to Appearance > Themes in your WordPress dashboard.

You need to choose one of these themes to build from, which will become your Parent Theme. Depending on what you want out of your theme, you can choose any one you want. You can use one of the ones you see already pre-installed on WordPress, you can go into your WordPress Admin and install new themes under Appearance > Themes, or you can even purchase a theme and then customize that. There are lots of options.

I always build from a standard theme like Twenty Sixteen because it is basic and allows me to customize it a lot. The key is that your parent theme must also be installed on your WordPress site, so you will see it there in your list of available themes. If the theme you want to use is not there, go to Appearance > Themes in your WordPress dashboard, install the theme, and then come back to FTP and refresh the list of them folders, or drag the theme folder into the themes folder through FTP.

Step 3

Next, you want to create a folder for your child theme. Right click on the open white space and click New Folder. Call the folder something easy and unique. Mine is called melissacarterdesign. A standard convention is to just name the folder the same as your parent theme folder, with -child at the end. I think that’s a little boring, so I like to actually name the folder to correspond with the project. Whatever you decide, try to keep things simple and stick to no spaces and no uppercase letters, then click create.

Step 4

The next step is to go into your child theme folder and create two files. So, double click on your new folder to go in. Then right click on the open white space and click New File. Name it style.css and click create.

Then do the same again to create a functions file. Name the file functions.php.

Step 5

Next you want to open the style file (style.css). Click on it and then click the Edit button at the top of the window. Basic programs like text edit can open this file and you can edit it in there. However, if you’re going to be editing your style file a lot, consider downloading an editor that is made for coding. I use Sublime Text 3 which you can download here. It has different colours for different parts of the code and will make it easier for you to work with your WordPress files.

Step 6

So, open your style.css file in whatever editor you are using, and paste the following code in.

Replace my information with your own accordingly. You only really need to the the Theme Name and the Template, so you can delete the other lines if you don’t want to have them, but they are just nice for informational purposes.

Theme Name: Name your theme. This is the name that will show up when you go to Appearance > Themes. Name it something unique so it’s clear that this theme is for your website.

Description: I like to just say that this theme is a child theme of whatever parent them I’m using, so it’s clear.

Author: Put your own name if you are going to be making lots of changes. If you are going to be making only a few changes put the author of your parent them. You can see what the author is by going into the parent theme folder, opening that style.css file, and looking at what they have written under author.

Author URI: Again, if you are making lots of changes, put your own website here. If not, put the website where you got your theme from, or just delete this line.

Template: This line is important, and is the one that tells your child theme where to look for your parent theme. If this text isn’t right, down to the letter, your theme will not work. You just need to replace twentysixteen with the name of the folder of the parent theme you’ve chosen. Now save this file.

Step 7

Next, open up the functions file you created and paste this text into it.

The only thing you need to change is on the fourth line where it says twentysixteen. Change that to the name of your parent theme folder, the same way you did in your stylesheet. Now save this file.

Step 8

Lastly we want to check and make sure it worked. Log in to your WordPress dashboard and go to Appearance > Themes. You should now see the theme there that you just created. Select it and activate it. If you view the site now, your site will look exactly like the parent theme you chose, because you haven’t made any edits yet.

If instead, the theme is written down at the bottom of this page, it means that something in the code you used didn’t work, and you need to go back and double check.

In the image below you can see in my themes folder, I have my parent theme, my child theme, and I added a broken theme called melissastheme that you can see down at the bottom. If you see this, retrace your steps and make sure everything is correct.

On your active theme, you won’t see an image like you do in the image below, you will just see a blank space. If you want to add an image you can read my post How to Add a Theme Preview Image in WordPress

Wordpress 101 Part 5: How to make a child theme & why you need one

Step 9

Once your theme is working and activated, you can start adding CSS and changing the way your theme looks. First, close your functions.php file. You will only be needing your style.css file from now on. You can keep editing the file here, or if you ever need to, you can go to Appearance > Editor in your WordPress dashboard to access it.

Your style.css file is where you will add all you CSS edits. CSS (Cascading Style Sheets) is the language of web design, and it’s what you will use to make all your design changes. When you add any code to your child theme, it should automatically override the same code in your parent theme, so any changes you make should show up.

Firebug is a great tool to use to find out how to style the exact item that you want to style. I’ve got a post on Firebug and How to Use it that you can check out for some help on styling.

To test and make sure your edits work, choose a very basic style that you know will make a visible difference and enter it into the child theme. Something like body {background: pink !important;}. Save your stylesheet and then refresh your site. The changes should show up immediately. If they don’t then something is wrong and you need to go back and make sure you got everything right.

Inside your child theme folder you can have anything from font files, to stylesheets to php files. Whatever they are, they will override the same file in the parent theme. This is the best way to make your site look exactly how you want it to, without the skill required to code your own theme, and the fuss needed to edit an original theme directly. Now you have an easy way to add any changes you want to your WordPress theme! Yay!

68 thoughts on “WordPress 101 Part 5: How to make a child theme & why you need one”

    1. It’s a great way to edit a theme without risking messing up its functioning – especially if you don’t know much about css! Good luck! I’d love to see it if you do.

  1. I used to think child themes were the bane of my existence, but I’ve come to find they’re incredibly useful now! Sometimes the WordPress Codex can be super confusing, so I appreciate that you’re developing how-to’s in layman’s terms. /two thumbs up!

    Liza
    http://thevioletlife.com

    1. Thanks Liza! Me too, I can still remember when I started out and I wasn’t even using child themes. Now I don’t know what I’d do without them. And you’re right, the codex is definitely not written in a beginner friendly language.

  2. Hi Melissa!

    Thank you so much for all of the stuff you write! I just recently started reading your blog and I can’t stop!! :) I have a question though, once we see those other themes can we delete them from our FTP and WordPress if we only want to stick with one? Just to clean it up or what will happen? Thanks!! New to this :)

    1. Also, what if I have a Prophoto theme? Should I just stick with creating a new folder under one of the twentythirteen/twelve folders? or can I create a parent under the Prophoto folder? Thanks!

      1. Hey Alisha, thanks for reading, that means a lot!

        Yes, you can delete all the themes you don’t need, other than the parent of your child theme to keep your FTP and themes area looking nice and neat!

        You can use any theme as a parent, so you can definitely use Prophoto. Just follow these same instructions, but instead of directing it to Twenty Eleven, tweak the code a bit to change it to Prophoto on both the ‘Template’ and ‘import’ lines ! Should work like a charm.

        You’re adding it in the ‘Themes’ folder, and it doesn’t matter where in the list you add it, because after you refresh they will automatically alphabetize again. Hope that helps!

  3. Hey Melissa! I have a question on steps 2-3. Do you create the new folder inside the folder for the parent theme or inside the themes folder?

    Thanks,

    Abbie from Wisconsin

  4. Hi Melissa! Thanks so much for this. I am very much a newby and had a question. When creating my child theme, this is the error message I have received on my WP themes page:

    Broken Themes

    The following themes are installed but incomplete.

    Name Description
    mess Template is missing. Standalone themes need to have a index.php template file. Child themes need to have a Template header in the style.css stylesheet.

    I don’t quite understand what next step I need to take. Any advice?

    Thanks!

    1. Hey Sheila, So this means that the parent theme is not there. If it is there, that means you haven’t pointed to it correctly. You have to make sure that all the information above is at the top of your style.css file. Then you have to make sure the @import path is right, but you also have to make sure the ‘Template:’ line is right as well. So make sure you change that ‘twentyeleven’ to the name of your parent theme. You can look in this same information in the style.css file of your parent theme to find out exactly what that name should be.

      1. Hi Melissa,
        I have the same problem as Sheila. But my parent theme IS there and I’ve checked over my information again and again, and I can’t figure out why it’s no working. I have the correct name exactly after the @import part. But when I look under my themes in wordpress at the bottom it just says:

        The following themes are installed but incomplete.

        Name Description

        joie Stylesheet is missing.

        Do you have any idea what I can do to fix this?

        1. Hi Renae (and Meg) did you make sure that the ‘Template’ line is correct as well? This line is important to make sure the connection is made as well. If you try this and it doesn’t work you can post a copy of this section of your code and I’ll see if I can figure it out!

          1. My template line is correct too, I’ve tried it with both the name capitalized and not, just to make sure.
            This is what I have for my code:

            /*

            Theme Name: Look At The Moon

            Description: This is the child theme to Ample.

            Author: Renae Thiessen

            Author URI: http://renaeliz.com

            Template: ample

            Version: 1.1.5

            */

            @import url(“../ample/style.css”);

          2. Everything does look correct, so a few things to try:
            – the quotation marks around the @import line. Sometimes they change when you copy paste them. so delete them and retype them again so they look flat rather than curved. (it’s a stupid little thing but sometimes it makes a difference).
            – try fiddling with the ../ of the import line (delete it and try again)
            – case does matter like you said, so make sure the parent folder is ample, not Ample.
            Let me know if that works, if not I’ll brainstorm on it!

          3. Hey Renae,

            I can’t think of anything else to troubleshoot, but I have been trying to update my tutorial posts with videos so I made one for this post. You can watch it above and maybe you’ll see something there that will help! Let me know if you get it figured out.

          4. Okay, so I finally got it to work! I watched your tutorial and I figured out when I created my style.css folder I named it “STYLE.CSS” in all caps for some reason. I have no idea why I did that. but I just started over and left it all lowercase and it worked. Thank you so much for your help!

          5. Oh my goodness! See it’s always the little things haha. maybe your caps key was on and you didn’t realize. Well I’m glad you got it figured out and happy to know the video helps! Thanks for reading! :)

  5. Hello Melissa!

    I hope this question isn’t too much for your comment section, but I recently purchased a theme that came with both the parent and the child. I’ve read through your post several times because I really didn’t know what to do with the two copies of the theme! My question now, though, is, I’m not really sure which steps to skip and which to follow and are there any additional steps?

    I really appreciate all of your articles! I’m new to blogging and before I started, researched for a couple of months to make sure I was set up to be as successful as possible, but the image I had of BlueHost and WordPress was that they were just click and drag and plug and play…nothing prepared me for this! So now I’m trying to go back and learn everything that has changed and progressed since I worked in computers 20 years ago :)

    1. Hey Melissa! I’m so glad you’ve found my posts helpful! It’s definitely wise to do your research before you dive in, it sounds like you are well prepared!

      If you bought a theme and it came with parent and child, then you want to install both, then activate the child theme, and then make any CSS or other changes you might make to that child theme.

      WordPress definitely has a learning curve but you’ll get the hang of it after working through it for a while! Thanks for reading!

      1. Well, of course I chose the wrong theme :D good thing I’m not too far into my changes. Im glad its easier than I made it out to be in my head. Thank you so much again!

  6. First thorough blog I have seen about WordPress and very easy to read. Only issue I have had with this one is when I download Cyberduck and try to open it it just gives me the option to uninstall or repair. I click repair hoping it will do it’s thing and open but it just says I have to restart the computer to use the software. I’ve restarted twice with the same thing is happening to me. Not sure what to do about it and disappointed I can’t even get past Step 1 to create my child theme.

    1. Thanks Destiny! And that’s very strange. I’ve had cyberduck for a while so I’m not sure why that would be. Maybe you’re downloading the wrong file? Make sure when you click the cyberduck link you choose the right platform from the list of four on the left. Then when it finishes downloading you should be able to just double click to install it.

  7. I am so bad at this! I tried everything and when i go to change to my child theme it doesn’t look like the original one. i copied everything exact so im not sure what i did.

    1. Don’t worry Kim it’s all a learning process! Unfortunately I can’t troubleshoot from afar, but watch the video and make sure you go through every step slowly and you should be able to get it. Just stick with it! Thanks for reading!

  8. @import url(“../twentyeleven/style.css”); is no longer best practice:

    https://codex.wordpress.org/Child_Themes
    “The final step is to enqueue the parent and child theme stylesheets. Note that the previous method was to import the parent theme stylesheet using @import: this is no longer best practice, as it increases the amount of time it takes style sheets to load. The correct method of enqueuing the parent theme stylesheet is to add a wp_enqueue_scripts action and use wp_enqueue_style() in your child theme’s functions.php.”

    1. Hey Jerome! I am planning to write an updated version of this post using the new method, but the @import method still works and is a little easier for beginners so this is still an option. But thanks for pointing that out and I will be releasing an updated version soon!

  9. Thanks for the info! If I add a child theme to my already created website and blog, will it mess anything up that I’ve already done? I don’t want to have to start over from scratch! I haven’t done much messing with code in the files of the original theme, just added/changed a couple of things there.

    Thanks!

    1. Hi Melissa, it’s definitely a good decision to add a child theme. So if you add a child theme it shouldn’t look any different than your current site (if you haven’t made any css changes). But depending on the complexity of the theme you’re using switching could change up a few things. Just as when you move from theme to theme you might have to re-do some of your settings. When you switch themes sometimes your widgets will move/disappear and your menus might have to be redone. Your blog posts, pages, content, etc. will all stay in place. It shouldn’t be much work to move over and is definitely worth doing, but just make sure you set aside a little time to troubleshoot it when you do so. Thanks for reading!

  10. Thanks for these amazing tutorial posts! I was so excited when I ran across them. I see that you started these posts with recommending wordpress.ORG. I just started a wordpress.COM blog and am really discouraged to see the limited customization capabilities. Can this all be done with both wordpress.ORG and wordpress.COM?

    1. Hi Abigail, thanks for reading! WordPress.com is definitely limited in its capabilities. As far as I know you can’t make a child theme on WordPress.com either. My recommendation would be to use WordPress.com to get used to the dashboard and blogging regularly, but then to switch to WordPress.org when you have the time! Let me know if you have any other questions!

      1. Thanks for the reply, Melissa. I went ahead and switched over to .org. I would like for my site to be pretty and presentable before I start posting. And of course I want it to stand out and not be identical to everyone else’s with the regular themes.
        Quick questions. I have logged into the FTP client. But I am not seeing a folder named WP-Content. I even searched for “theme” and nothing came up. Do you know what the reason for this is?

  11. Hi Dear Melissa,
    I am ready to make the leap to a new website with blogging capabilities. First, THANK YOU so much for WordPress 101 Just an amazing amount of information. I have been researching, and seem to have gotten bogged down on “child theme”. I read your Part 5 and it is very helpful. However, there seems to be WordPress Plugins for this purpose. Do you have any insights or thoughts on just using a WordPress Plugin to handle the child theme situation.
    I am so overwhelmed with the whole blogging process that I hope I have not asked a stupid question.
    Thanks a gazillion,
    Nancy

    1. Hey Nancy, Congrats on making the leap to a new website! That’s such an exciting step. WordPress is definitely a great platform to go with. As far as I know there are plugins that can make a child theme for you and they will definitely get the job done. The advantage to doing it the manual way (that I’ve detailed in this post) is just that you have control over everything yourself, and that you avoid using more plugins. Having too many plugins running can slow down your site, but I myself have about 16 so don’t worry too much about that. Ultimately if you have a lot of coding knowledge and are going to be heavily customizing your site, set up a child theme manually, but if you are just looking to set up a child theme for the sake of making simple styling css changes, a plugin would be just fine! Good luck! :)

Leave a Reply

Your email address will not be published. Required fields are marked *