Creating Your Own Genesis Child Themes

There are so many WordPress theme frameworks out there, that it can be tough to choose which one is right for you. How do you know which one is a quality theme that will help promote your content, and which ones will hold it back? One of the most popular frameworks is the Genesis Theme framework. Let’s take a look at the Genesis Framework, and what you might expect when creating a Genesis child theme.

The Genesis Framework by StudioPress is designed to be used with child themes. Most WordPress themes are, but Genesis doesn’t add or require anything special that you need to import or bring into your child theme.

File Structure

The Child theme development process begins with a new directory. Go to the themes section of your development area and create a new folder under themes. If you’re using the default Genesis theme, or you’re using a specific theme, you’ll want to choose the name of the theme and add “-child” to the folder name. You can name it whatever you’d like, but if you’re working with a specific theme, I always recommend naming it the child of the theme you’re working on, to cut down on confusion. You’ll want to copy the style.css and the functions.php file into the empty child folder.

Stylesheet

You can leave all of the CSS in the stylesheet, or you can choose to remove it. Since the child theme overrides, or adds to the parent theme, you don’t really need it twice. In the CSS file, you’ll want to add a few lines of text to provide information about your theme. You’ll want to include:

• Theme name: The name of the child theme goes here.
• Theme URI: This is a site where they can view a demo or find more information about the child theme.
• Description: Describe your child theme and it’s qualities.
• Author: Your name to give yourself credit.
• Author URI: Your personal website address goes here.
• Version: If you plan on refining and creating future versions. Start with 1.0.
• Tags: These tags are keywords that will help people find your theme. This could be colors, features, etc.
• Template: The name matching the parent Genesis theme (case sensitive).

Importing CSS

You can import the CSS styles from the parent Genesis theme, but you should only do this if you want all of the CSS from the Parent theme. If you’re looking at just the Default Genesis theme structure without any styles, you may not want to import anything at all, which is fine. You may want to start from scratch and build your own distinct look. Importing all of the existing styles and having to sift through them and modify them may only complicate things.

If you want to bring in the parent theme style, a good way of doing so is to enqueue in your functions.php file using the following script:

add_action( 'wp_enqueue_scripts', 'my_child_theme_scripts' );
function my_child_theme_scripts() {
    wp_enqueue_style( 'parent-theme-css', get_template_directory_uri() . '/style.css' );
}

functions.php

This file is essential to your child theme for adding features and functionality. This is where you’ll add all of your hooks and filters, which Genesis makes use of extensively. First, we need to activate the core Genesis functions in our child theme.

<?php
//* this will bring in the Genesis Parent files needed:
include_once( get_template_directory() . '/lib/init.php' );

//* We tell the name of our child theme
define( 'Child_Theme_Name', __( 'Genesis Child', 'genesischild' ) );
//* We tell the web address of our child theme (More info & demo)
define( 'Child_Theme_Url', 'http://gsquaredstudios.com' );
//* We tell the version of our child theme
define( 'Child_Theme_Version', '1.0' );

//* Add HTML5 markup structure from Genesis
add_theme_support( 'html5' );

//* Add HTML5 responsive recognition
add_theme_support( 'genesis-responsive-viewport' );

How the Child Theme Works

If you try to activate the child theme, you’ll notice that, unlike the other themes, your child theme’s image is blank. This may scare you a bit, but it’s an easy fix. Open up your graphics program. It could be Illustrator, Fireworks, Photoshop, or even free image editing software, just as long as it can produce a PNG file. Create a document that is 300px x 225px and drop in an image or a graphic that tells the user what child theme it is. Save it to your child theme folder as screenshot.png, and now it will show up.

To enable a child theme, you should install/activate the parent theme first. This is an essential step. Once you’ve done this, you can select your child theme and activate it. Now you’re all set, with your custom look and custom functionality.

Adding to Genesis

To add functionality, we’ll be adding to the functions.php file we created in our child theme folder. There are two important parts of a function in WordPress, which are the hook and the filter.

Hooks & Filters

The hook is chunk of code that we call to in our functions. It’s a piece of code built into Genesis that we ‘hook’ into, which is where the name comes from.

Lets take a common example, which is the excerpt length of your blog page. I can’t stand the default number of words, which is 55. I think it’s too long. You’ll need to hook into the excerpt length and change it, and add it as a filter in your child theme. The code should look something like this.

function the_excerpt_length( $length ) {
$length = '25'; 
return $length; 
} 

add_filter( 'excerpt_length', 'the_excerpt_length' );

The code above creates a function called “the_excerpt_length” and the value in the parenthesis is set to an amount that you specify. The code is told to return that as the word length of your excerpt. Now, when you’re working on a page, such as the index.php or the archive.php, instead of the_content, you can substitute it for the_excerpt, cutting the words down to 25 at most. This is a useful example, but there’s much more that we can do – as we’ll see in future articles.

Conclusion

Setting up your own Genesis child theme sounds intimidating, but it’s easier than it looks. You can create your own custom child theme quickly with just two necessary files. With hooks and filters, you can customize the functionality of your theme, without the worry of losing your changes when you update the parent theme.

Frequently Asked Questions (FAQs) about Creating Genesis Child Themes