How to Create a Genesis Child Theme

A child theme is basically the extension or customization of an existing theme. When you just begin theme development, the easiest theme you can create is a child theme. The child themes resides in a separate folder, and has it’s own files, to change the behaviour of the parent theme, but it cannot exist without the parent theme. A child theme is the specified way to modify an existing theme, in WordPress.

 

Creating a Child Theme for Genesis

To create your own child theme for Genesis, start by creating a folder under wp-content/themes/ for your child theme. As an example, we will name the folder “GCTExample”. Inside this folder, create two files, style.css and functions.php. These are the minimum two files you would need for your Genesis child theme.

Note: The style.css is actually the only file you need to create a child theme in WordPress. But in Genesis, we need to add a few support functions in functions.php, to structure the layout.

[space]

Create Genesis Child Theme Stylesheet

The style.css is your Child Theme’s stylesheet. Here, you can specify your custom style classes, or override the default style classes by Genesis. Add the following lines in the beginning of the stylesheet.

/* Theme Name: GCTExample

Description: Genesis Child Theme Example

Template: genesis

*/

It is important to set the Template and Theme Name. The template is the directory of the parent theme. Hence for our child theme, we MUST SET the Template as genesis.

It is recommended that instead of using @import to include the parent theme’s stylesheet, we should copy the entire stylesheet, and make changes as needed.

You should be able to see the new theme, that you have just created, available in your WordPress dashboard, under Appearance-> Themes list. But if you were to activate it, you will notice the layout is not well structured. The reason for this is that the layout is rendered using XHTML by default. Thus, some structures are not created and displayed as desired. Hence, for the layout to be displayed properly, we need to tell Genesis framework to use HTML5 instead of XHTML, by adding HTML5 support in our child theme.

[space]

Add HTML5 Support

For these changes, we need to move on to functions.php. In Genesis, the parent theme functions should be loaded before the child theme functions. Hence, we either explicitly load the parent theme functions:

/** Start the engine */
require_once( TEMPLATEPATH . '/lib/init.php' );

OR, we wait till the parent theme functions are loaded, on the hook genesis_setup.

add_action('genesis_setup', 'setup_child_theme', 10);
function setup_child_theme()
{
   // add your code here
}

To fix the layout and to make it responsive, we need to add HTML5 and viewport information support.

<?php
add_theme_support( 'html5' );
add_theme_support( 'genesis-responsive-viewport' );

Hence, your functions.php would be:

<?php
add_action('genesis_setup', 'setup_child_theme', 10);

function setup_child_theme()
{
    add_theme_support( 'html5' );
    add_theme_support( 'genesis-responsive-viewport' );
}
?>

[space]

Additional changes you could make are

• Create a screenshot for your theme. This image will be shown for your child theme, in Appearance->Themes. Save the image in your child theme folder and name it, ‘screenshot.png’. The dimensions for this image should be 600×450.

• Create an Images folder: Images used by your theme, like the site logo, background image, icons, should not be added to the media library. Instead they should be placed in a folder named ‘images’, created inside your child theme folder.

[space]
After making these changes, you will have your basic Genesis child theme ready, to be modified further according to your requirements.