The Genesis Framework is probably the most designer and developer friendly WordPress theming framework for WordPress.
Genesis makes it easy to change the look and feel of your site with little code. Changing layouts and adding sidebars are easy. In this tutorial, I’m going to show you how to register custom sidebars Genesis style.
What is a Sidebar?
A sidebar a standard WordPress theme feature (since WordPress 2.2) that provides content that is aside from the main content of the page. They usually come with widgetized areas for administrators to add in widgets. Sidebars can technically be called anywhere on the page.
Requirements:
There are a few basic requirements to follow this guide. First is a knowledge of HTML, CSS, and a basic understanding of PHP, especially includes. You should be using a decent text editor, I recommend Sublime Text 2. I also recommend a live site to use as a sandbox for changes.
This segments production environments from development environments, minimizing security risks. If you don’t already have a host check out Who Is Hosting This to find reviews on leading web hosts.
Step 1: Register a sidebar in a new child theme
All style and functionality of the Genesis Framework is altered through a child theme. This ensures forward compatibility and the inheritance of all the great features of genesis itself provides.
The first thing we need to do is register a new sidebar. In Genesis, this is easy, just add this to your child theme’s functions.php:
[code]
//Register the new sidebar
genesis_register_sidebar( array(
‘id’ => ‘custom-sidebar’,//name this whatever makes sense
‘name’ => ‘Custom Sidebar’,
‘description’ => ‘This is a custom sidebar that we’re adding to Genesis’,
) );
[/code]
Explanation: This registers a sidebar in Genesis with the required parameters.
Step 2: Make the sidebar file
Now that the sidebar is registered, we need to give it a place to call home. You should place this new file in your child theme directory. In this case we’ll call it sidebar-single.php (name it in accordance to where you would like the sidebar to appear).
Then write the contents of the sidebar file:
[code]
<div class="sidebar widget-area"></div>
genesis_structural_wrap( ‘sidebar’ );
do_action( ‘genesis_before_sidebar_widget_area’ );
dynamic_sidebar(‘custom-sidebar’);
do_action( ‘genesis_after_sidebar_widget_area’ );
genesis_structural_wrap( ‘sidebar’, ‘close’ );
?>
</div>
[/code]
Explanation: This is the actual sidebar include file, we structure the code and make it a widgetized area.
Step 3: Adding the function to call the sidebar
Now that the sidebar is registered and the file is set up it now needs to be called into your child theme. We can do this through functions and Genesis hooks. We will need to swap the default sidebar with our custom sidebar on single pages. We will do this with conditional logic.
Add this to your functions.php:
[code]
add_action( ‘get_header’, ‘child_sidebar_swap’ );
function child_sidebar_swap() {
if( is_single() ) {
remove_action( ‘genesis_after_content’, ‘genesis_get_sidebar’ );
add_action( ‘genesis_after_content’, ‘child_get_single_sidebar’ );
}
}
function child_get_single_sidebar() {
get_sidebar( ‘custom-sidebar’ );
}
[/code]
Explanation: This is a little more confusing. The first line creates the Genesis Hook. The first function then removes the default sidebar adds a new sidebar (hook) which then calls the next function; child_get_single_sidebar.
This function then simply calls the custom sidebar.
Now the easy way:
Now that you understand how to remove the default sidebar in Genesis and register a new one conditionally in your child theme, i’m going to show you the easy (or lazy) way to do this. There is a nifty plugin made for the Genesis Framework called Genesis Simple Sidebars. This plugin will allow you to register new sidebars (with widget areas) and assign them to any post, page, archive, or any other template of your choice. Depending on how you code and other constraints, this may be a good solution.
Conclusion:
With the Genesis Framework, it is easy to create custom sidebars. Getting more advanced, you can use conditional statements to target different templates for surgical control over your child theme.
Now go try it yourself, don’t be shy. Whether you’re coding custom or functions or using the Genesis Simple Hooks plugin customizing sidebars has never been easier.
1 Comment