Earlier I’d looked at various options for defining your own custom CSS on your WordPress blog in such a way that all your hard work is not overwritten by a theme upgrade. There is one additional method that deserves its own separate tutorial. It’s called a child theme. It provides a way of extending an existing theme where you can make not only your own CSS customizations, but also add functionality to the functions.php file, create your own header.php etc all without making any modifications that will be overwritten by later updates.

It’s not as easy as simply installing a plug-in to hold your custom CSS. But for those who are interested, it’s a great way to get started with the basics of theme development. If you find yourself making a lot of modifications to an existing theme, you might want to expand a bit and develop your own!

A Skeleton Child Theme for WordPress

In the “wp-content” directory of your blog, open up the themes folder and create a new subdirectory that will represent your child theme. If you’re trying to extend a parent theme that lives in a folder called “some-awesome-look”, the convention states that your child theme should be “some-awesome-look-child”. This is purely for convenience. It can be any name that you want.

To create your own custom CSS, create a “style.css” file and type in the following lines:

/*
Theme Name:     Some Awesome Look Child
Template:       some-awesome-look                             
*/

The theme name can be anything you want, but the template has to reflect the name of the folder in which the parent theme resides.

Though the chances are you don’t just want to write your own CSS, but extend and partially overwrite the existing theme stylesheet. In which case, you need to include the original stylesheet into your new style.css before you do anything else. So at the very top (even before the foregoing code), add this line:

@import url("../some-awesome-look/style.css");

As you can see, we use a relative URL to point to the parent theme folder just one hierarchy above the one we’re in. With this simple import statement we tell WordPress that we want to use all the rules from the parent CSS before we make any modifications further below. Just to reiterate, any “@import” statement has to be the very first thing in the file if you want it to work.

At this point you’re probably thinking to yourself – how in the world does WordPress even know that a child theme exists? Even though we’ve put all of the necessary information into it referring to the parent theme, we still need to take the final step and apply these changes.

Here’s the cool part. Login to your WordPress dashboard, go to Appearance and then Themes. You should see the child theme you just created as one of the options that you can install! I must admit it’s quite a kick seeing your work appear in the list of choices. You’re a pro already!

Overwrite Any Files

The true power of a child theme however comes when it allows you to overwrite any existing file in the parent theme including the PHP ones. So if you write a new header.php and place it in your subdirectory, it will be used instead of the original.

The exception is the functions.php file. Any functions you write in a new functions.php file are loaded in addition to and before those in the original parent theme.

So when people like me tell you to modify your functions.php, simply add those functions in your child theme instead. This way you neatly abstract away your changes and keep them safe. The same goes for any CSS modification you make.

External Resources:

Is your website slow?

Enter its URL below to find out now:

About the Author

Bhagwad Park

Comments

  • curious

    Hi,
    Can you change or rename an existing theme to a child theme?
    I want to upgrade my theme but there was never a child theme made.
    Is it possible to make a new child theme?
    Or can I rename present theme as a child theme and upload the original theme?

    Thanks in advance.

    • If I understand you correctly, you’ve made some modifications to your existing theme and you want to upgrade without losing your changes am I right?

      Is it possible for you to isolate those changes and create a child theme for your current one?

      • curious

        Yes, you are right.

        Unfortunately I don’t know what changes were made as the site wasn’t built by me originally.
        Is it possible to create a child theme even if you don’t know the changes made to original theme?

        I want to upgrade the theme without losing the changes.

        Thanks again.

        • Hmm…if you don’t know what the changes are, that’s going to be problematic cause there’s no way to tell what was in the original theme and what’s new.

          If you’re up for it, you can maybe download an old version of the theme and do a quick check in functions.php and style.css etc to see what’s changed? It’s cumbersome but probably the only method I can think of right now…

          You can create a copy of your existing WordPress theme and make it a child theme using the tutorial in this article, but it would just mean that any update would have no effect since effectively every file and function would be replaced by your “child” theme. The system won’t know which update is new and which is old…

          • curious

            Yeah, its too much hassle to do it either way.
            I will just copy the update in the changelog to the php or css file and see what happens.

            Unfortunately I’m not a techie person, but will play araound it.

            The developer should have created a child theme but he never, now I have to pick up the mess left behind 🙁
            Thanks anyway 🙂

        • Just make sure you take a backup in case things get hairy.