How to Build a Genesis Child Theme

Building a Genesis Child Theme

Building a Genesis Child Theme

If you’d like to customize an existing WordPress theme, especially a theme framework like Genesis, the recommended approach is to use a child theme. A child theme is a separate theme that stores all of your specific customizations. That way if the parent theme is ever updated, you don’t lose all your hard work.

There’s two more benefits to child themes. First, you have a theme that only has your specific customizations in it. It makes it really easy to see what you did on a project, and to figure out what’s going wrong. You don’t have to dig through (and figure out) a ton of code that you didn’t write just to find out what’s going wrong.

Second, if you’re always using the same parent theme like I do, all the code you develop for one project is reusable on all future projects. Of course this depends on you using a parent theme that is designed to be customized through a child theme. This means it makes extensive of actions and filters, which are two types of hooks.

Hooks: What Are They, Why You Need Them

A hook is a tool that allows you to “hook into” the theme at a certain place. An action simply allows you to execute code at a certain place. A filter let’s you modify information that’s being used by the theme. Here’s two examples (these are in WordPress, so they work regardless of the theme you use):

wp_footer is an action that allows you to execute code at the bottom of your page. For example, if you wanted to add Google Analytics code to the bottom of every page, you’d put this in your functions.php file:

function be_google_analytics() {
   google analytics code goes here
}

add_action( 'wp_footer', 'be_google_analytics' );

excerpt_length is a filter that let’s you modify how much text is displayed when you use the_excerpt() in your theme. By default it returns 55 words. If you wanted to change that to 35 words, you would put this in your functions.php file:

function be_excerpt_length( $length ) {
   $length = '35';
   return $length;
}

add_filter( 'excerpt_length', 'be_excerpt_length' );

So as you see, hooks and filters allow you to modify things without editing existing code. You can do it from the safety of your own theme, where you don’t have to worry about your changes being lost on upgrade.

Genesis: The Only WordPress Theme Framework I Need

Here’s a few reasons why I prefer Genesis over all other themes:

  • Hooks for everything. Anything that you’d want to be customized, can be customized. I’ve yet to find something I need to edit that can’t be done easily with an action or filter.
  • Develop with code, not options. While Genesis does have a Theme Settings page, the vast majority of your development will happen with code. This means I don’t have to worry that the client will flip a switch and break the site.
  • Understandable file structure. Want to figure out how to customize something in the header? Hop in genesis/lib/structure/header.php. Customizing the menu class? Look at genesis/lib/classes/menu.php. It’s easy to explore Genesis core to find all the hooks and filters you need.
  • The Community. There’s a ton of other great Genesis developers that are sharing code and expertise. StudioPress listens to their users and adds the features they request. I’ve even submitted a few patches for Genesis which have made it in.
  • Business. By building sites with Genesis, my projects are featured on StudioPress.com, which drives me even more traffic and business. Almost all of my work comes from StudioPress.com leads.

There’s one more thing I want to cover, and that’s where to place your code. Anything that is related to the look and feel of the site belongs in the theme. Anything that is core functionality belongs in a plugin. Here’s a good rule of thumb: if your user decides to change themes, any functionality he expects to bring over to his next theme should be in a plugin.

It’s also a good idea to turn things you use often or that the client might want to selectively turn off into plugins. And if there’s a piece of functionality you don’t want them turning off, you can put it in the mu-plugins directory, which stands for Must Use and are always activated.

Start Building Your First Child Theme

Here’s my typical workflow for building a child theme:

  1. Create a subdirectory on my site for this project
  2. Install WordPress and Genesis
  3. Build all the site’s functionality into a child theme
  4. Use CSS to make the outputted markup match the provided design
  5. Send it to the client for review

This tutorial is going to focus solely on creating the child theme’s functionality. I am going to use a recent project I worked on for Civic Squared, which is a creative web agency that specializes in designing and maintaining municipal websites in Canada. The project was for the Village of Barnwell. Here is what the provided PSD looks like:

And what we’re starting with:

I’m assuming you’re using Genesis. You can build child themes with any theme, but Genesis is what I use and what this tutorial is written for. We’re also starting with a blank child theme. Once you’ve built a few you’ll see there’s code you use all the time and you’ll probably develop a base child theme to build from. Here’s mine.

Create the Child Theme

Go into /wp-content/themes and create a directory. I’m going to call mine “barnwell”. The only two files you need for your child theme are style.css and functions.php. You could write a completely new stylesheet for your site, but I like to modify the default Genesis one so that I don’t forget anything (taxonomy titles, breadcrumbs…).

Go to /wp-content/themes/genesis/style.css and copy it to /wp-content/themes/barnwell/style.css. Do not use @import in your CSS file to pull the parent theme’s, because when the parent theme makes changes to the stylesheet it will adversely affect your layout.

At the top of the stylesheet, change the information to describe your theme. Make sure you include Template: genesis, as that is what makes this a child theme and not a standard theme. Here’s mine

/*
	Theme Name: Barnwell
	Description: Child theme of Genesis, by StudioPress.
	Author: Bill Erickson
	Author URI: http://www.billerickson.net

	Template: genesis
*/

/* Stylesheet from Genesis 1.7.1 */

This is all we’re going to do with the CSS file, so let’s move to functions.php

There’s a few ways you can structure this file. The important thing is to load Genesis core files before your customizations, because you won’t be able to customize Genesis until it has loaded. If you look at the child themes sold by StudioPress, they all do this by adding the following at the top of functions.php:

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

While this works, I prefer to create a child theme setup function into which I attach my functions to the appropriate actions and filters. I then list my functions below this.

Here’s what I place at the top of my functions.php file:

<?php
/**
 * Functions
 *
 * @package      Barnwell
 * @author       Bill Erickson <bill@billerickson.net>
 * @copyright    Copyright (c) 2011, Bill Erickson
 * @license      http://opensource.org/licenses/gpl-2.0.php GNU Public License
 *
 */

/**
 * Theme Setup
 *
 * This setup function attaches all of the site-wide functions 
 * to the correct actions and filters. All the functions themselves
 * are defined below this setup function.
 *
 */

add_action('genesis_setup','child_theme_setup', 15);
function child_theme_setup() {

}

I also like to create a thumbnail for this theme, to make it easy to identify in the theme listing. Simply make an image thats 300×225, name it screenshot.jpg, and upload it into the /themes/barnwell directory.

Now go to Appearance > Themes and activate your child theme. You’ve now created a child theme!

Customizing the Child Theme

You’ve activated your child theme, but nothing has changed. It’s time to add code to it. I’m not going to cover everything I did on this theme, but I will cover most of the changes on the homepage. Here’s what we’ll do:

Some things not included in this tutorial:

Update Theme Settings

Genesis allows you to control many features of the site from the WordPress backend, without touching any code. We’ll need to make all the changes we can in the backend before we start coding. Go to Genesis > Theme Settings.

First go to Header Settings and select “Image Logo”. This adds a body class of header-image, which is used in the CSS to replace the site title and description with an image. Since we haven’t uploaded a logo yet, it will look like the title and description disappeared.

Then go to Navigation Settings and uncheck “Primary Navigation”. We’ll be building our own special navigation in the next section.

Here’s how the site should look now:

Build the menu

If you look closely at the screenshot on the first page, you’ll notice the header has the logo on the left, then the primary menu, then a secondary menu on the right. I went to Appearance > Menus and created two menus (Primary and Secondary), then populated them with the correct links. I will now create a function that sticks these menus inside the header.

This is functions.php (without all the comments at the top):

add_action('genesis_setup','child_theme_setup', 15);
function child_theme_setup() {

	// Add Nav to Header
	add_action( 'genesis_header', 'be_nav_menus' );

}

/**
 * Add Nav Menus to Header
 *
 */

function be_nav_menus() {
	echo '<div class="menus"><div class="primary">';
	wp_nav_menu( array( 'menu' => 'Primary' ) );
	echo '</div><!-- .primary --><div class="secondary">';
	wp_nav_menu( array( 'menu' => 'Secondary' ) );
	echo '</div><!-- .secondary --></div><!-- .menus -->';

}

The site should now look like this. We’ll differentiate the menus using CSS (not part of tutorial).

Before we end this section, there’s one more thing I’d like to do. Since we’re using our own menu, not the Genesis ones, I will remove the metabox on the Theme Settings page so the end user doesn’t accidentally turn one of those menus on. Here’s the updated functions.php:

add_action('genesis_setup','child_theme_setup', 15);
function child_theme_setup() {

	// ** Backend **

	// Remove Metaboxes
	add_action( 'genesis_theme_settings_metaboxes', 'be_remove_metaboxes' );

	// ** Frontend **

	// Add Nav to Header
	add_action( 'genesis_header', 'be_nav_menus' );

}

/**
 * Remove Metaboxes
 * This removes unused or unneeded metaboxes from Genesis > Theme Settings. See /genesis/lib/admin/theme-settings.php for all metaboxes.
 *
 */

function be_remove_metaboxes( $_genesis_theme_settings_pagehook ) {
	remove_meta_box( 'genesis-theme-settings-nav', $_genesis_theme_settings_pagehook, 'main' );
}

/**
 * Add Nav Menus to Header
 *
 */

function be_nav_menus() {
	echo '<div class="menus"><div class="primary">';
	wp_nav_menu( array( 'menu' => 'Primary' ) );
	echo '</div><!-- .primary --><div class="secondary">';
	wp_nav_menu( array( 'menu' => 'Secondary' ) );
	echo '</div><!-- .secondary --></div><!-- .menus -->';

}

Setup the homepage content area

Since the homepage is static, not a listing of posts, the first thing I do is create a page called Home, then go to Settings > Reading and set the homepage to “Home”.

For all the homepage-specific code, I’m putting that in the file front-page.php. So the first thing I’ll do is create front-page.php:

<?php
/**
 * Front Page
 *
 * @package      Barnwell
 * @author       Bill Erickson <bill@billerickson.net>
 * @copyright    Copyright (c) 2011, Bill Erickson
 * @license      http://opensource.org/licenses/gpl-2.0.php GNU Public License
 *
 */

genesis();
?>

Think of this file as a functions.php that only applies to the front page. All our customizations must go before genesis().

Next I’ll force the page layout to be full width, remove the page title, and add the rotator (building this could have been a whole tutorial on its own so I’m leaving it out):

// Force full width
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

// Remove Page Title
remove_action( 'genesis_post_title', 'genesis_do_post_title' );

// Add Rotator
add_action( 'genesis_after_header', 'be_home_rotator' );

/**
 * Rotator 
 *
 */

function be_home_rotator() {
	do_action( 'home_rotator' );
}

Now I’ll build the content area. First I remove the default loop, genesis_do_loop(), and replace it with my own, be_home_loop(). Inside my loop I have three div’s, #content-left, #content-middle, #content-right. In the left one I’m outputting the page content (the client can edit this from Pages > Home). In the middle I’m displaying the most recent posts. In the right div I’m displaying a sidebar the client can edit (Home Sidebar), then listing the upcoming events and links.

I’m not going to go into more detail on the actual code since this is more of a process tutorial. It is more important that you see how to create a custom home content area than understanding the specifics like my upcoming events query.

Here’s the total front-page.php:

<?php
/**
 * Front Page
 *
 * @package      Barnwell
 * @author       Bill Erickson <bill@billerickson.net>
 * @copyright    Copyright (c) 2011, Bill Erickson
 * @license      http://opensource.org/licenses/gpl-2.0.php GNU Public License
 *
 */

// Force full width
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

// Remove Page Title
remove_action( 'genesis_post_title', 'genesis_do_post_title' );

// Add Rotator
add_action( 'genesis_after_header', 'be_home_rotator' );

/**
 * Rotator 
 *
 */

function be_home_rotator() {
	do_action( 'home_rotator' );
}

// Content Area
remove_action( 'genesis_loop', 'genesis_do_loop' );
add_action( 'genesis_loop', 'be_home_loop' );

/**
 * Home Content Area
 *
 */

function be_home_loop() {
	echo '<div class="content-left">';
		while( have_posts() ): the_post(); 
			the_content();
		endwhile;
	echo '</div><!-- .content-left -->';

	echo '<div class="content-middle">';
		echo '<h3>Latest News</h3>';
		$news = new WP_Query('posts_per_page=3');
		while ($news->have_posts()): $news->the_post(); global $post;
			echo '<div class="news-item">';
			echo '<div class="thumbnail"><a href="' . get_permalink() . '">' . get_the_post_thumbnail( $post->ID, 'thumbnail' ) . '</a></div>';
			echo '<div class="content"><span class="date">' . get_the_date() . '</span><a href="' . get_permalink() . '">' . get_the_title() . '</a></div><!-- .content -->';
			echo '</div><!-- .news-item -->';
		endwhile; wp_reset_query();
	echo '</div><!-- .content-middle -->';

	echo '<div class="content-right">';
	dynamic_sidebar( 'home-sidebar' );
	?>

	<div class="events-links-entry">
		<div class="entry-header">
			<p class="col-1">Events</p>
			<p class="col-2">Popular Links</p>
		</div><!-- /entry-header -->
		<div class="entry-content">
				<?php
				$args = array(
					'post_type' => 'event',
					'posts_per_page' => '5',
					'orderby' => 'ASC',
					'order' => 'meta_value_num',
					'meta_query' => array(
						array(
							'key' => 'be_events_manager_end_date',
							'value' => time(),
							'compare' => '>'
						)
					)
				);
				$events = new WP_Query( $args );
				if( $events->have_posts() ):
					echo '<ul class="col-1">';
					while ( $events->have_posts() ): $events->the_post();
						echo '<li><a href="' . get_permalink() . '">' . get_the_title() . '</a></li>';
					endwhile; wp_reset_query();
					echo '</ul>';
				endif;
				?>
			<ul class="col-2">
				<?php 
				$args = array(
					'limit' => -1,
					'title_li' => '',
					'category' => 2,
					'categorize' => 0
				);
				wp_list_bookmarks( $args ); ?>
			</ul>
			<div class="cl"> </div>
		</div><!-- /entry-content -->
	</div><!-- /events-links -->
	</div><!-- .content-right -->
	<?php
}

genesis();
?>

And I also had to modify the child_theme_setup() function in functions.php to register the new sidebar.

add_action('genesis_setup','child_theme_setup', 15);
function child_theme_setup() {

	// ** Backend **

	// Remove Metaboxes
	add_action( 'genesis_theme_settings_metaboxes', 'be_remove_metaboxes' );

	// Add Home Sidebar
	genesis_register_sidebar( array( 'name' => 'Home Sidebar', 'id' => 'home-sidebar' ) );

	// ** Frontend **

	// Add Nav to Header
	add_action( 'genesis_header', 'be_nav_menus' );

}

Here’s what the site looks like after adding content to the page “Home”, adding a few events (using this plugin), and adding a widget to the home sidebar.

Finally, the last section of customization. Since the footer is site-wide, we’ll be making these customizations in functions.php. The footer area consists of 3 sections: Search, Footer Widgets and Footer.

To add search, put this at the bottom of functions.php:

/**
 * Add Search to Footer
 *
 */

function be_search() {
	?>
	<div id="searchbar">
		<div class="wrap">
			<p>Can't find what you're looking for? </p> <?php get_search_form(); ?>
		</div>
	</div>
	<?php
}

Next we’ll add this to the child_theme_setup() function to tell WordPress where to put that search function:

	// Add Search to Footer
	add_action( 'genesis_before_footer', 'be_search', 4 );

That works great, except the search text says “Search this website…” and the button says “Search”. In the design the search text is empty and the button is “Go”. Luckily Genesis provides us filters for these. We’ll use the handy __return_false() function from WordPress on the search text, and create a function of our own for the button.

At the bottom of functions.php place this:

/**
 * Change search button text to Go 
 *
 */

function be_search_button_text( $text ) {
	return esc_attr( 'Go' );
}

And modify the Add Search to Footer section of child_theme_setup() to this:

	// Add Search to Footer
	add_action( 'genesis_before_footer', 'be_search', 4 );
	add_filter( 'genesis_search_text', '__return_false' );
	add_filter( 'genesis_search_button_text', 'be_search_button_text' );

Now let’s add the footer widgets. This is a built-in feature of Genesis, so it only takes one line of code in child_theme_setup():

	add_theme_support( 'genesis-footer-widgets', 6 );

You will now have 6 new widget areas accessible in Appearance > Widgets. I’m going to leave them empty for now so there’s not a bunch of text in the screenshots. If you dig into Genesis core, you’ll see it adds the footer widgets to genesis_before_footer. The default priority is 10 when attaching to an action or filter. To ensure the search shows up before the footer widgets I set the priority of the search to 4 (see the code above).

Finally I’m going to remove the default Genesis footer and replace it with my own. Place this at the bottom of functions.php:

/**
 * Footer
 *
 */

function be_footer() {
	echo '<div class="left"><p>© Copyright ' . date('Y') . ' : All Rights Reserved</p></div>';
	echo '<div class="right">';
	wp_nav_menu( array( 'menu' => 'Footer' ) );
	echo '</div>';
}

And this in your child_theme_setup() function:

	// Footer
	remove_action( 'genesis_footer', 'genesis_do_footer' );
	add_action( 'genesis_footer', 'be_footer' );

I’m using a custom menu on the right side of the footer, so go to Appearance > Menus and create a menu called Footer.

So now this is what the site looks like.

It doesn’t look like much, but with a little CSS tweaking you can make it look like this:

And here’s the functions.php file:

<?php
/**
 * Functions
 *
 * @package      Barnwell
 * @author       Bill Erickson <bill@billerickson.net>
 * @copyright    Copyright (c) 2011, Bill Erickson
 * @license      http://opensource.org/licenses/gpl-2.0.php GNU Public License
 *
 */

/**
 * Theme Setup
 *
 * This setup function attaches all of the site-wide functions 
 * to the correct actions and filters. All the functions themselves
 * are defined below this setup function.
 *
 */

add_action('genesis_setup','child_theme_setup', 15);
function child_theme_setup() {

	// ** Backend **

	// Remove Metaboxes
	add_action( 'genesis_theme_settings_metaboxes', 'be_remove_metaboxes' );

	// Add Home Sidebar
	genesis_register_sidebar( array( 'name' => 'Home Sidebar', 'id' => 'home-sidebar' ) );

	// Add Footer Widgets
	add_theme_support( 'genesis-footer-widgets', 6 );

	// ** Frontend **

	// Add Nav to Header
	add_action( 'genesis_header', 'be_nav_menus' );

	// Add Search to Footer
	add_action( 'genesis_before_footer', 'be_search', 4 );
	add_filter( 'genesis_search_text', '__return_false' );
	add_filter( 'genesis_search_button_text', 'be_search_button_text' );

	// Footer
	remove_action( 'genesis_footer', 'genesis_do_footer' );
	add_action( 'genesis_footer', 'be_footer' );
}

/**
 * Remove Metaboxes
 * This removes unused or unneeded metaboxes from Genesis > Theme Settings. See /genesis/lib/admin/theme-settings.php for all metaboxes.
 *
 */

function be_remove_metaboxes( $_genesis_theme_settings_pagehook ) {
	remove_meta_box( 'genesis-theme-settings-nav', $_genesis_theme_settings_pagehook, 'main' );
}

/**
 * Add Nav Menus to Header
 *
 */

function be_nav_menus() {
	echo '<div class="menus"><div class="primary">';
	wp_nav_menu( array( 'menu' => 'Primary' ) );
	echo '</div><!-- .primary --><div class="secondary">';
	wp_nav_menu( array( 'menu' => 'Secondary' ) );
	echo '</div><!-- .secondary --></div><!-- .menus -->';

}

/**
 * Add Search to Footer
 *
 */

function be_search() {
	?>
	<div id="searchbar">
		<div class="wrap">
			<p>Can't find what you're looking for? </p> <?php get_search_form(); ?>
		</div>
	</div>
	<?php
}

/**
 * Change search button text to Go 
 *
 */

function be_search_button_text( $text ) {
	return esc_attr( 'Go' );
}

/**
 * Footer
 *
 */

function be_footer() {
	echo '<div class="left"><p>© Copyright ' . date('Y') . ' : All Rights Reserved</p></div>';
	echo '<div class="right">';
	wp_nav_menu( array( 'menu' => 'Footer' ) );
	echo '</div>';
}

Sign Up Now for Free Updates and Exclusive Content:

Learn how to write killer content, get more traffic, make money, and more by entering your email below:

Written by Bill Erickson

Bill Erickson is a WordPress Consultant who builds custom websites using WordPress as a CMS and the Genesis Framework. He contributes to the WordPress community through themes, plugins, tutorials, and core patches.

Leave a Reply

Comments

  • Keith Davis says:

    Hi Bill
    Won’t pretend that I’ve read and understood the whole of this post but it looks like a great place to start for anyone interested in Genesis.

    I bought the Genesis Pro Plus package some time ago.
    Great value – made the outlay back with my first project.

    Appreciate you taking the time to educate the rest of us.
    I think this is a post that I’ll be printing off.

  • Mark Bailey says:

    Thank you! You make it look so easy! ;-)

    Actually you’ve distilled a very large amount of technical details into a great, easy-to-understand tutorial.

    @Keith, I also think the Genesis Pro Plus package was one of the best purchases I ever made.

    Mark

    • Keith Davis says:

      Hi Mark
      Agreed.
      One off payment for the Pro Plus package, which gives you access to all Studiopress themes and all future themes – fantastic value.
      And, you can use all the themes on as many client sites as you want.
      A complete no-brainer.

      Only one problem… Bill’s “Driskill Theme” is not part of the Pro Plus package. LOL

  • I should have included that in the post. The best way to learn how to build a child theme is to buy the Pro Plus package and see how every StudioPress theme is built. That’s how I learned. It’s the fastest and cheapest way to learn.

    Thanks everyone for the great comments. It’s hard to write an effective tutorial for a topic this broad, but when I was building this site I thought it would make a great tutorial. I can show the basics of building a theme without getting bogged down (too much) by the particulars only relevant to a specific project.

    • Keith Davis says:

      Hi Bill
      Buy the Pro Plus package and… read the comments and replies in the Studiopress forum.

      Nick the Geek, Sozo, you and lots of other guys and gals post some great replies on there.

      Even if you don’t have the problem yourself, you learn something.
      Read a little, learn a lot.

      • Yep, I love the support forums. I actually use it to learn more about Genesis. I periodically look at the unanswered posts, looking for one that I don’t know the answer to either. If it’s interesting, I’ll dig through Genesis, learn something new, and share it.

  • Tracy says:

    Outstanding post, Bill. Thank you!

    - Tracy

  • Thanks for this Bill. Answered a ton of questions I have that I didn’t even know how to verbalize.

  • Jerry says:

    Great write-up! I hadn’t thought to just take the code for my favorite elements from the existing themes and combine them into a child theme. I’m going to give this another shot =)

  • Victor says:

    Thanks Bill! This is truly great stuff. I’ve been hacking together Genesis designs for the last year, but never built a child theme from scratch. Guess I have to get some tutorials on PHP. Do you have any walk through tutorial videos on building genesis themes? I’ll totally buy them if you do ;-)

  • Toni B says:

    Thanks! This is just what I’ve been looking for!

  • Gloria says:

    Hi Bill,
    I’m not sure if you provide any support but I am going to give this a try. I try to follow your tutorial and I get stuck. I install Genesis 1.7 and upload both style.css and functions.php to /wp-content/themes/potato and I get the following error message when I activate the child theme.
    Warning: include_once(…/public_html/potato/wp-content/themes/basic/lib/admin/child-theme-settings.php) [function.include-once]: failed to open stream: No such file or directory in /home/simplene/public_html/potato/wp-content/themes/basic/functions.php on line 43

    So I upload lib/admin/child-theme-settings.php but it still doesn’t work. So I delete the all those files and upload billerickson-BE-Genesis-Child-13ed5d0.zip. I get the following error message:
    Fatal error: Class ‘Genesis_Admin_Boxes’ not found in…/potato/wp-content/themes/billerickson-BE-Genesis-Child-13ed5d0/lib/admin/child-theme-settings.php on line 25

    Does this tutorial only works with Genesis 1.8? In the child-theme-settings.php says * Child Theme Settings * Requires Genesis 1.8 or later. If that is the case where can I get a copy of Genesis 1.8 (I’m a Pro Plus member). Or can your tutorial be modified to work with Genesis 1.7?

    • Sorry, I recently updated that file (child-theme-settings.php) for Genesis 1.8 which is not available yet. Brian Gardner said that 1.8 should be out a day or two after 3.3, so it should be available very soon.

      To use BE Genesis Child until then, in functions.php remove or comment out the line that includes that file. A few people have asked about this, so I’ll see if I can update it so it only loads if 1.8 is installed (you don’t get error messages if you’re running an older version).

  • Paul says:

    Just curious: why don’t you use the genesis menus?

    • In this specific instance I didn’t use the Genesis menus because I needed the two menus to take up one space, one on the left and one on the right. Typically I will use the genesis menus.

      • vajrasar says:

        But that could also be achieved by using the genesis menus and calling add_action on those menus in function.php, as you’ve done by making your own menus and calling them one after another. Am I right?

  • Ian says:

    Thank you Bill Erickson for the great easy to understand tutorial!

    I only have a couple of questions.
    1. Same as Paul above, I’m curious as to why you replace the genesis menus. I changed the code from class=”primary” to id=”nav” to start with the genesis style for the nave menu and realized this is redundant because it makes it look like the original genesis style. But in your screenshot your nav menu looks like the default genesis style. Mine was a un-styled list until I changed it to id=”nav”. So I’m guessing the purpose is to create your own set of css styles for your custom menu. Good idea but from a users point of view I like to be able to add my own menu in the dashboard which can’t be done without editing the functions.php file. Also, when I add a page it pushes ‘Home’ over to the right instead of showing up after ‘Home’ like I would expect. I’ll need to figure out how to set the order of pages in the menu since I’m used to using the dashboard to do that.

    2. In your screenshot even after adding the home sidebar you still show a full width page with no sidebar. Mine looked like yours until I refreshed and then the sidebar showed up making it look like the default genesis theme since we added the sidebar in functions.php so I’m kinda confused as to the purpose of adding it back in.

    It’ll probably make more sense to me if I go over it again.

    Thanks again :-)

  • Ian says:

    Ok I think I figured it out. Not sure if you got my last reply because it disappeared but here’s what I figured out about the nav menu.

    I created my own menu called ‘mymenu’ and in the functions.php replaced ‘Primary’ with ‘mymenu’. Then I have the ability in the dashboard to change the nav link order. Your method for remove meta only keeps a user from adding a menu but not creating one. So that part makes sense to me now.

    Also I made the Home link a custom url so it will show the front page instead of home page. Other wise you only see front page on the first visit to the site and ‘home’ takes you to the ‘home’ page which is a different page. This is why I couldn’t figure out why my page looked different than your screenshot. I had clicked on ‘home’ to refresh and then couldn’t get back to the frontpage without changing the url in the address bar.

    So, just some confusion on my part and thought I’d say it in case anyone else got confused by that.

    Thanks

  • Alan says:

    Hi Bill, I’ve been trying to setup my site and I’ve been searching for a way to remove the sidebars only on my search page. I’m on the Genesis Theme, but I can’t seem to find a way to do that on wp-admin.

    would appreciate any help that can point me in the right direction.

    Thanks.

  • Hi Bill,

    First: Thank you so much for taking the time to do this tutorial. I’ve been customizing existing Genesis child themes for a while and have been itching to do my own.

    That said: I’ve got a bit of an issue with menus and am stumped.

    Right now my functions file looks like this:

    add_action(‘genesis_setup’,’child_theme_setup’, 15);
    function child_theme_setup()
    {

    // Add Nav to Header
    add_action( ‘genesis_header’, ‘fred_nav_menus’ );

    }

    /**
    * Add Nav Menus to Header
    *
    */

    function fred_nav_menus()
    {
    echo ”;
    wp_nav_menu( array( ‘menu’ => ‘Primary’ ) );
    echo ‘‘;
    wp_nav_menu( array( ‘menu’ => ‘Secondary’ ) );
    echo ‘‘;
    }

    But my site is showing double menus where your screenshot only shows one. Would you point me in the right direction for what I’m missing?

  • I figured out my menu issue. Going to the corner to feel stupid now. Again, thanks for the great tutorial.

    • Chris says:

      Hey Anne,
      I’m feeling stupid right about now too, but I haven’t figured out why yet. :) I have the same problem right now and I’m just getting started. Care to shed some light on what your problem was? Thx.

      • Anne Dougherty says:

        Chris:

        Genesis has a setting that requires you to enable menus. No matter what you put in the functions file, if that “enable” setting isn’t checked your menus never show up.

        :\

        Cheers,
        Anne

  • Mohd Isa says:

    I need help, how to remove vcard on comment author?

  • Thanks for the tutorial. I am just beginning with Genesis, so it will take me some time to make the best use of the tutorial.

  • Troy says:

    Thank you! This tutorial helped me understand and has given me a foundation to start on!

  • Nice one Bill. Actually I have been a fan of yours since I stumbled on your site. I am just starting a website design business too though I am from the other side of the planet.

    Yeah, I am thankful I have read your post because Ive learned not to use the normal @import on the CSS contrary to what I was always doing on my customized websites for my friends.

    I am starting to create my Genesis Child themes too. Hope I can share them in the future.

    God bless idol. :)

  • karubi says:

    Is it possible to convert existing non genesis thrme to genesis child theme? Thank you.

  • akamaxbuz says:

    Many, many thanks Bill….. and I have only just scanned your tut. This is just what I was searching for. Came up #1 on Google “making my own genesis child theme.”

  • Anirudh Bahadur says:

    Woohoo.. This was a very thorough tutorial. Thanks a lot. I am planning to build child themes of my own and this post is going to help me a lot!

  • Anita says:

    I am not a developer but can just hack the code when I find tutorials such as this. In using your code above, is there a way to make the three sidebar areas where I can use widgets so I can change the content periodically to something else? I got your instructions to work so far. I really appreciate your tutorial area.

  • Suzanne says:

    Will there be a part 2 where you go over getting the CSS to look right? Also, i’m not really sure I understand why you bring in ALL the css from the parent theme, rather than just adding your changes?

    Doesn’t that make it harder to modify the code because there’s more “stuff” in there? Why not keep it clean and just change what’s overridden?

  • angel says:

    hello bill,

    Nice tutorial ,

    will you please specify where to place front-page.php (i have to place under lib or somewhere else) ..

    How to change css of inner pages(i mean which files i have to edit to change a page and post) in standard theme we do it single and page.php but how to do it in child theme

  • i like your blog. because your blog is very informative. i get here some fantastic genesis themes tutorial. thanks for shearing all those posts with us.

  • chandra says:

    I now understand about hook, implementation & how to use it.. very nice tutorial..thanks !

  • Ian says:

    Wow, what a great write up, learnt a bunch. Going to start my own child theme right now thanks to this.

  • Amar Ilindra says:

    Helloo Bill Erickson,

    I faced a problem.

    I installed WordPress in Local Host, Installed Genesis, Created a new folder (wp-content/themes/GeekDashboard), Copied style.css from Genesis folder, Created a functions.php file and added the below code

    <?php
    /**
    * Functions
    *
    * @package Amar Ilindra
    * @author Amar Ilindra
    * @copyright Copyright (c) 2013, Amar Ilindra
    * @license http://opensource.org/licenses/gpl-2.0.php GNU Public License
    *
    */

    /**
    * Theme Setup
    *
    * This setup function attaches all of the site-wide functions
    * to the correct actions and filters. All the functions themselves
    * are defined below this setup function.
    *
    */

    add_action(‘genesis_setup’,’child_theme_setup’, 15);
    function child_theme_setup() {

    }

    and Placed a Screenshot.png file
    everything goes well and good.
    Once i activated my theme,
    I noticed, CSS is not applying to the theme. Everything displays in HTML format and no CSS is applied to anything

    How to solve this problem
    Thanks in Advance

  • Joan says:

    Hi Bill,

    Great post, very helpful! Thanks so much!

    You put all your Home related tweaks on the front-page.php file, instead using is_conditional on functions.php. Is that a best practise? Is it faster? Do you recommend use other template files like category.php or archives.php in case you wanna tweak the loop there too, or a is_category conditional on functions.php?

    Thanks so much!!

    • That’s how I like to do it. I like to describe it as cascading PHP. The functions.php file contains things that apply to all sections of the site. If something only applies to one page, place it in that page’s template (ex: front-page.php for homepage items).

      This code ( http://www.billerickson.net/code/use-single-template-for-home-archive-and-search/ ) is useful if you have something that belongs in a few different pages. For instance, you want certain functions for your blog. Well that could be home.php, archive.php, and search.php. So I put it in archive.php and then in functions.php use the above code to say that template file should be used for all three of those instances.

      • Joan says:

        Yeah, I like it that way too! Glad to know that.

        I’m just learning genesis and developing my first child themes, and don’t know why all the snippets and tutorials I find put all the conditionals on the functions.php.

        Thanks for sharing!

      • chris field says:

        Hi Bill. Thanks for your many contributions to the WordPress/Genesis community! I am very grateful.

        Curious:
        I see that the front-page.php does not use a priority set up function like the main functions file does – i.e. add_action(‘genesis_setup’,’child_theme_setup’, 15);
        I would have expected either the functions.php file to set the order for the front-page.php within its genesis_setup function. But it does not. Or the front-page.php file to set itself up with its own priority set up function. But it does not.

        So where in the priority order are the front-page.php functions, filters, and actions firing? Perhaps they simply default to after the child’s functions file, so there is no need for any specificity?

        Thanks again!

        • functions.php requires the ‘genesis_setup’ function because a child theme’s functions.php file loads before the parent theme’s. That function attaches all code in functions.php to a hook that runs AFTER Genesis has already loaded.

          Code in other theme files load much later, after the query has been run and WordPress knows which theme file to use

          Load Order: child theme’s functions.php => Genesis’ functions.php => ‘genesis_setup’ hook => ‘pre_get_posts’ hook => WordPress parses query => ‘template_redirect’ and ‘template_include’ hooks => WordPress loads appropriate template file ( front-page.php )

          As you see, front-page.php loads after Genesis has already setup. If we were to hook functions to ‘genesis_setup’ in front-page.php, they would never run because that hook fires before front-page.php is loaded.

  • Siv says:

    Hello, complete newbie here. I have downloaded the genesis framework and want to make my own theme with my own column widths, and size of divs etc. What I don’t really understand is, do I edit the style.css that already exists in the template folder? Or do I create a new style sheet?

    • Joan says:

      You have to create a child theme, and import (or copy paste) the style.css of your parent theme, and modify it at your will.

      • Siv says:

        Ok thanks! So with this I can change anything, for example wrapper, body, column witdths and all? Also, do i just modify the actual css that I have copied or do I create some css that will override the previous, or does that not matter?

        • Joan says:

          So with this I can change anything, for example wrapper, body, column witdths and all?

          Absolutely

          Also, do i just modify the actual css that I have copied or do I create some css that will override the previous, or does that not matter?

          You can do both. I prefer to create the new CSS to override the previous (to keep track of my tweaks), but modify the copied CSS is simpler. :)

  • Hi Bill,
    Thank you for sharing the information. The tutorial was great but it was not organized well at all. There is no real start or end to each section so it was a bit hard to follow.
    If would have been nice if you could have zipped up the files and made them downloadable so that we could unzip and tinker immediately.
    Thanks for the information, much continued success to you!