A Detailed Guide To Building a WordPress Theme Using Genesis

WordPress-theme-developmentAs a WordPress developer, you’ll be required to build WordPress themes quite often. However, building countless themes from scratch becomes monotonous and you may lose interest in it. Thankfully, a WordPress theme framework can help in making the theme development process a lot easier. In fact, theme frameworks are becoming quite popular for building themes. That’s because, such frameworks enable to perform rapid development, according to best practices, without having to reinvent the wheel whenever you need to design a new WordPress theme.

Finding a suitable WordPress theme framework out of the available options can be an overwhelming task. In this post, I will show you how you can build a WordPress theme from scratch using the Genesis Framework. But before proceeding any further, let’s first have a look at the Genesis Framework, and other key aspects you need to become familiar about when building a WordPress theme using Genesis.

The Genesis Framework: An Insight

You’ve probably heard of the Genesis framework quite often when it comes to developing a website in WordPress. The Genesis Framework is designed by StudioPress, empowering you to build WordPress website in a quick and easy manner. Most importantly, it is created to be used with child theme – whether you want to use a theme offered by StudioPress or would like to create your own custom theme depends on your personal preference.

So, why you need to create a child theme anyways?

It is recommended that you must use a child theme instead of making changes directly to your original (parent) theme. Here are 2 major reasons that will make you understand the purpose behind using a child theme:

  • A child theme serves as a different theme that keeps your specific customizations. And so, you can easily find what’s going wrong in your theme quickly without having to dig deep through a pile of code to figure out the problem with your theme. Moreover, you won’t have to worry about losing your work when the parent theme is being updated.
  • Lastly, in case your parent theme remains the same, then the code you’ve written for a single project can be reused for your future projects as well.

The Genesis framework has become the industry standard for developing WordPress themes. Here are some of the biggest reasons as to why you should consider using the Genesis Framework for building a WordPress theme:

  • Help Make Updates Without Breaking Your Site: The biggest benefit of using the Genesis framework is that enable to make updates to your site without losing your customizations. This is because instead of modifying the framework, you need to make customizations to the child theme. Thus, the changes you’ve made in the update won’t affect the look and feel of your website.
  • It’s Search Engine Optimized: To ensure the success of your site, it is important that it must rank well in the search engines. This will ensure that your customers can easily find you. In order to attain high rankings, your website design must contain clean and optimized code. And, all of the Genesis themes contains fully-optimized code, making them optimized for search engines.
  • Better Support: The Genesis framework is being taken care of by a group of developers belonging to StudioPress. The developers continuously update the framework based on best coding practices and the latest WordPress version. Moreover, in case you encounter any problem while using Genesis, you can ask for solutions from the experts in the Genesis community.
  • Provides Responsive Designs Built on HTML5: The Genesis framework help in delivering beautiful and professional responsive designs based on HTML5, without having to spend a dime.
  • Enhanced Security: One of the major concern that most of the WordPress users have been that WordPress sites are vulnerable to attacks. If your site is hacked, then it can prove an expensive deal for you – and can tarnish your reputation. And so, it’s you must create a theme that is protected against hacking attempts. Since Genesis themes are built using the WordPress security best practices, you no longer would have to worry about taking up measures to protect your site.
  • Help Update Your Site Instantly: A lot of websites becomes vulnerable to attack because they’re not being updated. Site owners often don’t bother updating their site, since the update process sounds complicated to them. In fact, several WordPress users even spend hours, days or even weeks in getting a problem fixed – that was caused due to updating the site. But, Genesis help in updating your WordPress site a snap.

If the above-listed benefits have convinced you to use the Genesis framework for building your WordPress theme, then let us now look at a few important concepts that you should become familiar with for creating a fully-functional WordPress theme.

Getting Familiar With Genesis Hooks

In order to add functionality in your child theme, you’ll have to write code that will be added in the theme’s functions.php file. But, before that you must learn about the two crucial parts of the function, namely: hook and filter.

You most likely have heard of hooks – they are used in all WordPress powered sites. Genesis hooks are also the same irrespective of what child theme you’re using. If you want to apply some changes to your child theme, then it is very important for you to become familiar with the concept of hooks.

Hooks are basically a piece of code built in Genesis that helps in making structural changes, add new widgets and help sin placing particular ads to your site. The benefit of using hooks in Genesis is that they make it a lot easier in moving only the essential amount of code from the parent theme to our child themes.

In a nutshell, “Genesis hooks” allows to manipulate the elements of the child theme. For example: when you’ll have a look at the Genesis header.php file (i.e. located in /genesis/header.php), you will see the below line of code:

do_action( ‘genesis_after_header’ );

This hook gives you the ability to make changes to the navigation menu in Genesis.

Hooks is of two types: actions hooks and filter hooks. While an action hook enables you to execute code at a certain location, on the other hand, a filter hook helps in manipulating the information that is used by a child theme.

Let’s take an example, in the below code snippet “excerpt_length” is a filter that lets you manipulate the amount of text to be displayed in your theme, when you use the_excerpt() function in your theme:

function the_excerpt_length( $length ) {

$length = ’35’;

return $length;

}

add_filter( ‘excerpt_length’, ‘the_excerpt_length’ );

Example: Demonstrating How to Build a WordPress (Child) Theme Using Genesis

So, now that you’ve come to know about the use of hooks in Genesis, let us understand the process of creating a child theme using the Genesis framework. Below is a step-by-step guide that you need to follow for building a WordPress child theme from scratch:

Step 1 – Install WordPress and Genesis

First and foremost, you’ll have to install WAMP or MAMP on your computer to run WordPress locally. Once the installation is complete and your WordPress install is up and running, begin installing your Genesis theme framework along with your child theme. For doing so, you need to install the Genesis framework from the StudioPress website. Since it is a premium product it needs to be purchased before you download the framework.

You will obtain the Genesis framework copy immediately after making the purchase.  Unzip that copy and save it within “/themes/folder” which you can find in “/wp-content/” surrounded by your other WordPress files. You don’t have to touch that folder again, as all your theme changes will go in your child theme.

if you wish to rename the child theme to something you like, make sure to change the folder name, edit the stylesheet (i.e. style.css) and the functions.php. Although, you can choose to write a new stylesheet for your WordPress website from the ground up, but in my case I’ll be customizing the default Genesis theme.

So, your next step must be to download the default Genesis theme. For this purpose, from your WordPress install admin dashboard screen, move to Appearance → Themes. And then, hit the Add New button:

Guide To Building a WordPress Theme Using Genesis

This will open up the following window:Install theme

Click the “Upload” option and then click the “Choose File” button.Install a theme

Hit the “install now” button to start the installation process of the Genesis framework.

Install a theme

Finally, click on the link “Return to Themes page”, as shown in the image below:Installing WordPres theme

Step 2 – Create the Child Theme

Next, you need to create a child theme just like you, create any WordPress child theme. I am creating a child theme named as “genesis child”, however, you can change the name to anything you like. Next, a folder needs to be created with the same name as your child theme, i.e. genesis child. Save the folder in the path “/wp-content/themes” together with a style.css file containing the following content:

/*

Theme Name: Genesis Child Theme

Description: Child theme of Genesis, by StudioPress.

Author: Anonymous

Author URI: http://www.example.com

Template: genesis

*/

/* Stylesheet from Genesis 2.1.2  */

Once you’re done with the CSS file, let us now see the changes that need to be made to the functions.php. This file is important for your child theme, as it helps in adding features and functionality to the theme like the parent Genesis theme. In fact, all the actions and filter hooks are widely-used by Genesis are being added within the functions.php file.

You can structure the functions.php file in several ways. But remember that, you need to load Genesis core files prior to making customizations. That’s because, Genesis theme can’t be customized unless it has been loaded.

When you’ll take a closer look at the child themes offered by StudioPress, you will notice that most of them starts with:

/** Start the engine */

include_once( get_template_directory() . ‘/lib/init.php’ );

While the above approach works, however, I prefer another approach to set up the Genesis child theme with functions. This approach requires using a Genesis action known as genesis_setup, and requires creating a function that allows loading all the functions of the child theme once all the functions of the parent theme have been loaded.

Here’s a code snippet that will create a setup function for our child theme – that helps attach my own functions to the actions and filters using the following code:

<?php

/**

* Functions

*

* @package Genesis\Templates

* @author  StudioPress

* @copyright    Copyright (c) 2011, Bill Erickson

* @license GPL-2.0+

*

*/

/**

* Theme Setup

*

* This setup function attaches all of the site-wide functions

* to the correct actions and filters. All the functions themselves

* are defined below this setup function.

*

*/

add_action(‘genesis_setup’,’child_theme_setup’, 15);

function child_theme_setup() {

}

So, now that you’ve made the required changes to the style.css and functions.php file, login into your WordPress dashboard navigate to Appearance → Themes. And, from there activate your child theme.

Step 3 – Customize Your Child Theme

Once you’ve successfully activated your child theme, you may find that nothing has changed. Simply put: you will find that your child theme is blank, however, you can add custom features and functionality to the theme by performing some simple fixes. Below is a list of few things we’ll do:

  1. Make Changes to the Theme Settings

Genesis gives the ability to control your website features via the WordPress backend, without having to write any code. So, you’ll have to make all the changes you want to make to your site in the backend before writing code.

In order to update your theme settings, move to Genesis → Theme Settings in your WordPress install admin dashboard screen:Genesis-theme

Next, look out the option for the header. Once you’ve located the “Header” section, select “Image Logo” corresponding to the option “Use for site title/logo”, as follows:Installing genesis theme

Since I haven’t uploaded any logo yet, after saving the changes and refreshing the page, you won’t find any title or description on the homepage of your child theme:Hello World

  1. Create the navigation menu

In order to build your own navigation menu, go to Appearance → Menus, and create two menus such as Primary and Secondary menus. And then, add correct links to both the menus. Next, I am creating a function that will stick these menus in the header using the following code snippet that needs to be added in the functions.php (without any comments at the top):

add_action(‘genesis_setup’,’child_theme_setup’, 15);

function child_theme_setup() {

// Add Nav to Header

add_action( ‘genesis_header’, ‘be_nav_menus’ );

}

/**

* Add Nav Menus to Header

*

*/

function be_nav_menus() {

echo ‘<div class=”menus”><div class=”primary”>’;

wp_nav_menu( array( ‘menu’ => ‘Primary’ ) );

echo ‘</div><!– .primary –><div class=”secondary”>’;

wp_nav_menu( array( ‘menu’ => ‘Secondary’ ) );

echo ‘</div><!– .secondary –></div><!– .menus –>’;

}

  1. Setup the content area in your theme’s homepage

Here’s the code that will help in setting up the content area on the homepage of the child theme:Hello World

<?php

/**

* Front Page

*

* @package Genesis\Templates

* @author  StudioPress

* @copyright    Copyright (c) 2011

* @license GPL-2.0+

*

*/

// Force full width

add_filter( ‘genesis_pre_get_option_site_layout’, ‘__genesis_return_full_width_content’ );

// Remove Page Title

remove_action( ‘genesis_post_title’, ‘genesis_do_post_title’ );

// Add Rotator

add_action( ‘genesis_after_header’, ‘be_home_rotator’ );

/**

* Rotator

*

*/

function be_home_rotator() {

do_action( ‘home_rotator’ );

}

// Content Area

remove_action( ‘genesis_loop’, ‘genesis_do_loop’ );

add_action( ‘genesis_loop’, ‘be_home_loop’ );

/**

* Home Content Area

*

*/

function be_home_loop() {

echo ‘<div class=”left-content”>’;

while( have_posts() ): the_post();

the_content();

endwhile;

echo ‘</div><!– . left-content –>’;

echo ‘<div class=”middle-content”>’;

echo ‘<h2>Latest Blog</h2>’;

$blog = new WP_Query(‘posts_per_page=5’);

while ($blog->have_posts()): $blog->the_post(); global $post;

echo ‘<div class=”blog-item”>’;

echo ‘<div class=”image-cont”><a href=”‘ . get_permalink() . ‘”>’ . get_the_post_thumbnail( $post->ID, ‘thumbnail’ ) . ‘</a></div>’;

echo ‘<div class=”content-main”><span class=”date”>’ . get_the_date() . ‘</span><a href=”‘ . get_permalink() . ‘”>’ . get_the_title() . ‘</a></div><!– .content-main –>’;

echo ‘</div><!– .blog-item –>’;

endwhile; wp_reset_query();

echo ‘</div><!– . middle-content –>’;

echo ‘<div class=”right-content”>’;

dynamic_sidebar( ‘home-sidebar’ );

?>

<div class=”events-links”>

<div class=”entry-head”>

<p class=”col-1″><Main Events</p>

<p class=”col-2″>Favourite Links</p>

</div><!– /entry-head –>

<div class=”entry-content”>

<?php

$args = array(

‘post_type’ => ‘event’,

‘posts_per_page’ => ‘7’,

‘orderby’ => ‘ASC’,

‘order’ => ‘meta_value_num’,

‘meta_query’ => array(

array(

‘key’ => ‘be_events_manager_end_date’,

‘value’ => time(),

‘compare’ => ‘>’

)

)

);

$events = new WP_Query( $args );

if( $events->have_posts() ):

echo ‘<ul class=”col-1″>’;

while ( $events->have_posts() ): $events->the_post();

echo ‘<li><a href=”‘ . get_permalink() . ‘”>’ . get_the_title() . ‘</a></li>’;

endwhile; wp_reset_query();

echo ‘</ul>’;

endif;

?>

<ul class=”col-2″>

<?php

$args = array(

‘limit’ => -1,

‘title_li’ => ”,

‘category’ => 3,

‘categorize’ => 0

);

wp_list_bookmarks( $args ); ?>

</ul>

<div class=”cl-4″> </div>

</div>

</div>

</div>

<?php

}

genesis();

?>

Below code snippet will modify the child_theme_setup() function (that was added in the functions.php), so as to register the new sidebar.

add_action(‘genesis_setup’,’child_theme_setup’, 15);

function child_theme_setup() {

// ** Backend **

// Remove Metaboxes

add_action( ‘genesis_theme_settings_metaboxes’, ‘be_remove_metaboxes’ );

// Add Home Sidebar

genesis_register_sidebar( array( ‘name’ => ‘Home Sidebar’, ‘id’ => ‘home-sidebar’ ) );

// ** Frontend **

// Add Nav to Header

add_action( ‘genesis_header’, ‘be_nav_menus’ );

}

  1. Set up the footer area

Lastly, let us customize the footer section of the theme. Here’s a code snippet that will help add a copyright message in the footer are of the child theme:

/**

* Footer

*

*/

function be_footer() {

echo ‘<div class=”copyright”><p>© Copyright ‘ . date(‘Y’) . ‘ : All Rights Reserved</p></div>’;

echo ‘<div class=”footer-menu”>’;

wp_nav_menu( array( ‘menu’ => ‘Footer’ ) );

echo ‘</div>’;

}

And then, add the following code in your child_theme_setup() function:

            // Footer

remove_action( ‘genesis_footer’, ‘genesis_do_footer’ );

add_action( ‘genesis_footer’, ‘be_footer’ );

Summing Up!

Have you been thinking of building a WordPress website from the ground up? Well, in that case using the Genesis framework will help you make the website development process a lot easier and blazingly fast. Genesis makes use of a child theme for developing a WordPress site.

Though, setting up a Genesis child theme on your own may seem intimidating, but in reality, it is pretty easy. Keep in mind that you’ll require mainly two files to create a child theme, such as style.css and functions.php file. Besides this, you need to become familiar with the concept of hooks and filters, to customize your theme’s functionality.

Author Bio:

Sophia Phillips has been working as a professional in WordPress theme customization company and loves sharing information about leveraging multiple benefits of WordPress CMS in the best possible manner. Currently, she has an impressive count of WP web development-related articles under her name.

Leave a Reply

RECENT COMMENTS

    ADDRESS:

    No 20 Nnobi Street, Lagos .
    Phone: 0803 339 8769
    W: www.sweetorange.com.ng
    E: info@sweetorange.com.ng