Add A Custom Home Page Sidebar To WordPress

back to tech articles
WordPress 3.4.2, TwentyEleven Theme

Sometimes you want a different sidebar on the home page of your WordPress site. Here’s how we do it with the TwentyEleven theme.

Step 1

You will need to get your hands dirty just briefly by editing the file functions.php within the theme folder. Open the file and look for the sidebar functions (around line 390) and add your own sidebar definition at the end of the sidebar definitions.

1
2
3
4
5
6
7
8
9
register_sidebar( array(
    'name' => __( 'Home Page Sidebar', 'twentyeleven' ),
    'id' => 'sidebar-6',
    'description' => __( 'The sidebar for the home page', 'twentyeleven' ),
    'before_widget' => '<div id="%1$s" class="widget %2$s">',
    'after_widget' => "</div>",
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>'
) );

Notice how the id is set to sidebar-6. We’ll use that in our next step. Save the file.

Step 2

Now we create a new sidebar file that we will refer to. Open the file sidebar.php and copy the contents. Create a new file called sidebar-home.php and paste the contents into it. Now edit the contents and look for the following line:

1
<?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>

And change it to…

1
<?php if ( ! dynamic_sidebar( 'sidebar-6' ) ) : ?>

Save the file.

Step 3

Open index.php and look for the function get_sidebar();. Change it to:

1
get_sidebar('home');

The name will be whatever you named your new sidebar file, everything between ‘sidebar-‘ and ‘.php‘, in our case it was ‘sidebar-home.php‘, so we use ‘home‘.

That’s it! Now you can log into your WordPress admin area and there’s a new sidebar available to you called Home Page Sidebar and it will only show up on the home page!