Articles & Columns » Words on WordPress

Below is one of my Words on WordPress articles. My archives are here and you can subscribe to my RSS feed with your feed reader or by by email.

Words on WordPress: Creating a Child Theme

One other lesson to learn about using WordPress themes is the concept of child theme. A child theme is a copy of another theme – what we will refer to as the parent theme – and the child theme runs under and requires the parent theme.

The idea behind a child theme is to make a copy of the skeleton of the original (parent) theme and then add or edit parts of the child theme in order to customize it. This will leave the original theme alone and unmodified. This means the parent theme can be updated without losing any of your edits and changes which are in the child theme. Another advantage of the child theme system is that you have an original copy of the parent theme to refer to and check what you have changed.

The files of the original theme you move into your child theme override the files in the original theme, i.e. the existence of a child theme file with the same name as the parent – page.php or single.php – will override that file in the parent theme. So you override and customize what you need in the child theme, but leave everything else as it is in the parent theme. You can do this with page template files, headers and footers, and even the functions.php file.

The one basic file you need to create a child theme is the style sheet, called style.css. That’s all you need to create a child theme, and that may be the only file you need if you are only doing CSS changes in the child theme. I always put in a screenshot, too, titled screenshot.png, to be able to tell that a child theme is active while in the theme browser in the WordPress admin area.

See the page Child Themes « WordPress Codex at wordpress.org for a full outline of what you need in a child theme. Some commercial themes have different requirements for making child themes, but for WordPress.org themes, the requirements are simple.

When I create a child theme, I also drop in a new screenshot in the child theme folder – I make one of a screenshot of the website that is using the child theme – and that will help clearly show in the theme selector that the child theme is active and not the parent theme. Sometimes I will also use Photoshop or another image editor to add text to the screenshot to the effect that the theme is a child theme.

/*
Theme Name: MR.com Child Theme
Theme URI: https://markratledge.com
Description: Custom Child theme for markratledge.com
Author: Mark Ratledge
Author URI: https://markratledge.com
Version: 1
Template: twentythirteen
*/

@import url("../twentythirteen/style.css");

/* Theme customization starts here */

.body {background-color:#ffffff;}

When creating a child theme, make sure you fill out all of the fields in the style.css file so the name of the theme, the theme URL (the site the theme is used on), the developer (you), the developer website (you, again), like this, at the top of the style.css file in the child theme, as above.

Two lines in the style.css file indicate that this is a child theme and are required. One is the “Template: twentythirteen” line; that tells WordPress to look for the parent theme folder titled twentythirteen as a reference in the theme directory.

And the other is the @import url("../twentythirteen/style.css"); line.

That line tells the child theme to grab the full stylesheet from the parent theme twentythirteen to use in the child theme. Why is that? Well, you need the full style sheet before you can change anything.

All of your CSS style edits go below the /* Theme customization starts here */. When your changes are below the full style sheet, those changes override anything above because they are read and process last by the browser. That’s how your style customizations work. For example, in the style sheet above, I’m changing the body class background-color to #ffffff. That will override the background-color of the parent theme.

childthemescreenshot

And you want your child theme to appear professional, and you can do that by entering the header information in the child theme style sheet, as above. Your child theme details will show up in the theme selector in the WordPress admin area. It’s easy for the client to see they have a child theme and it looks more professional, too, when all your information is in the header of the style.css file, as in the image above, and the end user can see that.

The other detail that will make your child theme details stand out is the screenshot for the theme, which is a .png image called screenshot.png. Drop that into theme child theme folder and it will appear, as above. I usually do a screenshot of the theme itself on the site, as you can see above, but you can make a .png image with anything. Sometimes I add text to the image in Photoshop or another image editor to further identify the theme and even put in the customer’s name to personalize the way the theme appears in the theme viewer.

StudioPress Theme of the Month

Related articles:


Blue says you should check out these other Words on WordPress articles: