A unique looking 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 elsewhere on the site you can also try Genesis Simple Sidebars plugin (which does not work for the home page).
In order to accomplish this, you will need to:
- Register a new sidebar in your child theme functions.php
- Create a new sidebar file for your child theme
- 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 home page. Since these pages are home page related, we will name our new sidebar widget area, “Home Sidebar”.
[cc]// Register a new sidebar
genesis_register_sidebar( array(
‘id’ => ‘home-sidebar’,
‘name’ => ‘Home Sidebar’,
‘description’ => ‘This is the home sidebar widget area.’
) );[/cc]
Make sure that you name your sidebar something appropriate to where your new sidebar will be located.
Step 2 – Create a new file inside your child theme directory called sidebar-home.php
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.
[cc]
[/cc]
Step 3 – Add a function to your child theme functions.php
[cc]add_action( ‘get_header’, ‘child_sidebar_logic’ );
/**
* Add Home Sidebar
*
* @author Brian Lis
* @link http://dev.studiopress.com/add-unique-sidebar-to-home-page.htm
*/
function child_sidebar_logic() {
if ( is_home() ) {
remove_action( ‘genesis_after_content’, ‘genesis_get_sidebar’ );
add_action( ‘genesis_after_content’, ‘child_get_home_sidebar’ );
}
}
/**
* Retrieve our unique home page sidebar.
*/
function child_get_home_sidebar() {
get_sidebar( ‘home-sidebar’ );
}[/cc]
Dan Bonomo says
Hey, thanks for a clearly written tutorial. I’m having trouble getting this to display my widget content on the home page though. I’m using the Education child theme, and I don’t see the widget contents show up. Any Ideas??
Brian says
Dan first question is are you using the Genesis version of the Education child theme. Next question, you’re seeing the widget area on the widgets screen, just not on your home page?
Dan Bonomo says
We are using the Education child theme that is included with the full Genesis package. And yeah, I can see the widget area on the widgets screen.
Thanks!
Dan Bonomo says
I managed to figure out what was causing the issue with my implementation of this technique.
It looks like we need to follow a slightly different naming convention when creating a sidebar template file. Since we declare the sidebar as “home-sidebar” we need to have a template waiting for it called “sidebar-home-sidebar.php”, and not just “home-sidebar.php”.
A simple fix, but it took some messing around to tease the answer out.
Thanks again for a good tutorial!
Brian says
Oh…. Yeah I knew that. Sorry I didn’t think to ask you that. I didn’t see how you had it set-up so I didn’t think of it. Glad you got it worked out 🙂
Bonnie Wasielewski says
How would I do this if I wanted to create a new Secondary Sidebar for the homepage and leave the Primary Sidebar as-is? I am using Genesis eleven40 theme, and in that theme, the secondary sidebar is the left column.
Brian Lis says
Bonnie you want content-sidebar-sidebar?
Bonnie Wasielewski says
Brian, it’s sidebar-content-sidebar. But eleven40 displays it like this:
secondary sidebar | Content | primary sidebar
so in your example above, my test shows the new area on the top right, and i want it on the top left.
Brian Lis says
I’m sorry Bonnie, I’m not trying to be difficult but I still don’t understand the layout you’d like. Is it primary sidebar – secondary sidebar – content?
Bonnie Wasielewski says
Sorry, I might not be explaining it well either. Here’s the eleven40 demo from studio press: http://demo.studiopress.com/eleven40/
See how the About Me is id=”sidebar”
But Archives is id=”sidebar-alt”
I want to put a custom widget in id=”sidebar-alt” – the top left
Brian Lis says
I think I understand now. You should be able to go to appearance>widgets then look for the widget area on the right called “Secondary Sidebar”. Select a widget from the middle section. Left click and drag it into the Secondary Sidebar widget area. If you use a plain text widget you can place text in there and you’ll see it on the front end. Let me know if that works.
Bonnie Wasielewski says
Yes but I want to do that only on the homepage.
Brian Lis says
Ok you can use widget logic for that. http://wordpress.org/extend/plugins/widget-logic/. This will add a field to all your widgets. Expand the widget you want to use on the home page and add the following text in the Widget logic field.
is_home()
Bonnie Wasielewski says
Thank you! Do you recommend that instead of Simple Sidebars?
Bonnie Wasielewski says
Well, after using it – I certainly do! Widget Logic was the solution for me. Thank you so much for your help.
Doug says
Sometimes when I give up, I discover the solution. I checked out the Genesis parent theme files and noticed in sidebar.php its set up as class=”sidebar widget-area”> and in the child theme php I made it was set up class=”widget-area”>. Adding the sidebar in the class solved my issue.
Thank you again for the tutorial.
Sam says
Thanks Doug, my sidebar was not formatting properly. Probably would have taken me ages to figure out if I hadn’t seen your comment.
IMPORTANT PEOPLE: Read Dan Bonomo & Doug’s comments if you want this to work for you.
Ellen says
I did exactly what you explained, but could not make it work on the home page before renaming sidebar-home-sidebar.php as Dan Bonomo wrote – thank you both for advice!
But: My Home page looks nice, but the rest of the blog (Genesis -> Serenity) look like a mess – navigation bars and sidebar.
Any suggestions on how that can be?
Thanks,
Ellen
Ellen says
Solved it! Somehow … don’t knw how, but everything looks nice now, thank you for a nice code, usable even for a dummy like me 🙂
Mike Mahony says
What has to be done to make this work with the Education theme in Genesis? I want the sidebar to appear aligned with the top of the slider, but cannot seem to make that happen. I believe it has to do with the overall width, but I am not certain. Can you have a look at http://hoopershookup.com and let me know what I have to do to get that sidebar (currently down at the bottom) to come up top on the right?
Laura says
Has anyone tried this yet with an HTML5 theme? I had this working (with help from Dan & Doug’s comments) with Metro, but with upgrading to Metro Pro today I can’t get it to work.
For smaller widths things look somewhat okay, but for the largest widths the items added to the Home Sidebar widget are rendered on top of the items in the content area. Any thoughts?