Category Archives: Child Themes

1.1 Why use a Child Theme?

At the very minimum, a WordPress Theme consists of at least two files, plus an optional 1200×900 image to suggest the theme’s design :

  • style.css
  • index.php
  • screenshot.png

A child theme can be even simpler because it inherits the functionality and styling of
a parent theme. It can be done with one file that imports the parent style.css.

  • style.css

But the current best practice is to use a functions.php that enqueues the parent style.css file:

  • style.css
  • function.php
  • screenshot.png

Child themes are the best way to make major modifications to an existing theme. *

  • ensure modifications are preserved
  • speed up development time
  • learn about WordPress theme development

* minor modifications to style can be done using the theme’s Customize feature.

2.0 How to Create a Child Theme

Upload into the themes folder, a directory containing the style.css file. The directory should be named for the parent with “-child” appended to it.

wp-content > themes > parent-child > style.css

At minimum, the style.css file should contain code looking at least something like this:

2.1.1 Experiment

On the left is an example of posts using the twentytwelve theme.


The two post on the right are the same posts using a child theme. The style is that of twentythirteen, but the sequence of elements still follows twentytwelve’s template.

The above example was created using a child theme which consists of nothing more than a style.css file in a folder named twentytwelve-child. The code looks like this:


It is the simplest code for a child theme (although in this example we changed the path of the style.css file).

In the code after the import of the style.css file, you can add your own css:

Selectors of Twentysixteen

CSS Rule Structure

Next we’ll look at more complicated code.


2.1.2 Create a Complicated Child Theme

Theme Name: Twenty Sixteen – Child
Theme URI:
Author URI:
Template: twentysixteen
License URI:
Text Domain:

Enqueue the parent and child theme stylesheets because using @import increases the amount of time it takes style sheets to load.

add a wp_enqueue_scripts action in a function.php file



Setting ‘parent-style’ as a dependency will ensure that the child theme stylesheet loads after it.

Including the child theme version number ensures that you can bust cache also for the child theme. See a more detailed discussion on Stack Exchange:


The complete (recommended) example becomes:

where |parent-style| is the same |$handle| used in the parent theme when it registers its stylesheet.

For example, if the parent theme is twentyfifteen, by looking in its functions.php
for its |wp_enqueue_style()| call, you can see the tag it uses there is |’twentyfifteen-style’|. In your child code, replace the instance of |’parent-style’| with |’twentyfifteen-style’|, like so:

$parent_style = ‘twentyfifteen-style’;

Failure to use the proper tag will result in a CSS file needlessly being
loaded twice. This will usually not affect the site appearance, but it’s
inefficient and extends your page’s loading time.

*Note:* You may need to re-save your menu (Appearance > Menus, or
Appearance > Customize > Menus) and theme options (including background
and header images) after activating the child theme.

3.1 Using functions.php

Unlike the style.css file, the functions.php file of a child theme does not
override (cascade) its counterpart from the parent. Instead, it is loaded in
addition to the parent’s functions.php. Specifically, right before the parent’s file.

The fact that a child theme’s functions.php file
is loaded first means that you can make the user functions of your theme
pluggable, i.e., replaceable by a child theme by declaring them
conditionally. Example:

In that way, a child theme can replace a PHP function of the parent by
simply declaring it beforehand.

4.1.1 Post Formats

post formats

add_theme_support( ‘post-formats’, array( ‘aside’, ‘gallery’ ) );

add_theme_support( ‘post-formats’, array( ‘aside’, ‘link’, ‘gallery’, ‘status’, ‘quote’, ‘image’ ) );

add_theme_support( ‘post-formats’, array( ‘aside’, ‘image’, ‘link’, ‘quote’, ‘status’ ) );

add_theme_support( ‘post-formats’, array( ‘aside’, ‘audio’, ‘chat’, ‘gallery’, ‘image’, ‘link’, ‘quote’, ‘status’, ‘video’ ) );

add_theme_support( ‘post-formats’, array( ‘aside’, ‘image’, ‘video’, ‘audio’, ‘quote’, ‘link’, ‘gallery’, ) );

add_theme_support( ‘post-formats’, array( ‘aside’, ‘image’, ‘video’, ‘quote’, ‘link’, ‘gallery’, ‘status’, ‘audio’, ‘chat’ ) );

add_theme_support( ‘post-formats’, array( ‘aside’, ‘image’, ‘video’, ‘quote’, ‘link’, ‘gallery’, ‘status’, ‘audio’, ‘chat’, ) );

add_theme_support( ‘post-formats’, array( ‘aside’, ‘image’, ‘video’, ‘quote’, ‘link’, ‘gallery’, ‘audio’,) );

5.0 Resources

Child Theme Plugins

Guide to WordPress Child Theme Development

How To Make Your Own Child Theme

How to modify the Parent Theme behavior within the Child Theme

How to Modify WordPress Themes the Smart Way (four part series)

How to: Create a Child Theme based on Twenty Eleven

Leveraging Chrome Developer Tools for WordPress Development

Theme Development – Codex

Tutorial: Child Themes basics and creating Child Themes in WordPress

Why @import is no longer a best practice – An Alternative

WordPress Child Themes: The Whys and Hows