Creating a WordPress Child Theme

CSS, PHP, Wordpress

Overview

WordPress LogoSave yourself some heartburn, do not modify WordPress templates directly … create child templates. Creating a child template will allow you to update a theme without having to re-work it to include your change.

To create a child theme, you need to do the following:

  • Create a child theme directory
  • Place a new style.css file in your child theme directory
  • Add a functions.php file to the child theme directory
  • Add copies of files you plan to modify in the new child theme directory

Create a child theme directory

Go tot he themes diretory (wp-content/themes), create a subdirectory with the name othe original theme, but, append “-child’ to the directory name. Example, if you want a child them for the twentyfifteen theme, create a subdirectory twentyfifteen-child.

In the twentyfifteen-child directory, create a file style.css. In the style.css file, you must have the following minimum header.


/*
 Theme Name:   Western Way Realty
 Theme URI:    http://example.com/western-way-realty/
 Description:  This is a Child Theme of twentyfifteen for the Nomad Realty
 Author:       John Doe
 Author URI:   http://example.com
 Template:     twentyfifteen
 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:  twenty-fifteen-child
*/

 

When creating the header for the style.css file, include the

  • Them Name: followed by the name of your new child theme
  • Theme URI: followed by the location of updates for the theme
  • Description: followed by the description of the template and remember to reference the name of the parent theme to assure user remembers to include the parent theam.
  • Author: followed by your name (or the name of the developer of the new child template)
  • Author URI: followed by the URI of the authors website.
  • Template: followed by the name of the parent template
  • Version: followed by the version number you want for the child template
  • License: followed by the software license that is used to release this template
  • License URI: followed by the address of a copy of the release license.

Following the style.css header, you may now add any new CSS that will be needed in your theme.

Create a function.php file

In the child theme directory, create a file function.php. The original theme function will provide all functions you need, but, this function.php can be used to override the function.php function or to include new function.php content for the child theme.

At minimum, the functions.php file should include the following:


    add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
    function theme_enqueue_styles() {
        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')
    );
}

 

The above code assure that the parent style.css file is loaded, and it assure that the new style.css file is loaded for the new theme.

With the creation of the functions.php file in your child directory, you are ready to go…

Keep Going

Keep going creating your new child theme. Add new child themes functions to the new functions.php. Add the new CSS content to the new style.css file. If you need to modify other files, such as header.php, footer.php, template.php or any other file … copy it to your new child theme directory and make your mods in the new child themes directory.

Leave a Reply