Master WordPress Child Theme Creation

A child theme is a theme that inherits the functionality and styling of another theme, called the parent theme. Child theme are the recommended way of modifying an existing wordpress theme.

Why use a Child Theme?

There are a few reasons why you would want to use a child theme:

If you modify a wordpress theme directly and it is updated, then your modifications may be lost. By using a child theme you will ensure that your modifications are preserved.
Using a child theme can speed up development time.
Using a child theme is a great way to to learn about wordpress themes development.

Getting Started

Child wordpress themes are not as difficult as they may appear. The benefits of working off a parent theme means you don’t need to write all the HTML/CSS from scratch. A child theme will automatically use any template files you include, such as sidebar.php or footer.php. But if they are missing, then your child theme will pull the same files from its parent.

This functionality offers an enormous amount of freedom to customize already existing templates. It’s also great for touching up areas around your website for special events, such as adding design patterns for Christmas or New Years.

Your Required Files

The child theme directory
style.css
functions.php

The first step in creating a child theme is to create the child theme directory, which will be placed in wp-content/themes. It is recommended (though not required, especially if you’re creating a theme for public use) that the name of your child theme directory is appended with ‘-child’. You will also want to make sure that there are no spaces in your child theme directory name, which may result in errors. In the screenshot above we have called our child theme ‘twentyfifteen-child’, indicating that the parent theme is the Twenty Fifteen theme.

The next step is to create your child theme’s stylesheet (style.css). The stylesheet must begin with the following ?

/* Theme Name: Twenty Fifteen Child Theme URI: https://example.com/twenty-fifteen-child/ Description: Twenty Fifteen Child Theme Author: Steins Author URI: https://mageewp.com/ Template: twentyfifteen Version: 1.0.0 License: GNU General Public License v2 or later License URI:  Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready Text Domain: twenty-fifteen-child */

A couple things to note:

You will need to replace the example text with the details relevant to your theme.

The Template line corresponds to the directory name of the parent theme. The parent theme in our example is the Twenty Fifteen theme, so the Template will be twentyfifteen. You may be working with a different theme, so adjust accordingly.

Although all the parent PHP templates will be used, the original parent’s style.css will not be imported automatically. If you want to work off the original styles you’ll have to include it at the top of your child’s style.css document. Below is an example including the WP Twenty Eleven theme.

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

Setting Up New Styles

Applying CSS rules to your theme is just as easy as editing the original. If you know which elements you need to target then use the same selectors in your own child theme.

We could demo with some really easy changes to links and paragraphs. I’ve used code from the original Twenty Eleven theme for targeting the different elements. At times it is necessary to use a more specific selector to override the older design.

body { padding: 0 1.4em; } #page { margin: 1.667em auto; max-width: 900px; } a { color: #5281df; text-decoration: none; font-family: Calibri, Tahoma, Arial, sans-serif; } a:focus, a:active, a:hover { text-decoration: underline; }

In these changes I’ve reduced the overall body size and also removed some padding from the edges. All of these selectors can be found listed in the original .css document. It’s notable that I’m also changing some properties for all anchor links which include a different font stack and color choice.

Cloning functions.php

Unlike the main stylesheet, your child theme will import its parent’s functions automatically. This means you don’t need to copy over any of the PHP code to still have it active in your new theme. Yet if you’d like to re-define some of the functions you can build another functions.php and write in your new code with any changes.

As an example I have built a function which parses a few JavaScript files when the template initiates. This will remove any older versions of jQuery and SWFObject scripts, while simultaneously adding the most recent versions to the wp_head area.

// queue js files for load function mytheme_js() { if (is_admin()) return; wp_deregister_script('jquery'); wp_register_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'); wp_enqueue_script('jquery'); wp_deregister_script('swfobject'); wp_register_script('swfobject', 'https://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js'); wp_enqueue_script('swfobject'); } add_action('init', mytheme_js);

I should point out that if you are importing code from the parent functions.php then you’ll have to use a different function name. Otherwise PHP will give out a fatal error and you will have to FTP into the server to fix the mistake.

Working with Theme Files

The most broad category of theming is building custom layouts and page types. By default your child theme will inherit all of its parent’s theme files. But you have the option of creating new child theme files and WP will register these as the ‘primary’ template.

For example archive.php and index.php are used to display the post archives and homepage screen, respectively. If there are changes you’d like to make which require edits to the HTML then you’d be safer cloning the parent files and editing them in the child’s theme directory.

Custom Page Templates

While we’re talking about template files I also want to introduce a piece of WordPress functionality which many are not familiar with. You can build page and post templates which will be selectable from the Admin panel when creating new content. Even if the parent theme doesn’t have the new custom template file WordPress will still use the child in place of a page.php or single.php.

First create a new file named page-offer.php. This will be a “special offer” promotional page which is themed differently than all the others. In here you can copy over your original page code or even build the theme entirely from scratch. The only code we need to let WordPress know about this new template is a comment setup in PHP.

<?php /** * Template Name: WordPress themes names */ ?>

Another alternative to this method is building custom pages named after the unique ID number. So instead of loading the default archive.php for author pages you could create a file such as author-ID.php where ID is the user’s unique WordPress ID number. Although this system is more taxing since you’d need to create a new template file for each of the authors on your site.

It becomes more useful if you can combine these two techniques with other template files. Notably categories and tags work well using their own theme files. Also if you link to attachments in your content then you’ll want to consider the different possible template layouts for each mime type. I included the template hierarchy below for a simple JPEG image attachment:

image.php
jpeg.php
image_jpeg.php
attachment.php

Conclusion

Your theme framework is just the starting point of a library of code and files you’ll create to support the sites you develop. Each site you create will need to run on a child theme, which will have your framework theme as its parent.

As we’ve seen, your child wordpress themes will add their own styling and functionality, and they can do this by hooking into the action and filter hooks in your framework, or via the creation of new template files. It’s always a good idea to adopt the solution which needs the least code, as that makes your site faster and your life easier!