How to Create a WordPress Child Theme

WordPress themes nowadays are awesome when it comes to offering the user options to make modifications straight from the admin panel, without even having to see a line of HTML, CSS, or PHP code.

You’d love a full-width layout instead of the usual sidebar? You like the sidebar, but you want to move it from the right to the left-hand side? No problem: your theme will most certainly have a page template perfectly suited for this very purpose.

And what about changing text color, links color, background color? Here’s WordPress Theme Customizer to the rescue. This amazing relatively new tool opens the doors to all sorts of customizations. The developer implements options in a straightforward way using WordPress native code, and the WordPress website user applies customizations very easily and previews them live right away.

However, there’s one important feature that’s highly recommended when carrying out customizations, especially extensive ones: the child theme. Here’s what it is, what it’s for, and how easy it is to create one.

What is a child theme?

Here’s a clear definition of what a child theme is, offered by WordPress.org:

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme. Child themes allow you to modify, or add to the functionality of that parent theme.

Any WordPress theme can be a parent theme. This allows you to have all the WordPress goodness from the parent theme, plus whatever else you want to add or modify for yourself.

Why should I create a child theme?

It’s best practice that, when performing extensive customizations to a WordPress theme, you create a child theme. Here are a couple of reasons why this makes sense.

  • First of all, when an updated version of your theme comes out, and you proceed to update your theme with the new version, it’s highly likely that your modifications will be overwritten by the latter. Using a child theme ensures that all your changes will be kept after a theme’s upgrade;
  • If you happen to mess up your theme by tweaking it the wrong way, or you’d like to go back to the original version, then it’s very easy: just delete all the changes, and the parent’s styles will still shine through.

How Do I Create a Child Theme?

When you want to know how to do something in WordPress, the best place to go to is the Codex. The steps to take are listed below:

  1. Go to wp-content/themes and create a new folder. Name it PARENTTHEMENAME-child, where PARENTTHEMENAME will be the name of the parent theme. For instance, if your child theme is a child of the twentyfourteen theme, the new folder name could be twentyfourteen-child. This is the conventional way of naming a child theme, but you can choose whatever name you like;
  2. Now create the only file that is really required, the others will be added as the need arises. This is the stylesheet, called style.css, and save it inside the new folder;
  3. Open style.css and add these lines of code below. These let WordPress know that it’s dealing with a child theme and that it’s parent is the Twenty Fourteen theme. Here’s the all-important code taken straight from the Codex:

    /*
     Theme Name:   Twenty Fourteen Child
     Theme URI:    http://example.com/twentyfourteen-child/
     Description:  Twenty Fourteen Child Theme
     Author:       John Doe
     Author URI:   http://example.com
     Template:     twentyfourteen
     Version:      1.0.0
     Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
     Text Domain:  twenty-fourteen-child
    */
    
    @import url("../twentyfourteen/style.css");
    
    /* =Theme customization starts here
    -------------------------------------------------------------- */

  4. The information inside the stylesheet is pretty intuitive. The only required lines are the Theme Name and the Template. The Theme Name indicates the name of the child theme, the Template is the folder name of the parent theme, and is case sensitive.
    Another important piece of information is the @import url("../twentyfourteen/style.css"); line. This imports all the styles of the parent theme into the child, so they’re at your fingertips for your own use. Whatever comes next inside the child’s stylesheet will overwrite what’s in the parent’s stylesheet;
  5. Finally, you should be able to see your child theme by going to the Appearance -> Themes section of the admin panel, where you can activate it, like you would with any other theme.

What now? Adding Styles

Changing styles to the theme is as easy as to open style.css in the child theme and adding your own CSS rules. To make things easier, try to locate the CSS selectors used in the parent that you want to modify, e.g., h1 … h6, p, classes, etc., and overwrite them in your child theme’s stylesheet. You can make this task even easier if you use a developer tool like the awesome Firebug for the Mozilla Firefox browser, my favourite.

To Sum Up

Child themes are the proper way to make clean, significant changes to your WordPress theme. They preserve your modifications from theme’s upgrades and allow you to undo your modifications in case you change your mind and want to go back to the original look and feel of the theme. All this joy is so easy to achieve simply by following the steps outlined above.

And you, have you modified your theme using a child theme? How did you find it? Tell me about it!

The photo is sourced from FreeDigitalPhotos.net by Boians Cho Joo Young

Advertisements

4 thoughts on “How to Create a WordPress Child Theme

  1. If I have a hosted WordPress account (accessed through my hosting provider), how do I create a child theme? My WordPress Admin panel is accessed and used entirely in the browser, and I do not have any files saved to local storage.
    Have just downloaded FileZilla, and will be investigating that.

    If you could give me tips or a direction on this, it would be brilliant.
    Thanks,

    Jamie

    • Hi Jamie,
      I don’t know which hosting provider you use, but it’s standard practice to offer clients access to a control panel where you can upload files to and download files from the space they allocated to your website on their servers.

      You will usually find a directory called public or www where you can place your site’s files. If you’re not aware of the structure of your server’s directory to which you have access it might be because you installed WordPress using some 1-click tool or such like instead of doing a manual install via ftp.

      Filezilla is a great free ftp client. You need to get the relevant information from your hosting company, i.e., hostname, username and password, and enter it in the boxes at the top of the Filezilla window, and then click the Quick Connect button. If you have trouble connecting, try rechecking the server info. Once connected you’ll have access to the WordPress directory itself and will be able to create a child theme inside the wp-content, themes directory.

      I hope this helps 🙂

Have your Say

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s