April 6, 2016 | Posted in: April 2016 A to Z Blog Challenge, Author Resources, XterraWeb Book Blog

Share this post
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

E is for Easy Child Theme Creation—A WordPress Guide

Easy Child Theme Creation. A WordPress Guide.

What is a Child Theme and Why Use One?
A child theme is a theme that inherits the styles and functions of another theme, called the parent theme. Child themes are the recommended way of modifying the existing theme one has selected to use for their WordPress site.

A few reasons to use a child theme are:

  • If you modify a theme directly and update it later, your modifications will most likely be lost. A child theme will ensure your modifications are preserved.
  • Using a child theme allows you to make changes without affecting the code of the original theme.
  • A child theme creates a separate set of files that can be used to customize the theme without making changes to the original theme.
  • You can create multiple child themes, which can be used to “test” potential changes you would like to make to the styles and/or functions of your theme.
  • If necessary, you will always have an original, unmodified, theme to fall back on.
  • Using a child theme can speed up development time.
  • Using a child theme is an easy way to learn about WordPress theme development.

Recommended Preparation Before Creating a Child Theme
Before creating a child theme, or undertaking any modification tasks to your WordPress theme, it is recommended that you ensure you have a current backup of your WordPress site (files and database).

If you haven’t done this, or are unsure how to do this, please visit the links below:
WordPress.Org Codex—Backing Up Your WordPress Files
WordPress.Org Codex—WordPress Backups

How to Create a Child Theme
There are two methods to creating a child theme: 1) downloading and using a plugin and 2) manual creation.

*Note* If you have already modified your parent theme, there will be some additional steps. All php files and css files that you have modified will need to be copied over to the child theme directory. With functions.php, you may receive errors if you copy the parent theme’s functions.php file in its entirety to the child theme. If this occurs, you’ll need to compare an original, unmodified version of your parent theme’s functions.php file to your modified functions.php file and include only the modifications/additions to your child theme’s functions.php file.

METHOD ONE: Download and Use a Plugin
You can use one of the recommended plugins listed below, or you can search the WordPress.Org Plugin Directory to find a plugin that you like and meets your needs.

If you choose to search the directory, research any potential plugins thoroughly. Check the ratings, reviews, FAQs, screenshots, and support. Take note of the date the plugin was last updated, the compatible WordPress versions, and if the developer has a website or other means of contacting them with questions besides the support link on the WordPress Plugin directory page.

You can also search for, download, and install plugins through the Plugin > Add New menu option in your WordPress Admin Dashboard.

Recommended Plugins

Child Theme Configurator
Child Theme Configurator is a fast and easy to use CSS editor that allows you to create a child theme and customize it beyond the options of the Customizer. Designed for WordPress users who want to be able to customize stylesheets directly, the Child Theme Configurator lets you easily identify and override the exact CSS attributes you want to customize. It properly enqueues theme and font stylesheets for optimum performance and handles vendor-specific syntax, giving you unlimited control over your WordPress look and feel while leaving your Parent Theme untouched.

Download Child Theme Configurator.

Childify Me
Childify Me allows you to create child themes from any non-child theme directly from the Theme Customizer panel. It also works when previewing a theme before activation and is multi-site compatible.

Download Childify Me.

One-Click Child Theme
One-Click Child Theme adds a Theme option to any active theme allowing you to make a child theme. This plugin is useful for shared hosting, especially one-click WordPress installs, which usually involve learning how to use FTP and shell accounts, as it allows you to easily create child themes from any theme just by clicking.

Download One-Click Child Theme.

METHOD TWO: Manual Creation
A child theme consists of at least one directory, the child theme directory, and two files, style.css and functions.php, which you will need to create

Step One: Create the Child Theme Directory
The child theme directory will be placed in wp-content/themes. It is recommended, but not required, that you append “-child” to the name of your child theme directory (Example: mytheme-child). Ensure there are no spaces in your child theme directory name and capitalization of the parent theme is consistent , which might result in errors.

Step Two: Create the Child Theme’s Stylesheet
Your child theme’s stylesheet, style.css, must begin with the stylesheet header below. Please update appropriately to reflect the names of your theme and ensure the Template line corresponds to the directory name of the parent theme.

/*
Theme Name: My Theme Child
Theme URI: http://example.com/my-theme-child/
Description: My Theme Child Theme
Author: Jane Doe
Author URI: http://example.com
Template: mytheme
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: my-theme-child
*/

Step Three: Enqueue the Parent and Child Theme Stylesheets
Please note that the previous method was to import the parent theme stylesheet using @import. This is no longer best practice, and the correct method is to enqueue the parent theme stylesheet by adding a wp_enqueue_scripts action and using wp_enqueue_style() in your child theme’s functions.php.

You will need to create a functions.php file in your child theme’s directory The first line of your child theme’s functions.php will be an opening PHP tag (<?php), after which you will enqueue your parent and child theme stylesheets. The example function below will only work if your parent theme uses only one main style.css to hold all of the CSS. If your theme has more than one CSS file (eg. ie.css, style.css, main.css), you will have to make sure to maintain all parent theme dependencies.

<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
?>

Your child theme’s stylesheet is usually loaded automatically. If it is not, you will need to enqueue it also. Setting ‘parent-style’ as a dependency will ensure the child theme stylesheet loads after it. See example below:

<?php
function theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
?>

Step Four: Activating Your Child Theme
Your child theme is now ready to be activated. Log in to your site’s administration panel, and go to Administration Panels > Appearance > Themes. Your child theme should be listed and ready for activation. If your WordPress installation is multi-site enabled, you may need to switch to your network administration panel to enable the theme from the Network Admin Themes Screen tab. You can then switch back to your site-specific WordPress administration panel to activate your child theme.

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.

Additional Step: Changing Template Files
Your child theme can override any file in the parent theme. If you include a file of the same name in the child theme directory, it will override the equivalent file in the parent theme directory when your site loads. For instance, if you want to change the PHP code for the site header, you can include a header.php in your child theme’s directory, and that file will be used instead of the parent theme’s header.php.

You can also include files in the child theme that are not included in the parent theme.

Additional Step: Using functions.php
Unlike style.css, the functions.php of a child theme does not override its counterpart from the parent. It is loaded in addition to the parent’s functions.php file, right before the parent file loads.

The functions.php of a child theme provides a smart, trouble-free method of modifying the functionality of a parent theme. If you modify the parent theme’s functions.php file, your function will disappear the next time you update your theme.

If you add a functions.php file to your child theme and add your function to that file, the function will do the exact same job from there, with the advantage that future updates of the parent theme will not affect it. Do not copy the full content of functions.php of the parent theme into functions.php in the child theme.

The structure of functions.php is simple: An opening PHP tag at the top and your bits of PHP below. You can put as many or as few functions as you wish. The example below shows an elementary functions.php file that does one simple thing: adds a favicon link to the head element of HTML pages.

' . "\n";
}
add_action( 'wp_head', 'favicon_link' );

15 Comments

  1. Melanie
    April 6, 2016

    Leave a Reply

    This is great information for anyone who has a WordPress site. I have found that many people who design their own websites, myself included, fail to create a child theme when they initially build their site.

    We all learn our lesson the first time we hit that update button and loose hours of hard work and special coding. Thank you XterraWeb for taking the time to research this issue and provide us with so many different choices. I’m definitely going to take advantage of your insight.

    • Amor Libris (Kelly Hartigan)
      April 8, 2016

      Leave a Reply

      Thank you, Melanie. I learned that lesson too. I was new to WordPress and didn’t learn about child themes until after I had made multiple changes. I wish I had known about this before. Unfortunately, once you have made multiple modifications to your WordPress parent theme, things become a bit more challenging. I was about to give up until I conducted some research and discovered I could make the process a bit easier with the exception of dealing with the functions.php file. I hope the information in this article helps make the process less challenging for you.

  2. Tom
    April 7, 2016

    Leave a Reply

    A wonderful insight into the possibilities but I dont’ think I’ll be going there anytime soon.
    Simply using my WordPress site as it comes is enough for me. I find it time-consuming to get posts, menus and sidebars as I want them without digging into the minefield you’ve explored in depth.
    Kudos to you guys who are capable of such technical wizardry. 🙂

    • Amor Libris (Kelly Hartigan)
      April 8, 2016

      Leave a Reply

      Thank you, Tom. Yes, this is a bit more advanced. However, if someone just created a self-hosted WordPress site, the plugins to create the child theme would be helpful, easy to use, and save them from encountering problems in the future.

  3. Chloe
    January 23, 2017

    Leave a Reply

    This is SO helpful! Most people have WordPress sites and would have no idea about these tips that could save them heartache in the future.

  4. Joely Smith
    January 23, 2017

    Leave a Reply

    Well this blog article was not what I was expecting but everything I needed to read about! I may switch to WordPress one day and will try this.

  5. emmaeatsandexplores
    January 24, 2017

    Leave a Reply

    Thanks for all the info – at the moment I’m just using a free WordPress theme for my blog, but I know at some point I’ll want to upgrade to something I have more control over. You’ve explained all the options in a really easy way – pinned for when I take the next step in blogging!

  6. Angela Milnes
    January 28, 2017

    Leave a Reply

    This is really useful thanks for sharing. I sometimes struggle to figure out child seems so I will be bookmarking is page.

  7. Jodie Whitham
    February 26, 2017

    Leave a Reply

    A helpful post – not come across child theme before.I don’t have a wordpress blog anymore though! Look forward to more helpful reads 🙂

  8. The Mad Mommy
    February 26, 2017

    Leave a Reply

    This is great information for someone starting their own blog! I wish I had a post like this to read when I switched over!

  9. Sauumye Chauhan
    February 26, 2017

    Leave a Reply

    Child Themes are great. I’m currently working on mine so this was a great help.

  10. natalielovesbeauty
    February 26, 2017

    Leave a Reply

    Very informative! I am not on wordpress and have not made the switch but will be bookmarking this if ever I do.

  11. OUR FAMILY WORLD
    February 27, 2017

    Leave a Reply

    been looking for a friendly guide for wordpress users lately! this will be a big help for me! thanks for posting it!

  12. emmaeatsandexplores
    February 27, 2017

    Leave a Reply

    At the moment I’m using a free WordPress theme but I hope to switch this up soon. Your explanation is one of the clearest I’ve seen – child themes have had me confused for a long time. Thanks for explaining it in such an easy way to understand.

  13. kemomilo
    February 28, 2017

    Leave a Reply

    Very good information. When I was looking for a new theme, I saw child themes and didn’t understand what it was.

Leave a Reply