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: https://graphpaperpress.com
Description: A child theme for Base Theme Framework.
Author: Graph Paper Press
Author URI: https://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.