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:
- 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;
- 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;
- 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 -------------------------------------------------------------- */
- 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;
- 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.