WordPress Child Theme – Getting Started Guide

Updated on June 05, 2017

In this article, I shall be discussing WordPress child themes: what they are, their advantages (and disadvantages), as well as how to get started with WordPress child theme development, and additional resources that you should surely check out!

What is a WordPress Child Theme?

In simple words, a child theme is a WordPress theme that borrows template files and other relevant functionality from a different theme. Thus, let us say, if we were to create a custom theme that borrows functionality and templates from Twenty Fourteen, the WordPress default theme, our new theme will be called a child theme of Twenty Fourteen, which in turn shall be termed the parent theme for our child theme.

As such, since most of the functionality and template files rest with the parent theme, the child theme often has nothing more than a single style.css file which specifies what functionality is to be derived from the parent theme and what aspects of the parent theme are to be changed or modified in the child theme.

Thus, the primary motive behind a child theme is to customize or tweak a given parent theme in order to make it suit our needs, and at the same time, not play around with the actual theme files because if the parent theme is ever updated, we may lose our changes.

Advantages of Using a WordPress Child Theme

The advantages of using WordPress child themes are many, such as:

  1. Easy Extending And Customization: As is obvious, a child theme extends the functionality of its parent theme. You already have a readymade template at your service in the form of a parent theme, and all you need to do is to create a separate style.css file for your child theme, and add the customization tweaks as per your needs.
  2. Hassle-Free Updates: Time and again, as WordPress evolves, themes and plugins need to be updated ever so often. If you make customization tweaks and changes to your primary theme, you may end up losing all your changes if you ever update the theme. Thus, it is advisable to make such changes to a child theme, such that even if you are ever required to update the parent theme, you have no fear of losing your changes.
  3. Saves Time And Efforts: When it comes creating a WordPress child theme, you are already using a readymade foundation in the form of a parent theme. This will save not only time and efforts but also vital resources and funds because the development will not be much complex.
  4. Fail-Safe Mechanism: WordPress child themes are pretty much immune to general coding omissions. Even if you end up forgetting to add a particular piece of code, WordPress will automatically seek and implement that given code from the concerned parent theme, and your design will not be broken. On the other hand, in a standalone theme, such omission may render the theme unusable unless tweaked.

Disadvantages of Using a WordPress Child Theme

While there aren’t many drawbacks associated with WordPress child themes, following are certain caveats that are well worth noting:

  1. Picking The Ideal Parent Theme: Not all themes act as good parents! Certain WordPress themes, for example, may not be updated regularly and thus tend to lack the latest functionality. Similarly, not all WordPress themes are created with child themes in mind and as such, may serve as bad candidates for parent themes. You need to pick the perfect parent theme in order to properly extend it and make it work as foundation for your child themes.
  2. Customization Efforts: A child theme basically seeks to extend and customize an existing template design. Thus, if you have already created a website around your parent theme, you may need to reconsider customization of elements such as menus, theme options, sidebars, header, etc. when moving to a child theme.

How to Create a Child Theme in WordPress

So, you have already decided to create a child theme for your favorite WordPress parent theme? Well then, let us get going!

First up, you need to create a folder for your child theme in the WordPress theme directory (nomenclature doesn’t really matter). Thereafter, create a style.css file in the folder, with the following details:

/*

Theme Name : The name of your child theme

Theme URI: http://www.example.com (Your child theme’s URL)

Description: A brief description of your child theme

Author: Your name

Template: Your parent theme directory name

Version: 1.0.0 blah blah

*/

In this, under the Template part, you need to specify the directory name of the parent theme concerned. Also, if you omit that line, WordPress will treat your child theme as a proper theme in its own right.

At this junction, we have a child theme with a blank style.css file. Now, to inherit the stylesheet properties of our parent theme, add this line:

@import url(“..parent_theme_directory/style.css”);

Replace the ‘parent_theme_directory’ part with the name of the folder where the concerned parent theme resides.

You can also import multiple stylesheets using this method, if need be.

Now, your child theme is ready to inherit stylesheet elements from its parent theme. If you want, you can also copy these folders from your parent theme’s directory to your child theme’s folder (not mandatory, but advisable), all addresses being relative to the parent theme directory:

/images

/inc

/includes

/rtl.css (Right-to-Left language support, not all themes may have this functionality).

That’s all. You can now start adding your custom stylesheet settings to the child theme’s style.css file. Additionally, you can also copy template files from the parent theme to the child in order to edit them, and if you need to add new functions, make sure you copy the functions.php file from the parent theme’s folder to the child theme’s directory.

Once you activate your child theme, WordPress will load the stylesheet settings and template files from the child theme itself, and if anything is missing, it will load the corresponding entities from the concerned parent theme.

Suggested Reading

If you wish to explore WordPress child themes in even more depth, I recommend you check out these articles and resources:

  1. WordPress Codex
  2. Basics of Child Themes (WP Tuts+)
  3. Creating A WordPress Child Theme (ManageWP)

Child themes not only provide an effective medium of extending the functionality of your favorite WordPress theme, but also serve as a good startup point when it comes to learning and mastering WordPress theme development.

What do you think of a WordPress child theme? Have you developed any or are trying to get started with one? Share your experiences with us using the comments below!

This article was written by Sufyan bin Uzayr

Sufyan bin Uzayr is a Linux programmer and a WordPress enthusiast. He is interested in mobile development, open source and photography. Sufyan authored a book named Sufism: A Brief History.

Hand-picked related articles

  1. Gravatar for this comment's author
    Baraka Baraka May 16, 2017 at 11:47 am

    This is no longer the best practice according to the wordpress documentation.

    If you update or extend this tutorial make sure to emphasize to change the 4th line of code in the functions.php.
    So for example:

    $parent_style = ‘twentyfifteen-style’; // in case of Twenty Fifteen parent style

    or in case of divi:
    $parent_style = ‘divi-style’; // Divi parent style

    etc.

    Took me awhile to figure this out.

  2. Gravatar for this comment's author
    Wolfneo - Foxdao June 7, 2017 at 2:18 am

    Hi,
    This code is the old method
    @import url(“..parent_theme_directory/style.css”);

    See the Codex, for a while, you have to add a code in the file functions.php
    https://codex.wordpress.org/Child_Themes

Leave a Reply

Use WordPress?

Join 20,000+ others who get our FREE weekly newsletter with WordPress tips on how to drive more traffic and revenue to your business!

You have Successfully Subscribed!

Send this to a friend