Easy Steps to WordPress Sectional Sidebars

By Jacqueline Sinex, Wednesday, February 2, 2011
Menu sections

Situation

You have a WordPress-developed website and you want additional sidebars for different sections in the website, so you can display different widgets on different pages. This is especially handy for adding various sub-menus to different sections (like one for the About Us section, a different menu for Contact Us).

Solution

You don’t need to be a PHP expert – just some comfort with the WordPress structure can help you accomplish this in a few easy steps.

  1. Make a new sidebar file.
  2. Add the sidebar to your functions.
  3. Create a new template file.
  4. Edit the template to include your new sidebar.
  5. Add widgets to your new sidebar.
  6. Assign a Page to your Template.

Step 1: Make a new sidebar file.

There should be a file called sidebar.php or maybe leftbar.php in your theme folder. Make a copy of this file and name it something intuitive, such as sidebar-about.php. You should revise the code to reflect a suitable name for the sidebar, for example:

!dynamic_sidebar('About Sidebar')

Step 2: Add the sidebar to your functions.

Locate your theme folder’s functions.php file. Below your existing sidebars, you need to add something to recognize your new sidebar. Such as:

register_sidebar(array('name'=>'About Sidebar',
 'before_widget' => '<div>',
 'after_widget' => '</div>',
 'after_title' => '</div>', '<h3>',
 'after_title' => '</h3>',
 ));

Step 3: Create a new template file.

When creating a new layout for a Page in WordPress, start with making a copy of your default page.php file and naming it to something intuitive, such as page-about.php. Next, you need to notate the name of this template in the top description comments of the file:

* Template Name: About
*/

Step 4: Edit the template to include your new sidebar.

You should reference your new sidebar for this page so it will be included:

<? include('leftbar-about.php'); ?>

You might completely replace the default sidebar with this new one, or you might just append this so you have more than one set of widgets showing up on this page layout. Upload your final template file to the server so it is ready to use.

Step 5: Add widgets to your new sidebar.

Login to your WordPress Admin interface and visit Appearance > Widgets. Your new sidebar should appear in the options at the far right. Drag widgets you desire into this new sidebar and save any changes you make to them. In the case of a sub-menu, you might use the Custom Menu widget to insert a Menu you created.

Step 6: Assign a page to the template.

So now your sidebar is ready but nothing is displaying it. Visit a page that you want to use the new template variation you created, with this new sidebar, in my case the About page. On the right side under the Parent navigation settings, you will see a Template dropdown option.  Select the new template name (eg: About) and Update (publish).

And finally – visit your website and refresh the browser to check out the new layout. My customized About page now sports a completely different sidebar than other pages in my website or blog.

Posted in: Austin Web Design, How To, Web Development, WordPress web design, WWW Learning Center

Comments are closed.