askdesign
7/6/2017 - 11:49 PM

Genesis Child Theme Development: How to Make it Yours

https://carriedils.com/genesis-child-theme-development/

October 4, 2016 by Carrie Dils Last updated on May 10, 2017

/* 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.

Updated theme name now viewable in WordPress admin under Appearance > Themes
You can see the theme name change from style.css appearing in the WordPress admin under the Appearances > Themes menu.
*/

/* 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:

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.
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: https://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.
*/
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:

A “drop-in” code library used to facilitate development of a theme
A stand-alone base/starter theme that is intended either to be forked into another theme
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.

https://carriedils.com/genesis-child-theme-development/

Great read. Genesis Child Theme Development: How to Make it Yours via @cdils  http://ow.ly/N0N6304Rwg5
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.

Theme screenshots in WP admin
Theme screenshots in WP admin If I had both the Smart Passive Income Pro theme and Smart Passive-Aggressive theme installed, I could easily tell them apart.
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