In this guide I want to introduce the basic concepts of building a WordPress child theme and why it’s such a good idea.
Recommended Reading: Beginner’s Guide to WordPress Plugin Development
Getting Started
Child 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 assidebar.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
You only need a single .css stylesheet to set up a child theme in WordPress. You also need to create a new directory in the/wp-content/themes folder which will house your child theme. Pay attention that you aren’t creating this folder inside the parent theme, but right alongside with it in the same themes directory.Developers will often include a functions.php and screenshot.png in the same folder as your new CSS file. The screenshot is displayed in your WordPress admin panel and the functions theme file can be used for tons of backend changes.
But for now we should focus on the main stylesheet. This is commonly named style.css and includes a comment header with key meta information. This is important because your theme will only display as a child if you include the parent’s directory name. Below is an example header comment:
- /*
- Theme Name: Twenty Eleven Child
- Theme URI: http: //example.com/
- Description: Child theme for the Twenty Eleven design
- Author: Jake Rocheleau
- Author URI: http: //www.hongkiat.com/blog/
- Template: twentyeleven
- Version: 0.1
- */
- @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;
- }
The !important Things
CSS has a special declaration to mark priority above other styles. The syntax is displayed as!important
beginning with the exclamation mark and terminating at the end of your
CSS property. This is necessary if you have cascading styles from a
parent theme which are overriding your own custom rules.- a {
- color: #5281df !important;
- text-decoration: none;
- font-family: Calibri, Tahoma, Arial, sans-serif;
- }
#access li:hover > a) will usually hold their own styles unless the color
was still inherited from our original selector. In this case our parent
theme does not setup a font-family property on anchor links, so as such
we don’t run into any inheritance issues.
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', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js');
- wp_enqueue_script('jquery');
- wp_deregister_script('swfobject');
- wp_register_script('swfobject', 'http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js');
- wp_enqueue_script('swfobject');
- }
- add_action('init', mytheme_js);
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: Offer
- */
- ?>
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
Helpful WordPress Tools
WordPress itself has a versatile plugins system that can manage a whole lot of customizations. Since child themes are so new, there aren’t a whole onslaught of 3rd party releases (yet). However there are a couple of tools you may check out to make your development time a bit shorter.An obvious mention is the One-Click Child Theme plugin built and tested for the latest WordPress 3.x version. It adds a menu link into your Admin “Themes” section to automatically build a child using your currently active theme. This is fantastic if you don’t want to mess with FTP and are looking to play around with some new ideas.
If you plan to edit these files within the admin panel you’ll also enjoy clearer syntax highlighting. This isn’t offered in WordPress by default but you can install the Advanced Code Editor for some much-improved functionality. This makes wading through PHP code blocks and HTML/CSS a whole lot more manageable.
Additional Resources
Along with all the tips in this guide I want to share a set of important links for theme developers. There are already so many great articles and free child themes you can check out to study deeper into this subject. I added a wonderful collection of these resources below:- 8 Free Twenty Eleven Child Themes
- WordPress Online Codex » Child Themes
- How to build a WordPress Child Theme using Hooks and Filters
- A Few Words on Child Themes
- How to Create, Modify, and Use Child Themes in WordPress
