premium WordPress photography themes

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?

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:

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:

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.

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:

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.

Thad is the founder of Theme.Works and Graph Paper Press. Previously, he produced online multimedia and documentary projects for USA Today including the inauguration of President Barack Obama and many others. He lives in Brooklyn, NY with his wife Abby.

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.

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…