How to create a child theme for the Base theme for WordPress

In this tutorial, I’ll show you how to customize our Base theme framework for WordPress so you can protect your code changes from any future theme upgrades that we release.  Before we started, please download this Base Custom Child Theme (a starter child theme for Base, used in the examples below).  Lets review some basic concepts regarding WordPress theming:

What is a child theme?

From the WordPress Codex:

A WordPress child theme is a theme that inherits the functionality of another theme, called the parent theme, and allows you to modify, or add to, the functionality of that parent theme.

A basic child theme consists of only a style.css file.  If you plan on using the available Action Hooks and Filters in Base (more on this later), you will also need to create a functions.php file.  I always add a screenshot.png file, too, which shows up on the Appearance -> Themes page.  Instead of making changes directly to your Base theme, we recommend creating a child theme, so your code modifications are protected from theme updates.

BEGINNER: Creating a style.css stylesheet for a child theme

Every child theme needs a style.css file.  It tells WordPress specific required information about the child and parent theme.  Here is an example:

/*
Theme Name: Base Custom
Theme URI: http://graphpaperpress.com
Description: A child theme for Base Theme Framework.
Author: Graph Paper Press
Author URI: http://graphpaperpress.com
Template: base
Version: 1.0.0
License:  GPL
*/

@import url("../base/style.css");

/* ADD YOUR CUSTOM CSS BELOW THIS LINE */
body { background-color: #000; color: #fff }

Everything located between the starting /* and ending */ comments tell WordPress important information about the child theme.  These are mandatory:

  • Theme Name: Base Custom – the name of our child theme
  • Template: base – the folder name of our patent theme (in this case, base).  Case matters!

This line:

@import url("../base/style.css");

Imports the style.css file of our parent theme (Base) into our child theme stylesheet. The ../ tells WordPress to “move up one directory out of the base-custom folder and then move down into the base folder. It’s important to include this @import rule before your custom css. All css rules that show up after this rule will override the parent theme styles.  Now, you can override any CSS class in the parent theme.  Using the Custom CSS panel in Base also overrides default Base CSS styles.  To find and located the specific CSS class you want to override, use Firebug.

BEGINNER: Creating a functions.php file for your Base Child Theme

The functions.php file is where you can define your own PHP functions for your child theme.  To start, we will use this file to  declare the name of the child theme (populates the Theme Options page with your Child Theme name).  A basic functions.php file looks like this:


<?php
// Lets declare the name of our child theme
$themename = "Base Custom";

Comments in PHP code start with this // or this: /*.  They are used to make code easier to understand.  Now that we have a functions.php file and we’ve declared the name of our child theme, lets write a basic PHP function in our functions.php file that creates a simple message:


function gpp_base_custom_message() {

    echo '<h2>This is a short message that will appear below our header</h2>';

}

Now that we’ve created our function, we need to “hook” it into one of the available Base Action Hooks.

INTERMEDIATE: Using Action Hooks to Extend Base Functions

Action Hooks are essentially empty placeholders that can be injected with stuff.  “Stuff” is added using a PHP function.  Once you understand how to write a simple PHP function and you know the exact Base Action Hook location that you want to hook into, you can literally override anything you want in Base.  Here is the Base Theme Documentation that lists all Action Hooks.

Lets add our welcome message to the gpp_base_below_header() Action Hook.  In the functions.php, add this:


add_action('gpp_base_below_header', 'gpp_base_custom_message');

Above, we are adding the function we wrote above gpp_base_custom_message to the gpp_base_below_header action hook.  Important Note: Some Base action hooks are already defined in Base, so it’s important to use the remove_action function if you want to, say, change the main index loop in Base:


add_action('wp_head','remove_gpp_base_actions');

function remove_gpp_base_actions() {

    remove_action('gpp_base_index_loop', 'gpp_base_index_loop_hook');

}

You can override as many functions in Base as you want, as long as those functions are listed on the Base Action Hooks Documentation.  To see where these Action Hooks are called in Base, view the Base Structure Guide.

INTERMEDIATE: Overriding Parent Template Files

If using Action Hooks is confusing, simply rely on the WordPress template hierarchy and template inheritance to override specific template files.  From the WordPress Codex:

Templates in a child theme behave just like style.css, in that they override their namesakes from the parent. A child theme can override any parental template by simply using a file with the same name. (NOTE. index.php can be overriden only in WordPress 3.0 and newer.)  Again, this WordPress feature lets you modify the templates of a parent theme without actually editing them, so that your modifications are preserved when the parent theme is updated.

If a child theme contains, for example, an index.php file, it will take precedence over the parent theme’s index.php template file.  This only pertains to files that fall within the WordPress template hierarchy.  You can’t override all parent theme files simply by recreating them in a child theme.

And that’s all folks

Well, actually that’s just a jumping off point.  Feel free to use the example Base Custom Child Theme to create you own child theme for our Base Theme Framework for WordPress.  In the next tutorial, we’ll show you how to essentially build child themes of child themes, so your modifications to child themes are never overwritten.

15 responses to “How to create a child theme for the Base theme for WordPress”

  1. Sophia Avatar
    Sophia

    I’m getting the following error notice when I try to install my child theme:
    Incompatible archive PCLZIP_ERR_BAD_FORMAT (-10)

    I have the latest version of WordPress and there is plenty of space on my hosting. My child theme has 1 file.. style.css and calls my current theme as in the instructions above.

    What am I doing wrong?

    Thanks

  2. Lindy Avatar
    Lindy

    Could you give a quick hint on how to create child themes of child themes? I’m trying to do exactly that now with the Workspace theme and all it tells me “The parent theme is missing” when it is perfectly installed.

    1. Graph Paper Press Avatar

      You can’t create “Grand Child” themes, unfortunately. Just make your modifications to the child theme.

      1. Lindy Avatar
        Lindy

        Oh, ok. Thanks. I just read the following above and thought that’s what it meant.

        “In the next tutorial, we’ll show you how to essentially build child themes of child themes, so your modifications to child themes are never overwritten.”

        1. Graph Paper Press Avatar

          You can modify Base child themes and via plugins (which is what I plan on showing) but it isn’t an approach you can apply across the board for modifying child themes.

  3.  Avatar
    Anonymous

    This is useful but it should have been the full article like a sample website or blog so we can have better idea, This is beginning and I hope you would try to post whole article with sample site which would really fulfill the idea of tutorial or article…

  4. go prodigy go Avatar
    go prodigy go

    pretty cool huh came in handy

  5. whatsthebigidea.com Avatar

    Thad, have you wrote the ”
    build child themes of child themes” yet? Thanks.

  6. Zed Avatar
    Zed

    Hi thad,

    Great tutorial, i love how the details are explained here. just want to share to other viewers here, I came from here http://www.streamtemplates.com/3-simple-steps-in-creating-a-wordpress-child-theme-and-its-basics/

    it shows short and really simple steps on creating child themes. hope that helps somehow.

    Cheers

  7. andre Avatar
    andre

    Hey Thad, I’m using Fullscreen and would like post tile to show its title and body when highlighted by flyover; is that possible? Is that done via the custom css in the theme options? If so, how?

    Cheers

  8. Mithun Avatar
    Mithun

    For making unlimited color version for wp theme, where to do the primary work? should i do this from html? or need to code for wp only?

    1. whatsthebigidea.com Avatar

      from child theme’s style.css

  9. Fahad M Rafiq Avatar

    There are many businesses still who have static HTML websites that have a good template. But these HTML websites are not dynamic and to change minor detail requires going into the code.

    In this tutorial learn how to convert your HTML busienss theme to WordPress with all the features of WP. http://www.cloudways.com/blog/convert-html-to-wordpress-business-theme

Leave a Reply

Your email address will not be published. Required fields are marked *