How to Build Your First Genesis Child Theme


I’ve been interested in Genesis for years, have built multiples sites on it, but have never really developed my own theme. I’ve tweaked other themes, even modified them to look completely different, but now I am going to build my own theme. I am not sure what I’ll call it yet, but it’ll be free, will be minimal, and won’t be heavy.

Building Your First Genesis Child Theme: What are the Necessary Files?

Let’s just start here. I am assuming you have used Genesis before, but if you have not, go buy Genesis and install it. Once it is installed, we will be working with theses files and folders, so go ahead and create them all.

First off, create a folder for the theme itself. For this project, Ill just name it: nominal. Then place all of these files and folders inside:

Nominal

  • functions.php
  • page_landing.php
  • style.css
  • screenshot.png
  • README.txt (no one really ever reads these)
  • (Folder) images
  • (Folder) js
  • (Optional Folder) languages – *This theme won’t include a languages folder. Languages folder normally stores a file with a .pot extension for Internationalizing the theme (I18n).
  • (Optional Folder) xml – *This theme will provide dummy content for you to use as filler text. Or you can just grab some lorem ipsum.

What are those files exactly?

This is the beauty of the Genesis Framework. When you work with other themes, you don’t have a standard set of files, and you don’t have a normalized system. If you were to download a theme from themeforest, or use one the standard themes on WP, you’ll see 10+ files and folders…

Let’s start with functions.php.

The functions file behaves like a WordPress Plugin, adding features and functionality to a WordPress site. You can use it to call functions, both PHP and built-in WordPress, and to define your own functions. You can produce the same results by adding code to a WordPress Plugin or through the WordPress Theme functions file.

Let’s get started on our functions.php file. Before the snippet, I’ll go through and briefly explain what each function does. If you are confused by the syntax of the function itself, I’d suggest reading Genesis Explained by a great guy named Nick.

Start the Genesis Engine

The first line we want to add to this new file (functions.php) is to ensure the entire Genesis Framework is loaded in our child theme. Add the below code to your new file.

//* Start the engine
include_once( get_template_directory() . '/lib/init.php' );

We also want to set some definitions in Genesis for our Child Theme. This will help when you add widgets, etc. Ever wondered where Genesis gets some of the default information for the footer? This is it.

//* Child theme
define( 'CHILD_THEME_NAME', 'Nominal Theme' );
define( 'CHILD_THEME_URL', 'http://elioverbey.net' );
define( 'CHILD_THEME_VERSION', '1.0' );

We are adding in our scripts and styles. Even though we have not created them yet, this is what we will be creating and calling. The created a function that queues the responsive menu, WP Dashicons, and finally, Google fonts.

//* Enqueue scripts and styles
add_action( 'wp_enqueue_scripts', 'Nominal_enqueue_scripts_styles' );
function Nominal_enqueue_scripts_styles() {

wp_enqueue_script( 'Nominal-responsive-menu', get_bloginfo( 'stylesheet_directory' ) . '/js/responsive-menu.js', array( 'jquery' ), '1.0.0' );
wp_enqueue_style( 'dashicons' );
wp_enqueue_style( 'Nominal-google-fonts', '//fonts.googleapis.com/css?family=Montserrat|Sorts+Mill+Goudy', array(), CHILD_THEME_VERSION );

}

Make The Child Theme HTML5 Compliant

To use the Genesis HTML5 structure we need to add a small snippet of code that is a built in function within WordPress. This code allows the use of HTML5 ‘markup’ for the Genesis child theme. *Note – Previously the code to enable HTML5 markup was different. While the previously suggested code from Genesis will not break the site, there will be an error message displayed if Debug mode is enabled.

//* Add HTML5 markup structure
add_theme_support( 'html5', array( 'search-form', 'comment-form', 'comment-list' ) );

Add Mobile Responsiveness To Your Child Theme

To add the ability to write CSS code so that your child theme that adapts to mobile devices, we need to add a second snippet of code to make the Genesis child theme mobile responsive. Once this is added, your theme will adapt to the size of the screen viewing the site. The meta tag makes your website ready to be viewed on mobile.

This is a WordPress function like the above, but the ‘feature’ in-between the parenthesis is a Genesis specific feature contained in the framework. Copy and paste the snippet below into your code.

//* Add viewport meta tag for mobile browsers
add_theme_support( 'genesis-responsive-viewport' );

Create the Main Navigation

In the snippet below, we are simply moving the header from its default position after_header to above the header. We are also removing the secondary navigation. In this theme, we are going to keep it simple.

//* Unregister secondary navigation menu
add_theme_support( 'genesis-menus', array( 'primary' => __( 'Primary Navigation Menu', 'genesis' ) ) );

//* Reposition the primary navigation menu
remove_action( 'genesis_after_header', 'genesis_do_nav' );
add_action( 'genesis_header', 'genesis_do_nav', 12 );

Next up, we remove output of primary navigation right extras. What’s that? It removes Primary Navigation menu items, such as the RSS links, search form, twitter link, or today’s date (They are in the Genesis Panel). Because the nav itself will float right, we need to remove the optional extras.

//* Remove output of primary navigation right extras
remove_filter( 'genesis_nav_items', 'genesis_nav_right', 10, 2 );
remove_filter( 'wp_nav_menu_items', 'genesis_nav_right', 10, 2 );

Finally, we reduce the primary navigation menu to one level depth. The following example code will add an ID to the container and change the “depth” to 1 so that links at all levels are displayed in a single flat list. Basically, you can’t nest menu items – no dropdowns.

//* Reduce the primary navigation menu to one level depth
add_filter( 'wp_nav_menu_args', 'Nominal_primary_menu_args' );
function Nominal_primary_menu_args( $args ){

if( 'primary' != $args['theme_location'] )
return $args;

$args['depth'] = 1;
return $args;

}

Removing Genesis Actions

We are going to clean up our theme. When you start the Genesis engine, there are certain actions that get included. But with this “Car”, what if I don’t want all that is included? Say I just want a driver’s seat – no passengers? I’ll need to remove them. Let’s remove the parts we don’t need.

We removed the 3-column footer widgets, the entry meta data in the footer (“Filed Under”), the right header widget (we will place a nav), and the sidebar. We are keeping it simple.

//* Remove support for 3-column footer widgets
remove_theme_support( 'genesis-footer-widgets', 1 );

//* Remove the entry meta in the entry footer (requires HTML5 theme support)
remove_action( 'genesis_entry_footer', 'genesis_post_meta' );

//* Remove the header right widget area
unregister_sidebar( 'header-right' );

/** Remove default sidebar */
remove_action( 'genesis_sidebar', 'genesis_do_sidebar' );

Next up, we are unregistering certain layouts a) that the theme outputs, and b) that the users could pick on the backend. Now, they only have one default layout in Genesis Theme settings. The functions below remove the secondary sidebar, and the other Genesis layouts that we are not using. Technically, we are only using one layout.

//* Unregister secondary sidebar
unregister_sidebar( 'sidebar-alt' );

//* Unregister layout settings
genesis_unregister_layout( 'content-sidebar' );
genesis_unregister_layout( 'sidebar-content' );
genesis_unregister_layout( 'content-sidebar-sidebar' );
genesis_unregister_layout( 'sidebar-content-sidebar' );
genesis_unregister_layout( 'sidebar-sidebar-content' );

Last up, Add Support for Structural Wraps

Since we are being so minimal, I need to add more navigation (besides the primary nav). Breadcrumbs are nice – and are already built to hook in – but I don’t want to use them on this theme. Without a sidebar, these previous and next post links after the post work well.

/** Add post navigation (requires HTML5 support) */
add_action( 'genesis_after_entry_content', 'genesis_prev_next_post_nav', 10 );

That’s all. You now have a completed functions.php file. It should look something like this:

Don’t get too excited, it only looks like old html right now. But don’t worry, some CSS, a little javascript, and you’ll have a great looking theme.

Nominal

Nominal

Next Up: Let’s Create a Genesis Landing Page

Want to create a Genesis Landing Page? It is fairly simple. You pretty much just remove and unregister everything so that you end up with a blank canvas.

Create a page called page-landing.php. Add the following code to it, to register it as a page template. Add the following code to it, to register it as a page template.

<?php
/**
* This file adds the Landing template to the Nominal Theme.
*
* @author Eli Overbey
* @package Nominal
* @subpackage Customizations
*/

/*
Template Name: Landing
*/

Now, we are going to create a custom body class to add CSS styles to it. This will allow you to target only the landing page by using the class nominal-landing.

//* Add custom body class to the head
add_filter( 'body_class', 'nominal_add_body_class' );
function nominal_add_body_class( $classes ) {

$classes[] = 'nominal-landing';
return $classes;

}

Since the primary element of a landing page is providing a clean page, you should remove all the things from the page. This will remove the header,navigation, breadcrumbs, footer, sidebar and all other elements from the page, creating a full-width clean layout.

//* Force full width content layout
add_filter( 'genesis_site_layout', '__genesis_return_full_width_content' );

//* Remove site header elements
remove_action( 'genesis_header', 'genesis_header_markup_open', 5 );
remove_action( 'genesis_header', 'genesis_do_header' );
remove_action( 'genesis_header', 'genesis_header_markup_close', 15 );

//* Remove navigation
remove_action( 'genesis_before_content_sidebar_wrap', 'genesis_do_nav' );
remove_action( 'genesis_footer', 'genesis_do_subnav', 7 );

//* Remove breadcrumbs
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );

//* Remove site footer widgets
remove_action( 'genesis_before_footer', 'genesis_footer_widget_areas' );

//* Remove site footer elements
remove_action( 'genesis_footer', 'genesis_footer_markup_open', 5 );
remove_action( 'genesis_footer', 'genesis_do_footer' );
remove_action( 'genesis_footer', 'genesis_footer_markup_close', 15 );

//* Run the Genesis loop
genesis();

Add CSS styling

Next up, we will finally style the theme. I am not going to go step by step and explain what each portion does. But, you can download it on Github.

Add Some Javascript and Necessary Files

We’ve completed the style.css, page-landing.php, and functions. These last few files are easy to finish.

  • screenshot.png – add this screenshot to show what the theme looks like
  • README.txt – give some necessary information on installation.
  • (Folder) images – all you need right now is to drop a favicon.ico in now
  • (Optional Folder) xml – *This theme will provide dummy content for you to use as filler text. Or you can just grab some lorem ipsum.

Last but not least, let’s create our javascript folder (js) and add the javascript. Inside of the js folder, add a document titled “responsive-menu.js”. Make sure you title the file the same because that is how it was queued in the functions.

This javascript adds a class, creates the toggle motion, and removes a class at 768 pixels. Credit goes to Sridhar for the adaptation.

jQuery(function( $ ){

// Enable responsive menu icon for mobile
$("header .genesis-nav-menu").addClass("responsive-menu").before('</pre>
<div id="responsive-menu-icon"></div>
<pre>
');

$("#responsive-menu-icon").click(function(){
$("header .genesis-nav-menu").slideToggle();
});

$(window).resize(function(){
if(window.innerWidth > 768) {
$("header .genesis-nav-menu").removeAttr("style");
}
});

});

You made it. I hope you learned as much as I did. All of the code above can be downloaded in my free theme: Nominal. Grab it on Github.