Getting the most value from Genesis

What is Genesis?

Genesis is a theme framework, a base upon which you build your own custom WordPress theme. Genesis helps you can build higher quality themes faster, and is built with a focus on SEO and performance.

In the same way that WordPress can be extended using hooks and filters inside plugins, Genesis can be extended using hooks and filters inside your child theme.

Rather than build everything from scratch, you build a child theme with your unique design and features.

You have complete creative freedom when designing a Genesis website. Genesis imposes no design constrains. Here are some examples of sites we’ve built with Genesis.

Benefits to using Genesis

You can focus on what’s unique about your website and rely on Genesis for the common features. You’ll build higher quality websites faster.

Even when you are building custom features, you can leverage the tools and APIs inside of Genesis to implement these faster:

• Add your own theme settings using the Theme Settings API (example).
• Customize breadcrumbs using Breadcrumbs class (example).
• Use the Markup API to modify any HTML element’s attributes, class, ID, or even the HTML element itself (example).

As a developer or agency managing multiple projects, a common codebase across all projects will increase your team’s efficiency. When jumping between projects you won’t have to relearn how everything is structured.

You can also easily reuse code across projects. You can create a library of code snippets, theme files, and plugins with commonly used functionality that can be deployed across multiple projects.

Another benefit is the ecosystem. As the most popular theme framework on the market, there are many Genesis developers, with lots tutorials, and plenty of free plugins built specifically for Genesis.

When you launch a custom theme, it becomes frozen in time – the features of the website won’t improve without you making those updates. With Genesis, you silo your custom features and styles in a child theme, allowing the parent theme (Genesis) to continually improve.

Recent Genesis updates have improved accessibility, added support for new WordPress features, and updated Schema markup for SEO.

With substantial changes coming to WordPress with Gutenberg, it’s even more important to build upon a platform that will ensure future compatibility.

How to build with Genesis

The first step is to decide if you want to customize an existing child theme or start a new child theme. StudioPress has dozens of pre-built child themes, which can be purchased individually or as a package. These themes are available for free to all WPEngine customers. With an hour or two of work you can have a great looking site up and running.

Most developers and agencies will build custom child themes. A great place to start is the Genesis Sample child theme. After building a few Genesis sites you’ll likely create your own starter child theme with your base styling and common features – here’s mine.

Styling a Genesis theme is exactly the same as any other WordPress theme. You can write standard CSS or compile SASS.

What makes Genesis different from a standard theme is how you’ll customize the features and markup on the page. Rather than directly editing the core theme files – like you would in a custom theme – you’ll use hooks and filters to remove or modify core Genesis features, and add your new features.

Create a template

Any time you create a template file, you end it with the genesis(); function which builds the page. Here’s the first step in creating a “Pricing” page template:

<?php
/**
 * Template Name: Pricing
**/

genesis();

You can determine the scope of your customizations by where you place your code. Anything placed in functions.php applies site-wide, while code in a page template only applies to that template.

We’ll make this template full width using a filter, and add a call to action bar above the site footer using a hook.

<?php
/**
 * Template Name: Pricing
**/

// Full width template, no sidebar
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );

/**
 * Call to Action 
 *
 */
function be_pricing_cta() {
  // CTA code goes here
}
add_action( 'genesis_before_footer', 'be_pricing_cta' );

genesis();

You can use this Visual Hook Reference to see what hooks are available, or dive into the Genesis code itself. Start by looking in these files:

• /genesis/lib/framework.php
• /genesis/lib/structure/loops.php
• /genesis/lib/structure/post.php

Change schema for events

Genesis has support for schema (structured data). The CreativeWork content type is used by default, but you can use the Markup API to change this.

/**
 * Event Schema 
 *
 */
function be_event_schema( $attr ) {

	if ( 'event' == get_post_type() ) {
		$attr['itemtype']  = 'http://schema.org/Event';
		$attr['itemprop']  = '';
		$attr['itemscope'] = 'itemscope';	
	}

	return $attr;
}
add_filter( 'genesis_attr_entry', 'be_event_schema', 20 );

Here’s a full example of changing schema in my events calendar plugin. Also take a look at Yoast SEO structured data with Genesis.

Learn More

The best way to learn Genesis is to download existing child themes from StudioPress / WPEngine and see how they’re constructed.  You can also review StudioPress documentation, support forums, and the Facebook group for answers to specific questions.

For a deeper dive into building Genesis themes, I recommend the video course Building Genesis Child Themes from Scratch by Carrie Dils.