Create a WordPress Theme With Genesis

The Genesis Framework for WordPress provides a solid foundation for creating a custom theme. Unfortunately, it can appear complicated on the surface, scaring off users who might otherwise benefit from it. 

Working from a framework is a common approach for many WordPress developers. It offers users the flexibility to create a custom theme while incorporating key functionality to avoid jeopardizing your sites’ stability. 

In this article, we’ll go over what the Genesis Framework is and how to create themes with it. We’ll also discuss some of the benefits of this particular tool. Let’s dive right in!

What Is the Genesis Framework? 

The Genesis Framework includes all of the Search Engine Optimization (SEO), security, and performance features a high-quality theme needs. It’s used in conjunction with a child theme (one you custom code or a pre-built option), which provides front-end styling and functionality.

Our framework is by far the most popular available for WordPress, with over 600,000 websites using themes created with it. As a developer, you can build child themes to use with Genesis, and continue to update the framework without fear of causing errors on your site.

The Benefits of Developing With the Genesis Framework

Genesis speeds up development by enabling you to focus on front-end features and styling, while the framework handles the back-end functionality for you. It also uses callbacks to WordPress actions and filter functions through hooks, enabling you to create a dynamic theme with custom code.

In addition to its understandable file structure and solid base code, Genesis is backed by a helpful team of developers. You can join the Genesis Community Forum or take advantage of the Genesis Slack channel whenever you have a question. As always, WP Engine is here for you with our excellent support options as well. 

How to Create a WordPress Theme With Genesis 

Now that you know more about Genesis and the benefits of developing with it, we’ll walk you through five steps to help you create a theme using this framework. 

Step 1: Install and Activate the Genesis Framework

Installing the Genesis Framework is not much different from installing an ordinary theme in WordPress. However, keep in mind that you’ll be working with both the framework and a child theme. 

The Genesis Framework should be saved in the wp-content > themes folder on your server. You can upload it there via File Transfer Protocol (FTP) with an FTP client such as FileZilla, or use WordPress’ built-in theme installer.

We recommend the latter method. First, download the .zip file for the Genesis Framework. Then navigate to Appearance > Themes in your admin dashboard and click on the Add New button: 

Next, click on the Choose File button and search your computer for the .zip file you downloaded. Once it’s selected, click on Install Now:

This is as far as you need to go in the normal theme installation process. There’s no need to activate the Genesis Framework. It will instead run in the background as the base structure of your child theme.

Step 2: Create Your Child Theme

If you’re simply working to create a custom theme for your own WordPress site, you might consider using an existing Genesis child theme by StudioPress. You can upload it to your site in the same manner described above, and then use the Customizer to make it your own.

However, if you want to build your own child theme, you’ll need to set up its files yourself. To do so, access your server using either the file manager in your hosting account or FTP.

In your public_html directory, navigate to wp-content > themes. There, add a subdirectory and title it with your new theme’s name:

Then, use your preferred text editor to create functions.php and style.css files. Save each of them to your new subdirectory: 

Then you’ll need to edit each to include some basic information, starting with functions.php. This file defines your theme’s default behaviors. Start it off with some standard documentation: 

<?php

/**
 * Theme customizations
 *
 * @package      Custom_Theme
 * @author       Your Name
 * @link         https://linktocode.com
 * @copyright    
 * @license      
 */

Here you can name your theme, document where users can find the code, and list yourself as the author.

Next, you need to tell your child theme to reference the Genesis Framework. You can do this with an action hook like so: 

add_action( 'genesis_setup', 'custom_setup',15);

Then, flesh the rest of this file out with other hooks and filters to incorporate key functionalities your theme needs. Make sure to enqueue your stylesheet here as well.

Step 3: Customize Your Child Theme’s Functionality With Hooks

There are many possibilities to explore when it comes to adding hooks to your functions.php file. They can accomplish a number of things, from creating new widget areas, to placing optional ad content, or even changing the base structure of your site. 

To help get a better idea of how hooks influence the Genesis Framework, you may want to look into the Visual Hook Guide: 

This handy resource will show you which hooks to use to influence certain areas of your site. You may also want to consult the WordPress Hooks Database or scan the functions.php files of other themes you like for ideas. 

Step 4: Use CSS to Add Custom Styling to Your Child Theme

Once you establish your theme’s default behaviors in the functions.php file, you can move on to style.css. This is where you’ll spell out the parameters for colors, fonts, and other design-related elements of your theme. 

For example, this snippet defines the color, font, spacing, and margins of the site’s body text:

body {
 color: #222;
 font-family: Roboto, sans-serif;
 font-size: 18px;
  font-weight: 400;
 line-height: 1.625;
 margin: 0;
}

CSS can also be used to style Genesis Framework-specific elements, such as navigation menus: 

.genesis-nav-menu {
 clear: both;
 font-size: 16px;
 line-height: 1;
 width: 100%;
}

You can see in this example that the ‘nav-menu’ element belongs specifically to Genesis. Editing CSS is pretty approachable, even for a novice coder. Making subtle changes to your child theme is a good way to practice and better understand how it works alongside the framework. 

Step 5: Review the Result With Your Client or Publish It On Your Site

Since you’re working with a framework, you shouldn’t need to worry about theme template files such as index.php. However, especially if you hope to submit your theme to the WordPress Directory, you’ll still want to familiarize yourself with the required files.

Once you’ve completely customized your new theme, review the final product with your client or a peer. We recommend developing your theme in a staging environment as well, so you can test your changes without disrupting your live site. 

If everything checks out, you can return to your WordPress dashboard and navigate to Appearance > Themes. If your child theme is saved on your server correctly, it should be listed here. Simply click on Activate to publish it to your site. 

To distribute your theme, package its files in a .zip file. Then follow the instructions for submitting your theme to WordPress.org. 

Where to Install the Genesis Framework On Your Server

As we’ve explained, you can install Genesis with an FTP client such as FileZilla. However, there are a few things to keep in mind when doing so: 

• Don’t activate it. Once you install the Genesis parent theme, you do not need to activate it. If you’re using a compatible child theme, you’ll install and activate that after your framework is in place. 
• Use the correct file name. When you install Genesis as a parent theme, you need to make sure the folder that contains the framework is named correctly. The parent theme will live in the wp-content > themes directory and must be in a folder labeled genesis. 
• Don’t nest folders. If you’re using FTP to load your framework, make sure the parent and child themes are not nested in any way. They need to be saved in separate folders in the themes directory. 

Even if you use the WordPress theme installer in your site dashboard, you might want to check your file directories to make sure everything is where it needs to be for optimal functionality. 

More from Genesis and WP Engine

Building your own custom WordPress theme doesn’t have to be scary. With the Genesis Framework and WP Engine, you can take your website or WordPress development business to new heights. 

We love to support innovative WordPress professionals. That’s why we share some of the best resources for users and developers. Plus, with WP Engine’s top-notch hosting platform, you can create incredible digital experiences for your customers. Check out our plans today!