Creating Your Own Genesis Child Themes

Share this article

Key Takeaways

  • Creating a Genesis child theme in WordPress involves creating a new directory, copying the style.css and functions.php files into it, and customizing these files to suit your needs. The child theme inherits all functionality from the parent Genesis theme, allowing for modifications without affecting the original code.
  • The functions.php file is crucial for adding features and functionality to your child theme. It is where hooks and filters are added, which Genesis extensively uses. The file activates the core Genesis functions in the child theme, and it’s also where you can add HTML5 markup structure and responsive recognition.
  • To customize a Genesis child theme, you can modify the PHP and CSS code in the child theme’s files. However, it’s important to have a basic understanding of PHP and CSS before attempting to customize your child theme. After customizing, you can update the parent theme without losing your changes.

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.

WordPress and Genesis

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

What is a Genesis Child Theme and why should I use it?

A Genesis Child Theme is a WordPress theme that inherits the functionality and styling of the Genesis Framework. The main advantage of using a Genesis Child Theme is that it allows you to modify your website without touching the original code of the parent theme. This means you can update the parent theme without losing your customizations. Additionally, Genesis Child Themes are known for their speed, security, and SEO-friendly structure, making them a popular choice among WordPress users.

How do I create a Genesis Child Theme?

Creating a Genesis Child Theme involves several steps. First, you need to create a new directory in your themes folder. Then, you need to create a style.css file and a functions.php file in your new directory. These files will contain the necessary code to make your child theme work. You can then customize your child theme by adding or modifying the PHP and CSS code.

Can I use a Genesis Child Theme without the Genesis Framework?

No, you cannot use a Genesis Child Theme without the Genesis Framework. The child theme inherits all its functionality from the parent theme, which in this case is the Genesis Framework. If you try to use a Genesis Child Theme without the Genesis Framework, your website will not function properly.

What are some popular Genesis Child Themes?

There are many popular Genesis Child Themes available, each with its own unique design and features. Some of the most popular ones include Authority Pro, Magazine Pro, and Essence Pro. These themes are known for their professional design, responsive layout, and advanced customization options.

How do I customize my Genesis Child Theme?

You can customize your Genesis Child Theme by modifying the PHP and CSS code in your child theme’s files. This allows you to change the layout, colors, fonts, and other design elements of your website. However, you should have a basic understanding of PHP and CSS before attempting to customize your child theme.

Can I use a Genesis Child Theme on multiple websites?

Yes, you can use a Genesis Child Theme on multiple websites. Once you purchase a Genesis Child Theme, you are free to use it on as many websites as you like. However, you will need to purchase the Genesis Framework separately for each website.

How do I update my Genesis Child Theme?

Updating your Genesis Child Theme is easy. Simply download the latest version of the theme from the official website and upload it to your WordPress dashboard. Your customizations will not be lost, as they are stored in the child theme, not the parent theme.

What is the difference between a Genesis Child Theme and a regular WordPress theme?

The main difference between a Genesis Child Theme and a regular WordPress theme is that a Genesis Child Theme inherits its functionality from the Genesis Framework, while a regular WordPress theme does not. This means that a Genesis Child Theme can take advantage of the powerful features of the Genesis Framework, such as its SEO-friendly structure, speed, and security.

Do I need to know how to code to use a Genesis Child Theme?

While knowing how to code can certainly help you customize your Genesis Child Theme, it is not strictly necessary. Many Genesis Child Themes come with built-in customization options that allow you to change the design of your website without touching the code.

Where can I find support for my Genesis Child Theme?

If you need help with your Genesis Child Theme, you can find support on the official Genesis Framework website. They offer a comprehensive knowledge base, as well as a community forum where you can ask questions and get help from other Genesis users.

James GeorgeJames George
View Author

James George is a professional web developer and graphic designer. James is an expert in design, and a professional web developer, with a special interest in WordPress. Founder of Design Crawl, James has been a professional designer since 2005.

child themesChrisBgenesisgenesis frameworkstudiopresstheme developmenttheme frameworkWordPress
Share this article
Read Next
Get the freshest news and resources for developers, designers and digital creators in your inbox each week