Genesis Child Theme Development: How to Make it Yours

Interested in Genesis child theme development – either creating a theme from scratch or modifying an existing Genesis theme? This post is for you.

Note there are affiliate links in this post. Here’s my full disclosure.

An Overview of Frameworks, Parent Themes, and Child Themes

Let’s start by taking a moment to get on the same page about what a WordPress theme framework is and where the Genesis Framework falls into that definition.

The WordPress Codex (basically the bible of WordPress), defines theme frameworks in one of three ways:

1. A “drop-in” code library used to facilitate development of a theme
2. A stand-alone base/starter theme that is intended either to be forked into another theme
3. A parent theme template

The Genesis Framework falls into the third category and is meant to serve as a parent theme.

In practical terms, this means that if you have a WordPress site with the Genesis Framework installed, then any Genesis child theme you activate will inherit all the functionality of the Framework (a.k.a, the parent theme).

The benefit of this structure is that you never need to directly edit files in the Genesis Framework, which leaves it safe to update.

Instead, you make customizations via a child theme, which you should never update.

To summarize, in the WordPress world, if you want to change the parent theme, edit the child.

What About a Grandchild Theme?

So, how does this structure translate to the Genesis Framework where, by default, you’re already working with a child theme? Do you then change the child theme by creating and editing a grandchild?

No. While technically possible, you’ll be hard-pressed to find support for a grandchild theme. As an alternative solution, I recommend treating the child theme as unique and making your customizations directly.

Take an existing child theme for Genesis and make it your own

Now with that bit of preamble, here’s the question that originally inspired this post:

I use Genesis as a framework, and I typically modify a child theme quite heavily. At what point can I call it my own? Do I have to create my own child theme completely from scratch to call it my own and list myself as an author on the stylesheet and reference it as custom in my contract? 

If you’re new to child theming, I recommend starting with an existing Genesis child theme and editing it to make it your own. What does it mean to make a theme your own? Let’s take a look at an example.

Let’s say I’m starting a new web project for a counseling group called Smart Passive-Aggressive.

There are some great mobile-friendly Genesis child themes, but I’m drawn to the Smart Passive Income Pro theme. I’ll use that as my starting point. I swear this has nothing to do with the amazing name similarity. Rather, the design of the theme is similar to what I want my finished theme to look like, so it makes sense to start with the SPI Pro theme as a base.

Before I make any customizations to the theme, there’re four things I need to do to make this theme unique.

1. Rename the child theme and move the theme folder

When you buy a theme, it’s typically available for download as a zip file from StudioPress or whatever third-party vendor you purchased from. I like to store this zip in an “original copies” folder on my machine along with other fresh downloads.

From there, I’ll unzip the theme (leaving the original zip as is) and rename the unzipped folder to match my new theme name.

In this example, I’ll rename the smart-passive-income-pro folder to smart-passive-aggressive.

Then, I’ll move the theme folder over to my local WordPress install theme folder (wp-content/themes/) and place the smart-passive-aggressive folder under version control.

2. Change the theme name in style.css

If I open up the style.css file in the smart-passive-aggressive theme folder, there’s a documentation block (a.k.a. “doc block”) at the top of the file that shows the theme name along with some other details.

/*
	Theme Name: Smart Passive Income Pro
	Theme URI: http://my.studiopress.com/themes/smart-passive-income/
	Description: With its friendly typography and bold design, Smart Passive Income Pro gives a welcoming and familiar face to your online platform.
	Author: StudioPress
	Author URI: http://www.studiopress.com/

	Version: 1.0.1

	Tags: one-column, two-columns, left-sidebar, right-sidebar, accessibility-ready, custom-colors, custom-header, custom-menu, featured-images, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, flexible-header, footer-widgets

	Template: genesis
	Template Version: 2.2.3

	License: GPL-2.0+
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

I want to change the Theme Name on line 2 from Smart Passive Income Pro to Smart Passive-Aggressive.

/*
        Theme Name: Smart Passive-Aggressive

By doing this, I’ve indicated in the documentation that this is no longer the Smart Passive Income Pro theme. I’ve also made it easier to identify the Smart Passive Aggressive theme from my WordPress admin.

3. Update the rest of the doc block in style.css

While I’m in style.css, I’ll update some other items in the doc block for a couple of reasons:

1. A year from now if I go back to make a change to the Smart Passive Aggressive theme, this documentation will help me remember details, like which theme I used as a base.
2. Should another developer eventually work on this theme, they’ll appreciate knowing these details, especially when a theme is based on another.

/*
	Theme Name: Smart Passive-Aggressive
	Theme URI: http://my.studiopress.com/themes/smart-passive-income/
	Description: Customized theme based on the Smart Passive Income Pro theme from StudioPress
	Author: Carrie Dils
	Author URI: http://carriedils.com/

	Version: 1.0.1

	Tags: one-column, two-columns, left-sidebar, right-sidebar, accessibility-ready, custom-colors, custom-header, custom-menu, featured-images, full-width-template, sticky-post, theme-options, threaded-comments, translation-ready, flexible-header, footer-widgets

	Template: genesis
	Template Version: 2.2.3

	License: GPL-2.0+
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/

I’ve changed the Theme Name, but left the Theme URI as is, pointing to the original Smart Passive Income Pro documentation. That documentation might come in handy at some point, so it’s good to leave that Theme URI reference intact.

I’ve updated the Description to show that Smart Passive-Aggressive is based on the Smart Passive Income Pro theme. Again, potentially helpful information to know if I (or another developer) come back to this file later.

For the Author, go ahead and put in your name. Also update the Author URI to show your domain (again, very helpful to know where to find you if another developer ends up working on the theme).

The rest I’ll leave as is.

One important thing to note before we move on: Because this theme is originally licensed under GPL, anything I make based on it (i.e. my own child theme) must keep the same licensing.

4. Change the screenshot

While not technically necessary, updating the theme’s screenshot makes it easier to visually identify (and differentiate) in the WordPress admin.

The screenshot doesn’t need to be fancy.

The easiest method I’ve found is to open up the theme folder, find screenshot.png and then open it in an image editor. This ensures that I’m starting with the right image dimensions. For simplicity, I’ve given it a solid background color, overlaid text with the theme name, and saved it back to its original place in the root theme folder.

Once I’ve taken these four steps, even without changing a single thing about the appearance of the theme, I’ve made it a unique child theme and am ready to begin customizations.

5. But Carrie, I feel weird about this

Maybe you’re thinking that someone else went to all the hard work to create this theme and is it right that you’re trying to pass it off as your own?

No. And I’ll tell you why.

First, as you can see from the previous steps, the intent here is not to deceive anyone, but to help clarify that a child theme is unique and should not be mistaken for its “inspiration theme.” That is the right thing to do as it helps avoid any confusion or mistakes in the future when modifying the new theme.

Second, the beauty of WordPress is that its open-source software. The entire point is to use the code base that other people have made and make changes through themes and plugins to meet the specific needs of your project.

Note though that you do need to leave any existing copyrights in place (thanks Gary Jones for clarifying that).

I don’t want to get too philosophical here or start a GPL debate (much smarter people than me can break this down), but if you felt weird about taking the steps I recommend, just know you shouldn’t. It’s legit.

6. But Carrie, what about contracts?

I’m not going to talk in depth about contracts here, but I do want to try and answer the original question:

Do I… call the theme my own and…reference it as custom in my contract? 

For starters, I recommend being upfront with clients about whether you’re creating a complete custom design and theme for them versus taking a stock theme and modifying it to suit their needs. After all, the cost is quite different (think tract homes versus custom home builds). Modifying existing themes is a cost-saving measure for clients who don’t need a fully custom solution – sell that as a benefit.

Second, as I already mentioned, the theme must keep the GPL license. That doesn’t mean that your client is under any obligation to distribute or give away that code, but you cannot change the license. That’s true whether you modify an existing theme or create one from scratch. This is a nuance that most clients probably will not care about, but if they want to use WordPress, that’s how the licensing works. You can “hand over” ownership of graphic elements, photography, designs, whatever you custom create… just not the code.

Keeping these things in mind, write the language of your contract however you’re comfortable.

A note on working with Genesis child theme development (hooks and filters galore!)

The Genesis Framework includes a ton of action hooks and filters you can use to either change default behaviors or add new functionality.

This means that child theming with Genesis is more about utilizing hooks and filters than it is about creating templates, as you would with a more traditional WordPress theme.

For example, let’s say you’re creating a child theme based off a theme downloaded from wordpress.org. If you wanted to change the footer, you’d create a new template file for your child theme named footer.php that would override the footer.php file from the parent theme.

Conversely, with Genesis you’d use one of the many available hooks and filters to change the footer – no new template needed.

If you’ve done a lot of child theming before, doing things the “Genesis way”, is a significant mental shift. Once you get used to it, though, you’ll love how easily you can make changes.

If this is something you’d like to dig deeper into, I have two courses at Lynda.com that can help:

• Customizing Themes with Genesis for WordPress (take this course first)
• WordPress and Genesis: Building Child Themes from Scratch

Developer pro tips

Here are some lessons on Genesis child theme development I’ve learned along the way. These tips will save you time and leave you with cleaner, leaner code.

Develop locally

If you’re developing on a live site, you’re wasting time. Skip the constant FTPing files and waiting on browser reloads by running WordPress locally.

There are a few requirements to run a WordPress site locally: an Apache server running PHP and a MySQL database. You can set up those components yourself or use a tool like DesktopServer, Local, or DevKit to do it for you.

Ditch the extra CSS

Unless you’re starting with a blank style.css file, your stylesheet will include things you don’t need.

For instance, you can get rid of theme color options since you don’t need them for a custom build. Other things you might remove are elements you know you won’t use, like certain layouts or widget areas.

Keep your stylesheet tidy

Make sure the Table of Contents in your style.css file stays up to date with the items you’ve added or removed. Staying organized makes your life (at least the coding part of it) easier.

When you add new styles, don’t stick them all at the bottom of the stylesheet – add them in context. For example, if you’re adding styles for a plugin, group it with the other plugin styles.

Document your code

Document every bit of code you write. If you copy and paste code from a tutorial or another site, document that too.

When you’re in the build process, all of your code is familiar and it’s tempting to skip the documentation, but when you step away – even for a few days – you’ll forget what a bit of code was for and waste your time re-orienting yourself.

Give your future self the gift of documented code!

Some final thoughts: Blank Slate vs a Starter Theme

Ask 100 developers how they prefer to create a theme and you’ll get 100 different answers.

The benefits of starting with a blank file in a code editor are that you don’t carry over unnecessary code.  You only create the code you need.

The benefits of starting with a starter child theme are that you can re-use code you’ve already written, speeding up your development cycle.

So, which is better? Well, there’s 100 different answers to that, but here’s the general guideline I recommend:

If you’re new to child theming:

Don’t start from scratch. Find a Genesis child theme that most closely resembles the result you want and then customize it to match exactly what you need. Over time you’ll develop a level of comfort working with theme files and a basic understanding of working with the unique hooks and filters in Genesis.

If you’re comfortable modifying existing themes:

Start from scratch – at least once. It doesn’t have to be complex or even for a real project, but doing building a theme from the ground up will help cement your knowledge. As you add only the code you need to get the result you want, you’ll gain a far deeper understanding of the Genesis Framework.

If you’re really finding your groove as a developer:

Create your own starter theme. There’s no need to re-invent the wheel every time you build a new theme. As a developer, you’ll have elements you always like to incorporate. By including these in your starter theme, you’ll save yourself time with each new project. Also, use version control as your starter theme will be ever-evolving.

Wrapping it up

Genesis child theme development is an art. While there’s certainly some science, such as correctly written code, the process of building out a child theme is a little different for everyone.

When you’re starting out, it’s helpful to see how other developers structure their workflow and about working with themes, but with each new theme you build, you’ll define your own workflow and find the things that work best for you.

The most important thing to remember? Have fun coding and don’t be afraid to break things! That’s the best way to learn.