follow mejoin mesubscribe

Load a different sidebar on specific pages in the Genesis Framework

The Simple Sidebars plugin will allow you to include additional sidebar widget areas in the primary or secondary sidebar locations. However, on occasion, you may want to use a completely different sidebar on one or more of your pages.

For example, one of my clients wanted a different sidebar to appear on the blog page, archives, and single post pages.

In order to do this, you will need to:

  1. Register a new sidebar in your child theme functions.php
  2. Create a new sidebar file for your child theme
  3. Add a function to your child theme functions.php

Step 1 – Register a new sidebar in your child theme functions.php

In this example, we want to replace the Primary Sidebar with a new Primary Sidebar on the blog page, archives, and single post pages. Since these pages are “blog” related, we will name our new sidebar widget area, “Blog Sidebar”.
[placement]

// Register new sidebar
genesis_register_sidebar( array(
	'id' => 'blog-sidebar',
	'name' => 'Blog Sidebar',
	'description' => 'This is the bottom left column in the sidebar.',
) );

Name your sidebar something appropriate to where your new sidebar will be located.

Step 2 – Create a new sidebar file

Create a new file inside your child theme directory called sidebar-blog.php or another name that makes sense for where you want it to appear. Paste the following code into that file, making sure the name of the sidebar is the same as the one you registered in Step 1.

<div id="sidebar" class="sidebar widget-area">
<?php
	genesis_structural_wrap( 'sidebar' );
	do_action( 'genesis_before_sidebar_widget_area' );
	dynamic_sidebar('blog-sidebar');
	do_action( 'genesis_after_sidebar_widget_area' );
	genesis_structural_wrap( 'sidebar', 'close' );
?>
</div>

Note: You can have any number of sidebar-xxx.php files, but make sure to include the prefix “sidebar-” in the name. For example:

  • sidebar-page.php
  • sidebar-single.php
  • sidebar-home.php

Step 3 – Add a function to your child theme functions.php

add_action( 'get_header', 'child_sidebar_logic' );
/**
 * Swap in a different sidebar instead of the default sidebar.
 * 
 * @author Jennifer Baumann
 * @link http://dreamwhisperdesigns.com/?p=1034
 */
function child_sidebar_logic() {
	if ( is_page_template( 'page_blog.php' ) || is_archive() || is_single() ) {
		remove_action( 'genesis_after_content', 'genesis_get_sidebar' );
		add_action( 'genesis_after_content', 'child_get_blog_sidebar' );
	}
}

/**
 * Retrieve blog sidebar
 */
function child_get_blog_sidebar() {
	get_sidebar( 'blog' );
}

Code Explanation

To break it down some, the following line from the code above will conditionally execute the subsequent code on the blog page template, archive pages, and single post pages. (Read more on using Conditional Statements)

	if ( is_page_template( 'page_blog.php' ) || is_archive() || is_single() ) {

This line removes the standard sidebar (See additional notes at the end of this tutorial):

	remove_action( 'genesis_after_content', 'genesis_get_sidebar' );

This line adds your custom sidebar:

        add_action('genesis_after_content', 'child_get_blog_sidebar');

This code says which sidebar to retrieve:

function child_get_blog_sidebar() {
      get_sidebar( 'blog' );
}

So, if you named your new sidebar file sidebar-page.php, your code would look like:

function child_get_blog_sidebar() {
      get_sidebar( 'page' );
}

Note: the most common problem people have in getting this to work is choosing conditionals or forgetting to create the sidebar-xxx.php file in the child theme.

Bonus Tip

Some themes include bottom sidebars that you may want to remove from under your new sidebar. To remove them from under your new sidebar, but leave them under your original sidebar, use the following code (generally applies to older StudioPress themes):

add_action( 'get_header', 'child_sidebar_logic' );
/**
 * Remove Lifestyle bottom sidebars, and swap in a different sidebar instead of
 * the default sidebar.
 * 
 * @author Jennifer Baumann
 * @link http://dreamwhisperdesigns.com/?p=1034
 */
function child_sidebar_logic() {
	if ( is_page_template( 'page_blog.php' ) || is_archive() || is_single() ) {
		remove_action('genesis_after_sidebar_widget_area', 'lifestyle_include_bottom_sidebars'); 
		remove_action( 'genesis_after_content', 'genesis_get_sidebar' );
		add_action( 'genesis_after_content', 'child_get_blog_sidebar' );
	}
}

/**
 * Retrieve blog sidebar
 */
function child_get_blog_sidebar() {
	get_sidebar( 'blog' );
}

You can also use the same process to create new bottom sidebars for under your new sidebar.


Please note this tutorial is old and there are much better ways of doing this. At some point when I have time, I’ll rewrite it.

About Jennifer Baumann

I am an avid horseback rider, animal lover, and freelance designer. I love working with WordPress and Genesis and work for Copyblogger Media as a Technical Support Advocate.

Trackbacks

  1. […] home page is often a desired look. This tutorial will be similar to Jen Baumann’s tutorial How to Show a Different Sidebar on Specific Pages only specific to the home page. One other sidebar quick tip, if your looking for unique sidebars […]

Dream Whisper Designs is Powered by Genesis

StudioPress Premium WordPress Themes

Genesis empowers you to quickly and easily build incredible websites with WordPress. Whether you're a novice or advanced developer, Genesis provides the secure and search-engine-optimized foundation that takes WordPress to places you never thought it could go. It's that simple - start using Genesis now!

Take advantage of the 6 default layout options, comprehensive SEO settings, rock-solid security, flexible theme options, cool custom widgets, custom design hooks, and a huge selection of child themes ("skins") that make your site look the way you want it to. With automatic theme updates and world-class support included, Genesis is the smart choice for your WordPress website or blog.