{"id":94302,"date":"2019-10-14T10:09:03","date_gmt":"2019-10-14T15:09:03","guid":{"rendered":"https:\/\/wpengine.com\/?post_type=resource&p=94302"},"modified":"2022-02-08T10:06:12","modified_gmt":"2022-02-08T16:06:12","slug":"create-theme-with-genesis","status":"publish","type":"resource","link":"https:\/\/wpengine.com\/case-studies\/resources\/create-theme-with-genesis\/","title":{"rendered":"Create a WordPress Theme With Genesis"},"content":{"rendered":"\n

The Genesis Framework<\/a> 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. <\/p>\n\n\n\n

Working from a framework<\/a> 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\u2019 stability. <\/p>\n\n\n\n

In this article, we\u2019ll go over what the Genesis Framework is and how to create themes with it. We\u2019ll also discuss some of the benefits of this particular tool. Let\u2019s dive right in!<\/p>\n\n\n\n

What Is the Genesis Framework? <\/h2>\n\n\n\n

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

Our framework is by far the most popular<\/a> 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.<\/p>\n\n\n\n

The Benefits of Developing With the Genesis Framework<\/h2>\n\n\n\n

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<\/a> and filter functions<\/a> through hooks, enabling you to create a dynamic theme with custom code.<\/p>\n\n\n\n

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<\/a> or take advantage of the Genesis Slack channel<\/a> whenever you have a question. As always, WP Engine is here for you<\/a> with our excellent support options as well. <\/p>\n\n\n\n

How to Create a WordPress Theme With Genesis <\/h2>\n\n\n\n

Now that you know more about Genesis and the benefits of developing with it, we\u2019ll walk you through five steps to help you create a theme using this framework. <\/p>\n\n\n\n

Step 1: Install and Activate the Genesis Framework<\/h3>\n\n\n\n

Installing the Genesis Framework is not much different from installing an ordinary theme<\/a> in WordPress. However, keep in mind that you\u2019ll be working with both the framework and a child theme. <\/p>\n\n\n\n

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

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

Next, click on the Choose File<\/em> button and search your computer for the .zip<\/em> file you downloaded. Once it\u2019s selected, click on Install Now<\/em>:
<\/p>\n\n\n\n

This is as far as you need to go in the normal theme installation process. There\u2019s no need to activate the Genesis Framework. It will instead run in the background as the base structure of your child theme.<\/p>\n\n\n\n

Step 2: Create Your Child Theme<\/h3>\n\n\n\n

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

However, if you want to build your own child theme, you\u2019ll need to set up its files yourself. To do so, access your server using either the file manager in your hosting account or FTP.<\/p>\n\n\n\n

In your public_html<\/em> directory, navigate to wp-content > themes.<\/em> There, add a subdirectory and title it with your new theme\u2019s name:<\/p>\n\n\n\n

Then, use your preferred text editor to create functions.php<\/em> and style.css<\/em> files. Save each of them to your new subdirectory: <\/p>\n\n\n\n

Then you\u2019ll need to edit each to include some basic information, starting with functions.php<\/em><\/a>. This file defines your theme\u2019s default behaviors. Start it off with some standard documentation<\/a>: <\/p>\n\n\n\n

<?php\n\n\/**\n * Theme customizations\n *\n * @package      Custom_Theme\n * @author       Your Name\n * @link         https:\/\/linktocode.com\n * @copyright    \n * @license      \n *\/<\/pre>\n\n\n\n
Here you can name your theme, document where users can find the code, and list yourself as the author.<\/p>\n\n\n\n
Next, you need to tell your child theme to reference the Genesis Framework. You can do this with an action hook like so<\/a>: <\/p>\n\n\n\n
add_action( 'genesis_setup', 'custom_setup',15);<\/pre>\n\n\n\n
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<\/a> here as well.<\/p>\n\n\n\n
Step 3: Customize Your Child Theme\u2019s Functionality With Hooks<\/h2>\n\n\n\n
There are many possibilities to explore when it comes to adding hooks to your functions.php<\/em> 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. <\/p>\n\n\n\n
To help get a better idea of how hooks influence the Genesis Framework, you may want to look into the Visual Hook Guide<\/a>: <\/p>\n\n\n\n
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<\/a> or scan the functions.php<\/em> files of other themes you like for ideas. <\/p>\n\n\n\n
Step 4: Use CSS to Add Custom Styling to Your Child Theme<\/h2>\n\n\n\n
Once you establish your theme\u2019s default behaviors in the functions.php<\/em> file, you can move on to style.css<\/em>. This is where you\u2019ll spell out the parameters for colors, fonts, and other design-related elements of your theme. <\/p>\n\n\n\n
For example, this snippet<\/a> defines the color, font, spacing, and margins of the site\u2019s body text:<\/p>\n\n\n\n
body {\n color: #222;\n font-family: Roboto, sans-serif;\n font-size: 18px;\n  font-weight: 400;\n line-height: 1.625;\n margin: 0;\n}<\/pre>\n\n\n\n
CSS can also be used to style Genesis Framework-specific elements, such as navigation menus: <\/p>\n\n\n\n
.genesis-nav-menu {
 clear: both;
 font-size: 16px;
 line-height: 1;
 width: 100%;
}<\/pre>\n\n\n\n
You can see in this example that the \u2018nav-menu\u2019 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. <\/p>\n\n\n\n
Step 5: Review the Result With Your Client or Publish It On Your Site<\/h3>\n\n\n\n
Since you\u2019re working with a framework, you shouldn\u2019t need to worry about theme template files<\/a> such as index.php.<\/em> However, especially if you hope to submit your theme to the WordPress Directory, you\u2019ll still want to familiarize yourself with the required files<\/a>.<\/p>\n\n\n\n
Once you\u2019ve completely customized your new theme, review the final product with your client or a peer. We recommend developing your theme in a staging environment<\/a> as well, so you can test your changes without disrupting your live site. <\/p>\n\n\n\n
If everything checks out, you can return to your WordPress dashboard and navigate to Appearance > Themes<\/em>. If your child theme is saved on your server correctly, it should be listed here. Simply click on Activate<\/em> to publish it to your site. <\/p>\n\n\n\n
To distribute your theme, package its files in a .zip<\/em> file. Then follow the instructions for submitting your theme to WordPress.org<\/a>. <\/p>\n\n\n\n
Where to Install the Genesis Framework On Your Server<\/h2>\n\n\n\n
As we\u2019ve 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: <\/p>\n\n\n\n