«

»

Print this Post

WordPress Child Themes: The Whys and Hows

Child themes seem perplexing to a lot of people. I recently answered a question on the WordPress support forums (which you can read here) in which I summarized a lot of what I have been explaining to people about child themes over the last few years. (At this point, all the websites I design using WordPress automatically begin with a child theme.) I thought I would expand upon it a bit here. Since the original thread was pretty much a series of questions and answers, it seemed a good structure to follow here.

Important!

This article isn’t about how to create a child theme, but about why you should use one.

What is a child theme?

According to WordPress, a child theme is a “a theme that inherits the functionality of another theme, called the parent theme”. It can be as simple or as complex as you need or want it to be.

In actual terms, a child theme is just a directory (i.e., a folder) with a single child theme style sheet in it. You can add other files as you need them, but this is the minimum requirement.

Do I have to have a child theme?

Not if you’re satisfied with the options you currently have with your theme. However, if you want to do something that your theme doesn’t do, you’ll need to use a child theme.

For example, let’s suppose that your theme has a “dark” and a “light” option. Suppose the dark isn’t dark enough, or that it’s too dark. Suppose that you want a red option, or a blue option. That is exactly the sort of thing a child theme is used for.

Why not just edit the theme files? There is an editor built in to the backend of WordPress, after all.

Yes, you can do that, but there are two major issues here:

The first is that you really need to know what you are doing. Theme files are generally a combination of PHP, HTML, CSS, and JavaScript. Something as simple as a missing semicolon can shut down your entire site. I saw this happen once in a PHP file; the surprised site owner told me “I didn’t think a single semicolon made that much a difference.” Unless you are absolutely sure of what you are doing, you risk shutting down your entire site, including the back end, which means that you won’t be able to get in and fix your mistake. At that point, the only way to fix it is to use FTP to upload a new copy of your theme, and all the changes you have made will be lost.

The second issue is that when your theme updates, you will lose any changes you have made to it. (And yes, you really need to apply updates when they are available.)

Do I have to update the theme I’m using?

In a word, yes. I frequently run into people who think that updates are more trouble than they’re worth, and who always choose never to update.

While it’s true that updates can frequently cause problems (especially updates to the WordPress core), updates do two important things for your site. First, they often offer new features that users have been asking for. Second, they plug security holes that were found in earlier versions of the theme, making your site more secure from hacking.

What are the benefits to using a child theme?

First, you can leave your current theme intact. It works, you know it works, and if you screw something up with your child theme, you can at least switch back to your current theme until you get things sorted out.

Second, you can update your current theme without worrying about losing the changes you’ve made through your child theme. That way, you can take advantage of new features as well as staying secure.

Third, and most importantly, you can do things that you couldn’t do with your regular theme.

What are the downsides to using a child theme?

As I said earlier, WordPress themes are built from a combination of PHP, HTML, and CSS (and often, JavaScript), so you need to have some familiarity with them in order to make a successful child theme. Fortunately, most of what you need to know you can find in the WordPress Codex, the WordPress support forums, or on Google. You can accomplish a lot of what you want to do by simple copy and paste.

It also is easiest to create and use a child theme if you have FTP access to your site. Not everybody does, and even if you do, then it’s another technology you need to understand. (Although once you have a good FTP client, it’s really easy.) If you don’t have FTP access to your site, then there are a number of child theme plugins available in the WordPress plugin repository. I haven’t used any of them, so I can’t speak to their quality.

Additionally, updates to your parent theme can occasionally cause compatibility issues with your child theme. This is generally caused by the theme creator using different css selectors. If that happens, using a tool like Firebug makes it easy to find them out and update your child theme. This doesn’t happen all that often, though.

How do I create a child theme?

There are good instructions available on the Codex here.

When should I create a child theme?

Like I said, some people are perfectly happy with the options their current WordPress theme offers. If that’s you, you never need to worry about creating a child theme.

However, the minute that you start thinking “I wish my theme did…” that’s when you should create a child theme. As I indicated earlier, every web site that I develop using WordPress, I now start with a child theme, because I know that’s where I’m going to end up eventually.

What if I’ve already made changes to my original theme?

Now you have a bit of a problem, but don’t worry. It’s perfectly manageable, but it’s going to take some time.

First, FTP to your web site. Go into your WordPress folder, find a folder called “wp-content”. Inside that folder is another folder labeled “themes”. Inside that folder is the folder that contains your theme, the one you’ve been making changes to. Find the stylesheet and download it. (If you’ve made changes to other theme files, you’ll want to download those, as well.)

Now, head over to the WordPress theme repository and download an unaltered copy of your theme. If you bought a theme from a commercial theme developer, you’ll need to check with them about getting a fresh copy.

What you now need is a way to quickly and easily compare your changed files with the unchanged ones you just downloaded. There are at least four sites where you can do this online:

  • DiffNow allows for copying and pasting of text files, or a simple upload.
  • Text Compare! allows for copying and pasting of files.
  • Diff Checker allows for copying and pasting of files.
  • QuickDiff allows for copying and pasting of files.

I don’t use any of those. I prefer WinMerge, which is a program you download and use locally. But all of them will do the trick.

With the tool of your choice, find the difference between the original stylesheet and the one you’ve altered. Copy those changes over to your child theme stylesheet, saving as you go. Once you’ve done that, you can upload your child theme, upload a fresh copy of your original theme, and then select your child theme as the current theme. (Because child themes are, from WordPress’s point of view, different themes, you will need to reset your header and background.)

If you have made changes to the theme’s functions.php file, you’ll want to do the same thing.

Why not just copy the entire stylesheet over to the child theme?

You really want to avoid doing this. For reasons I don’t entirely (yet) understand, this causes a lot of problems. Instead, just copy over those portions that you changed.

For example, if your original theme contained this block of code:

and you changed only the font size property, so that it looks like this:

Then the only thing you should include in your child theme would be this:

What if I’ve edited other files besides the stylesheet?

Then things become a bit more complicated. What you’ll need to is to create copies of those files in your child theme. I don’t have a lot of experience with this, so I don’t want to get into this too deeply, as I don’t want to give you bad advice, and some of this depends on the way your theme is structured. For a start, you could simply copy the files you have altered over to your child theme folder, and you should be okay. But see the resources in the Codex about this first.

 Summary

As you can see, WordPress child themes can be as simple or as complicated as you need them to be. They are not difficult to set up, and can help you learn the basics of HTML, CSS, and even PHP. You may have so much fun with them that you decide to create your own WordPress theme or plugin. Enjoy!

Permanent link to this article: http://techblog.kjodle.net/2014/04/12/wordpress-child-themes-the-whys-and-hows/

19 comments

8 pings

Skip to comment form

  1. Ian Otto

    I have a question- Great article.
    I know this is basic but i have a question that I can’t seem to find an answer to anywhere. (Probably because it’s basic)

    So which theme do I keep as my active theme? The child theme right?

    Then when I need to update the Parent- Do I keep the child theme active and update the parent theme? Then move over the changes into the child theme? Yes? No?

    Thank you,
    Ian

    1. Kenneth John Odle

      Yes, keep the child theme active, and update the parent theme.

      Depending on what was changed in the parent theme, you may need to make adjustments to your child theme, but not always.

  2. BrokenEye

    Okay, but is there any way to create a child theme for WordPress blogs (not websites)?

    1. Kenneth John Odle

      Do you mean for wordpress.com blogs, rather than independently hosted wordpress.org websites? AFAIK, there isn’t a way to create a child theme for wordpress.com blogs.

  3. Adelmo Rocha

    friend, Kenneth John Odle
    A doubt, I keep two active themes?
    The intala plugins in theme PAI or child?

    grateful

    Adelmo Rocha
    Brasil

    1. Kenneth John Odle

      You can only have one active theme at a time, which should be your child theme.

  4. John Michael

    Could child theme helps to retrieve full width template under page attribute. That’s missing in my wordpress 4.2.2. Thank you in advance…!

    1. Kenneth John Odle

      It can, but the exact process depends on how your theme is set up. Basically, copy over your theme’s page.php to your child theme, rename it as page-wide.php or something similar, and then make edits to that file.

  5. Bob de Haas

    Gidday Kenneth,

    Thanks for the article.
    One question please?
    Should plugins (like Visual Composer, Mega Menu, etc) be installed in the parent theme or the child theme?
    My bet is that they should be installed in parent theme and be updated as necessary when WP parent is updated, however I would like to be sure before I start “doubling-up”. I’m re-developing my old html website to WordPress format.
    Ta

    1. Kenneth John Odle

      Plugins get installed into the WordPress core itself. But any modifications should go in the child theme.

  6. Brian

    I have just activated a child theme for my website so that I can make changes to the php files. For example I wanted to change the ‘Read More’ text at the end of a grid blog post.

    I found some instructions for the theme that basically said insert this <a href="”>Read more

    Right before this:

    in the index.php

    I have never used a child theme before and am nervous about making a mistake. I have a functions.php file but no index.php in my child theme.

    I looked in the functions.php but there is no

    So what do you do? Do I simply add that line at the bottom and then the new line (Read more) before it as it asks for, or do I need to create an index php and add those two lines in the child theme?

    I am a bit lost at the moment and, although I am sure it will all be reasonably straight forward once I have done a few mods, I could do with a little detailed guidance. The forums seem to assume everyone knows what they are doing.

    Hoping you can help.

  7. Brian

    Actually I just found a tutorial on YouTube which told me I have to copy the file I want to edit to the child theme and edit it from the child theme.

    I have done that now using FTP and it worked fine. So don’t worry about answering.

    Thanks

    1. Kenneth John Odle

      Sorry, I have been away for a bit. But yes, that is the correct procedure. Copy the files to the child theme and make your changes there.

      Keep in mind that if your parent theme undergoes a major change to some files, you may need to copy the files over again and make similar changes. This is not common, but it does sometimes happen.

  8. Emily

    So, to update files that are in sub-directories of the parent theme, such as /template-parts/content-page.php , do you have to create the template-parts subdirectory in the child theme and then create a new content-page.php ?

    1. Kenneth John Odle

      That I am not sure about (and I have been meaning to research/test this). A bit of experimentation is needed, and I’ll get back on this.

  9. Eric

    First off, great post, Kenneth. Thank you.

    Very basic question. My apologies.

    When the Parent Theme and Child Theme issue is discussed, I only hear about the relationship between those two. It seems to me that there is a third; the update.

    So here’s my scenario: I have purchased a theme from ThemeForest. The developer has released a new version of that theme (version 1.20). I have downloaded it and installed it but not activated it (as it would overwrite my theme customization in my Parent (version 1.10)). I created the Child Theme from my original Parent Theme (version 1.10).

    Is that correct? I assume it is. Please let me know if otherwise.

    Here’s my question: I now have THREE directories in my WP Themes directory: Parent Theme (version 1.10), the Child Theme (version 1.10-child) and my Update Theme (version 1.20).

    How is my Child Theme (version 1.10-child), referencing the updates present in (version 1.20)? Or do I have to first, compare EVERY line of (of EVERY file) with that of my theme update and copy and paste into my original Parent Theme (version 1.10) or Child Theme (version 1.10-child)? That seems especially time-consuming.

    Many thanks for the insight.

    1. Kenneth John Odle

      You will only ever have two themes: your parent theme and your child theme. To review, these are the salient points of difference between them.

      Parent theme:

      • This is the theme that will get updated.
      • You never make changes to the parent theme.

      Child theme:

      • You only make changes to the child theme.
      • You never make changes to the child theme unless you want to change your site. It should not be affected by theme updates.

      I think the main issue here is this:

      (as it would overwrite my theme customization in my Parent (version 1.10)

      There shouldn’t be any customizations in your parent theme; all your customizations should be in the child theme. Then, when an update is issued, you simply update the parent theme, and the process should be smooth and without issue.

      (That said, sometimes updates to a theme do cause things to break in a child theme. That really depends on the kinds of changes made to the parent theme—check the changelog—and the kinds of changes you’ve made in your child theme.)

      Here’s my question: I now have THREE directories in my WP Themes directory: Parent Theme (version 1.10), the Child Theme (version 1.10-child) and my Update Theme (version 1.20).

      You should only have two. You should overwrite the parent (v. 1.10) with the update (v. 1.20).

      How is my Child Theme (version 1.10-child), referencing the updates present in (version 1.20)? Or do I have to first, compare EVERY line of (of EVERY file) with that of my theme update and copy and paste into my original Parent Theme (version 1.10) or Child Theme (version 1.10-child)? That seems especially time-consuming.

      You’ve really lost me here. The number of changes in a child theme is generally pretty small: generally just a style sheet with a small subset of css rules (only the ones from the original parent theme that you want to change), plus (possibly) a functions file to override or add additional functions, and possibly some theme files that you want to change things around in (for example, single.php). What does your child theme look like?

  10. Vivek

    Hello Kenneth,

    Thank you for sharing your knowledge, very good article indeed.

    I have one stupid question (am new learner).

    1. Who will hold the ownership of GPL license on the child theme?
    2. Can I change the credit information in the footer of the theme?
    3. Can I distribute the child theme to other WordPress website developers?

    Thanks

    1. Kenneth John Odle

      You ask good questions, but I don’t have good answers. And what answers are out there are a bit fuzzy around the edges.

      As I understand it, you can pretty much do whatever you want, as long as you don’t violate the WordPress GPL license. You can read what WordPress has to say about their license here. You also might want to ask your question in the offical WordPress support forums. Just be sure to search first.

      You can also read about the GPL license on gnu.org.

      I wish I had better answers for you, and I’m sorry that I don’t. I create child themes for myself and for clients, but have never released them to the general public, and so have never worried much about it.

  1. How to Create a WordPress Child Theme | Obleta

    […] WordPress Child Theme The Why and How […]

  2. Child Theme | Pointfinder Documentations & Knowledgebase

    […] WordPress Child Theme The Why and How […]

  3. زیر پوسته‌ ها | ویکی مکانیک

    […] WordPress Child Themes: The Whys and Hows […]

  4. Tutorial: Child Theme Article | My Blog

    […] Child Themes Knows and Hows – techblog […]

  5. Changing site width « Graphene Theme Forum

    […] That is always your best bet. You can read more about how to do that (even after you've made changes) in the post I've written here: http://techblog.kjodle.net/2014/04/12/wordpress-child-themes-the-whys-and-hows/ […]

  6. Kind thema maken. – Test Cantiamo

    […] WordPress Child Themes: The Whys and Hows […]

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">