Genesis Child Themes: This Guide For Dummies Makes Customization Child’s Play
Disclosure: Your support helps keep the site running! We earn a referral fee for some of the services we recommend on this page. Learn more
Sharing is caring!
0shares
Last Updated on
Genesis from StudioPress is easily the most popular premium WordPress theme on the market. While it is technically a WordPress theme, Genesis is so much more than that.
A child theme is simply a WordPress theme that relies on a parent theme for its main structure while adding custom functionality and, in some cases, replacing some of the functionality of the parent theme.
Most WordPress themes come with the following:
A stylesheet (style.css)
A functions.php file
A variety of templates to manage the display of posts, pages, your homepage and a variety of archive pages.
A child theme relies on its parent theme to provide templates to display content. It simply needs a stylesheet with a theme name and the name of its parent theme to get started.
Specifically, with a Genesis child theme, you’ll also need a functions.php file with a few essential elements – we’ll get there in a minute.
Then, you can add whatever functionality you want to your functions.php file to add custom functionality to your child theme. If you’d like, you can also add any of the template files included in your parent theme to your child theme and customize your child theme to your liking. If you add a template file to the child theme, it will replace the same template file from the parent theme.
Note: If you add any template files to your Genesis child theme (such as single.php for example), be sure to add genesis(); to the last line of each template file. This ropes in all of the Genesis functionality associated with each template file.
What Are The Benefits of Using a Genesis With a Child Theme?
Using a Genesis child theme allows you to leverage the lightning-fast load times, flexible theme options, industry-leading security, built-in SEO, and mobile responsiveness that Genesis offers while extending its functionality to accommodate your specific design and content-based needs.
You’ll also have access to regular updates from StudioPress which means all of Genesis’ core functionality will be maintained over time. This will significantly extend the life-cycle of your child theme and keep your site running at peak technical performance.
How to Install a Genesis Child Theme
To get started, you’ll need to create a new folder in your WordPress installation’s wp-content folder. You can name the folder whatever you like.
Add a Stylesheet
The first file to add to your child theme’s folder is style.css. You can copy the style.css file straight from Genesis into your child theme’s folder, but you’ll want to edit the identifying info at the top of the stylesheet. By default, it looks like this:
You can edit all of that info if you like, but at an absolute minimum you need to edit the Theme Name and add an extra field entitled “Template“. The Template field needs to be set to “genesis“. Your child theme stylesheet could look something like this:
/*
Theme Name: Your Child Theme Name
Template: genesis
*/
Set Up functions.php
Next, you’ll want to add a functions.php file to your child theme. Create a new file in your child themes folder with that title.
There are two things that are absolutely imperative to include here:
First, you need to include Genesis core functionality. This isn’t required with a standard WordPress child theme, but specifically with Genesis child themes you need to include the following line of code or your child theme will return a blank white page:
Second, it’s a good idea to include definitions for a few key elements. This information is helpful when it comes to managing your theme and documenting the changes you make over time.
You’ll need a place to put background images used in your theme. Simply create a sub-folder in your child theme folder entitled “images“.
Include an Image for Your Child Theme
This step isn’t absolutely imperative, but it’s a good housekeeping operation.
Create an image to represent your theme. The recommended size from WordPress is 1200px by 900px. Name your image “screenshot.png” and place it in your child theme folder.
The screenshot will usually be displayed smaller than full resolution, but the over-sized image accounts for full resolution on retina display devices.
That’s it. You’ve officially created your first Genesis child theme. You can go to Appearances -> Themes in your WordPress dashboard and activate your child theme.
How to Customize Your Genesis Child Theme
At this point, you haven’t added any custom functionality or altered anything. You’re also using a copy of the default stylesheet that comes with Genesis. All of that dictates that your child theme displays the exact same thing as the default Genesis theme.
Of course, you probably want to change things up a bit and add some functionality to suit your needs.
You can edit the stylesheet in your child theme folder to make changes to the styling of your website, but the bulk of your changes will be made using hooks and filters that come with Genesis to add, remove or otherwise alter your website’s HTML.
Hooks
Hooks allow you to add or remove content to or from your website’s HTML. Genesis comes stock with a long list of hooks you can use to place content.
Hooks work by using the add_action() and remove_action() functions. You simply include the name of the hook and the name of the function that you want to add or remove. For example, if you want to remove breadcrumbs entirely from your website, you would add this to your functions.php file:
Sometimes, you’ll also need to include a number after the name of your function to be sure that your function is added to the hook in the order you require. For example, if you wanted to ensure that your breadcrumbs are added to the top of your post or page content, you would add this to your functions.php file:
Filters, on the other hand, do not add or remove content from your website per se. Instead, they edit content that already exists on your website. Genesis also has a list of filters for reference.
Typically, a filter will include a function that is designed to alter a PHP variable of an existing function in Genesis. For example, if you wanted to edit the size of the Gravatar images on your blog’s comment sections, you would use something like the following:
This function sets the avatar_size to 150px by 150px. Of course, you could adjust that to be whatever size you’d like.
Leveraging WordPress Conditionals
You can further extend hooks and filters by adding WordPress conditionals to the functions that you add to hooks or filters.
WordPress has an incredibly in-depth array of conditionals that will allow you to target nearly any scenario you can imagine.
For example, if you take the example above where we added Genesis breadcrumbs to the top of your post and page content and you decide you only want it to apply to single posts, you could add the following to your functions.php file:
Here you’ve placed the function genesis_do_breadcrumbs(); inside your own function and added a conditional telling WordPress to check and see if this is a single post before it loads the breadcrumbs. If it’s not a single post, nothing happens. If it is a single post, the breadcrumbs are loaded.
You can apply this same concept to very nearly any hooked or filtered function to affect dynamic content output across your website.
Leveraging WordPress Template Hierarchy
WordPress conditionals are powerful, but they are not always the best solution. WordPress also offers a templating system which allows you to control which posts, pages, and/or archives your hooked or filtered content is delivered on.
For example, another way to accomplish displaying breadcrumbs only on single posts would be to create a single posts template in your child theme. Anything you add to this template will only apply to single posts.
To execute this, add a file named “single.php” to your child theme folder. You’ll want to add the following code to this file:
<?php
// Remove breadcrumbs from top of loop and add them to the top of post content
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
add_action( 'genesis_entry_content', 'genesis_do_breadcrumbs', 6 );
// Start the Genesis engine
genesis();
This file will overwrite the single.php file that is present in Genesis and will control what is displayed on single posts.
WordPress has a well-documented list of templates you can use to place content on different areas of your website as you like.
Learn more about WordPress template hierarchy here.
Naming Conventions
One thing that is important as you make changes to your theme is the concept of naming conventions. Throughout this article, you’ll see functions with prefix_ at the beginning of their names. You should replace this with a prefix that is unique to your particular child theme.
WordPress has tons of core functions, and plugins will also add functions to the backend of your website. If any of the functions from your child theme happen to have the same name as one of these functions, your website will break. Using a unique prefix at the beginning of your function names will prevent this.
30 Useful Ways To Alter and Extend Your Genesis Child Theme
There is a near-infinite number of things you can do to your Genesis child theme to alter the appearance, HTML, and overall functionality of your website. Here are 30 commonly-used examples.
—–Site Structure—–
Before we do anything else, let’s get your site’s structure in order. We’ll make sure you’re running modern web standards and give you the tools you need to get your site’s basic HTML structure set up to meet your specific needs. Genesis offers far more than this, but these are some of the most common examples.
1. Add Support for HTML5
Genesis uses XHTML by default. It’s extremely simple to enable HTML5, and you should absolutely do so unless you have a specific reason not to. You’ll be on your way to being up-to-date with modern web standards and the life-cycle of your child theme will most likely be extended (along with a host of other benefits).
To enable HTML5 in your Genesis child theme, just add the following line of code to your functions.php file:
Many of the examples below will assume that you have added support for HTML5 to your child theme.
2. Configure the Viewport Meta Tag
The viewport meta tag controls the way that most mobile devices will display your website. Without it, there’s a good chance that your mobile device will display your website at the same width as a desktop screen, but in a way that is scaled down to fit your mobile device’s screen.
In order to have mobile devices display your website at their native width, add this to your functions.php file:
// Add viewport meta tag for mobile browsers
add_theme_support( 'genesis-responsive-viewport' );
3. Remove the Site Title
Removing the site title is extremely simple. Of course, you’ll probably want to add it somewhere else on the page. The code to remove it is:
You’ll rarely see a site use a tagline (Genesis calls it a “site description”) these days. With that said, Genesis does display it by default. To remove it from your child theme, use this code:
Unless you have a specific use for this widget area, you should remove it.
unregister_sidebar( 'header-right' );
6. Move or Remove Primary Navigation Menu
By default, Genesis displays the primary navigation menu directly below the header. Depending on your specific website, you may want to remove it or move it directly into the header opposite your site title.
In order to remove the primary nav menu, use this code:
In order to place it in the header after removing it from below the header, use this code:
add_action( 'genesis_header', 'genesis_do_nav' );
7. Move or Remove Secondary Navigation Menu
By default, Genesis displays the secondary navigation menu directly below the primary navigation menu. Very few sites will use two navigation menus in this location any more. Therefore, many sites remove the secondary nav menu entirely. In order to do that, use this code:
If you aren’t going to use the navigation menus that come with Genesis, it’s a good idea to unregister them. This will remove them from the WordPress menu manager in the WordPress dashboard.
To unregister your site’s navigation menus, use this code:
remove_theme_support( 'genesis-menus' );
9. Move or Remove the Primary Sidebar
If you have a single column website and you don’t want to display the primary sidebar, you can use this code to remove it:
If you’ve removed one or both of the Genesis sidebars, it’s a good idea to unregister them. The following code will remove them from the widget menu in the WordPress dashboard:
Breadcrumbs are very useful for navigation and may be beneficial for SEO, but they don’t make sense for every situation. If you don’t want to use breadcrumbs on your website, you can remove them using the following code:
13. Remove Breadcrumb Options From Genesis Theme Options
If you’ve removed breadcrumbs entirely, it’s a good idea to remove the meta box that contains the theme options for breadcrumbs from the Genesis theme options menu.
The following hook and function will do that for you:
If you display a search form in your site’s header, sidebar or some other location of your choice, you may want to edit the copy that is associated with your search form.
To edit the search form label, use the following filter and function:
add_filter( 'genesis_search_form_label', 'prefix_search_form_label' );
function prefix_search_form_label ( $text ) {
return esc_attr( 'Your Search Form Label' );
}
To edit the placeholder text for your search form, use this filter and function:
add_filter( 'genesis_search_text', 'prefix_search_text' );
function prefix_search_text( $text ) {
return esc_attr( 'Your Search Form Placeholder Text' );
}
And, finally, to change the search form submit button text, use the following filter and function:
By default, Genesis displays a copyright message in the footer that links to the home pages for Genesis and WordPress. You can edit this to your liking using the following filter and function:
If you simply want to edit the entry meta, you can use this filter and function:
add_filter( 'genesis_post_info', 'prefix_post_info' );
function prefix_post_info( $post_info ) {
$post_info = 'Written on [post_date] by [post_author_posts_link]';
return $post_info;
}
If you want to see a full list of shortcodes you can use with this function, click here.
19. Remove the Entry Header Entirely
Sometimes, you may want to remove the entry header entirely. If you’re going the nuclear route like that, here’s the code:
// Remove the entry header opening and closing markup
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_open', 5 );
remove_action( 'genesis_entry_header', 'genesis_entry_header_markup_close', 15 );
// Remove the entry title
remove_action( 'genesis_entry_header', 'genesis_do_post_title' );
// Remove the entry meta
remove_action( 'genesis_entry_header', 'genesis_post_info', 12 );
// Remove the post format image
remove_action( 'genesis_entry_header', 'genesis_do_post_format_image', 4 );
20. Remove the Featured Image on Posts And Pages
Depending on your choice of Genesis theme settings, Genesis allows you to display a featured image for posts and pages. If you’d like to remove this image, use this code:
In some cases, it may make sense to add the featured image to the entry header. In order to do so and to add the image above the entry title, use this code:
If you want to add a useful “read more” link to the end of your post excerpts in place of the silly “[...]” that exists by default.
add_filter('excerpt_more', 'prefix_excerpt_more');
function prefix_excerpt_more($more) {
global $post;
return ' <a href="'. get_the_permalink($post->ID) . '">' . 'Read More' . '</a>';
}
22. Remove the Entry Content Entirely
In some cases, you may want to remove the entry content entirely. This would most commonly be used to remove post content from blog archive pages where you simply want to display a list of blog posts with entry title and featured image.
By default, Genesis lists the post categories and tags in the entry footer. If you’d like to edit what your child theme displays there, here is the filter and function you need:
You can alter nearly every single element of the Genesis comments template. Here are just a few of the most common examples.
You can alter the comments link text in your entry meta by using the following filter and function. You can set separate text for zero comments, one comment, and multiple comments:
While not technically part of your child theme, Genesis plugins can extend the functionality of your website and make it significantly easier to manage – especially if you’re not well versed in PHP.
Here’s a list of 15 of the most commonly used Genesis-related plugins.
Genesis 404 gives you a WYSIWYG editor to manage the title and content of your 404 website’s 404 page. It also allows you to select the Genesis page layout for your 404 page.
Genesis Simple Edits creates an additional Genesis options page that allows you to manage the entry meta text and links in your entry header and entry footer. It also allows you to manage the copyright text in your site footer.
If you recall the section about hooks near the top of this article, then Genesis Simple Hooks will be familiar. This plugin allows you to add HTML to any of the more than 50 structural hooks that come standard with Genesis.
WordPress allows you to create as many menus as you like through the WordPress dashboard. Genesis Simple Menus allows you to assign those menus to the “Secondary Navigation Menu” position on a per-post, per-page or per-archive basis.
This plugin is similar to Genesis Simple Menus, but, obviously, it works with sidebars instead of menus. It allows you to create as many dynamic widget areas as you like and then assign your choice of widgets to those areas on a per-post, per-page or per-archive basis.
Genesis Simple Share makes it extremely simple to add social media sharing buttons to your single posts. When you activate the plugin, the buttons will automatically show up on single posts. You can turn the buttons on or off for each post type on your website and you can designate whether the buttons should show up on your post archives.
As developer friendly as it gets, EA Share Count provides similar functionality to Genesis Simple Share. Additionally, it provides the ability to aggregate your share counts to display a total share count as well as the ability for you to place the share buttons anywhere on your site by writing some minimal PHP.
This plugin simply displays a slider with the featured image and the title of each post you designate to be in the slider. The fact that it is responsive means it will adapt and look great whether you’re on a 27-inch iMac or a 3-inch iPhone.
Genesis Layout Extras gives you the ability to designate default layouts for virtually every template on your website (home, single, page, various archives, etc.) and also supports a wide variety of templates generated by popular plugins like AgentPress, bbPress, and WooCommerce just to name a few.
Genesis offers the ability to manage SEO-related data on a site-wide basis as well as on per post, per page and per archive basis. There are a wide variety of excellent WordPress SEO plugins you may choose to leverage at some point for additional SEO control.
If you have a large number of posts and/or pages on your website, the idea of moving all of your precious SEO-related data from Genesis options to the options for your new SEO plugin can be daunting. SEO data transporter takes care of that for you.
Genesis Title Toggle might be the simplest plugin on this list. It does only one thing: It offers you the ability to choose whether or not to display the entry title on a per post and per page basis.
Genesis comes with the ability to use up to 6 columns across your page if you like. However, you’ll need to know the proper HTML to use to leverage these columns and you’ll need to be comfortable with the WordPress text-only editor in order to use them. Genesis Columns Advanced allows you to use shortcodes to manage columns in your content.
This plugin makes it simple to translate a Genesis-based website. There’s no need to mess with .mo or .po files to view your site in other languages. Just install and activate this plugin and you’re done.
Genesis Child Themes
You have a ton of information here to build your own child theme to suit your needs. With that said, there are hundreds of free Genesis child themes on the market. Here are 20 of the very best. Use one of these out of the box, or customize one to do exactly what you need to do using the tips above.
Note: While all of these Genesis child themes are free, a few of them may require you to subscribe to an email newsletter in order to gain access to download the theme.
This is the sample child theme distributed by StudioPress. While it looks nearly identical to the default Genesis theme, it is a sophisticated child theme under the hood. It comes with a plethora of cutting edge features including an accessible responsive nav menu. Use this as an advanced starting point for your next Genesis child theme build.
A Genesis child theme intended for one pages sites, though it does allow some inner pages. Simple and easy to use, with plenty of customization options.
3. Genesis Sandbox
Built for developers, Genesis Sandbox comes with a completely rebuilt stylesheet and is meant to speed up development time.
Built by Brian Gardner – the founder of StudioPress – Mobile First is a simple, elegant theme that built to be exactly what its name implies that it should be – mobile first.
Another theme from Brian Gardner, Twenty Seven Pro features a split header menu and is designed for lifestyle and food bloggers, but would look great and function well in just about any niche.
6. Minimalist Pro
Now compatible with the WordPress customizer, Minimalist Pro is another theme from Brian Gardner that allows you to customize it with just a few clicks in the WordPress dashboard. It also features a mobile-responsive accessible menu.
Rafal Tomal is the lead designer for Rainmaker Digital, the parent company of StudioPress. He created the Journal theme to house his own thoughts. He still hasn’t started an online journal, but he’s released the theme for public consumption.
Featuring a beautiful left aligned header, Journal from Imagely is a free Genesis child theme designed for bloggers. Despite the left aligned header, the theme is fully mobile-responsive.
10. Concise
Concise is designed to be a simple Genesis child theme that is free from clutter in order to in order to allow your readers to focus on your content.
Tote is a Tumblr-like Genesis child theme featuring infinite scrolling and the ability to create posts featuring different content types such as image galleries.
Another simple, elegant, single-column design makes Novo a great option for a free Genesis child theme. It also comes with the ability to showcase image galleries.
In sharp contrast to many other themes on this list, Breakpoint is a boldly designed, black and orange based free Genesis child theme to help your content stand out.
Bigg is a Genesis child theme inspired by Digg. It’s fully responsive, features a Genesis grid loop on the homepage, and offers a widgetized footer.
Final Thoughts on Genesis
Genesis is one of the most popular frameworks on WordPress. This is due to a variety of reasons, including affordability, a high level of support, and the use of child themes to protect changes. Another reason people love Genesis? You can customize so much, which is part of what we covered here.
If you are looking for a WordPress framework that will grow with your blog or online business, you can’t do any better than Genesis.
Have more questions about Genesis? Drop a comment below!