hop.ie

Multiple sidebars in Wordpress

November 12, 2010

While Wordpress was originally developed for use as a blogging tool, it is frequently used to control entire websites. By default, most themes will have the same sidebar on each page. This guide will show how to set up multiple named sidebars and control the content of each individually. This guide assumes you have access to the theme files.

Step 1: Define your sidebars

Either in a text editor, or under Themes->Editor, open the file “functions.php”. This is the file that tells your theme that it is going to have multiple sidebars. For the purposes of this example, we will be setting up custom sidebars for each of the “home”, “about us”, “blog” and “contact us” pages. You may wish to edit this to fit your needs.

The following text might already be in your functions.php file:

if ( function_exists('register_sidebar') )

You’ll want to replace it with something like this:

if ( function_exists('register_sidebar') ) {
  register_sidebar(array(
    'name' => 'Home',
    'description' => 'Your homepage sidebar.',
    'before_title' => '<h2>',
    'after_title' => '</h2>'
  ));

  register_sidebar(array(
    'name' => 'About',
    'description' => 'Your about us sidebar.',
    'before_title' => '<h2>',
    'after_title' => '</h2>'
  ));

  register_sidebar(array(
    'name' => 'Blog',
    'description' => 'Blog, and default fallback sidebar.',
    'before_title' => '<h2>',
    'after_title' => '</h2>'
  ));

  register_sidebar(array(
    'name' => 'Contact',
    'description' => 'Contact us sidebar.',
    'before_title' => '<h2>',
    'after_title' => '</h2>'
  ));
}

Save the functions file and if necessary, upload it to your theme folder.

What is this code doing?

The register_sidebar function is being called here to define each of the sidebars. The reference explains the various options you can use when setting up these sidebars. In this case, we have defined 4 different sidebars and given them names that correspond to where they will be used.

Step 2: Connecting the sidebars to their pages

Now that we’re told Wordpress that we will need 4 sidebars, we not need to connect them to existing pages. For this you need to take note of the page IDs of each page we will be working with.

Page IDs

The easiest way to obtain the page ID is to browse to your Pages menu in the admin area. Hover your cursor over the title of each page, and you should see the page ID in the address that appears in the bottom of the browser window. It should read something like …post.php?post=5, where 5 is the page’s ID.

Go through each of your pages and take note of each ID, as they will be needed next.

Sidebar.php

Open the file sidebar.php. In this file we will add the code that connects your page IDs to their named sidebars. The code looks like this:

// dynamic_sidebar()
if (is_page(2)) dynamic_sidebar('Home');
elseif (is_page(4)) dynamic_sidebar('About');
elseif (is_page(6)) dynamic_sidebar('Contact');
else dynamic_sidebar('Blog');

You will need to replace the numbers (2,4,6) in this code with the corresponding IDs from earlier. Place this code into your sidebar.php file where you would like your sidebar html to appear. This is usually within a sidebar div or similar.

Upload or save sidebar.php when you’re finished editing.

What is this code doing?

This code looks at the current page ID, and chooses the right sidebar to show. If none is found, it falls back to using the “Blog” sidebar by default. If you want to adapt the code, you could set up more sidebars for other instances.

Step 3: Customise your sidebar content

Now that the code is in place, navigate to Appearance->Widgets. You should see your newly created sidebars on the right side of the screen. You can now place whatever individual content you need in each sidebar.