Thesis Tip #2 – Additional Sidebars

(This tutorial is specifically for the Thesis theme, but can be adapted to work with any Wordpress theme).

When building a website using Wordpress, you’ll often have a piece of content that doesn’t fit into a post or page; for example, an “Additional Information” box that appears above the sidebars on a specific page.  There are many approaches you could take:

• Code it directly into the template files, which should only be done if the content won’t need to be changed (example: a footer on a website).
• Include it as a custom field on a post or page. This is best for content that is page/post-specific, but found on almost every post or page (example: Photographer’s name associated with the post’s header image).
• Build an additional sidebar. This is best for something that’s repeated often and/or needs to be easily editable.

I’m going to focus on the last approach using additional sidebars.

First you need to create an additional sidebar, then include it somewhere in your site, and finally populate it with content.

Creating an Additional Sidebar

In your custom_functions.php file, include the following code:

register_sidebars(1,
array(
'name' => 'Additional Sidebar',
'before_widget' => '<li id="%1$s">',
'after_widget' => '</li>',
'before_title' => '<h3>',
'after_title' => '</h3>'
)
);

That will create a new sidebar titled “Additional Sidebar,” with the appropriate default parameters (which you can change if you like).

Include in Site

Since we’re working with Thesis, I’ll make a custom function that displays the additional sidebar and stick it after the existing sidebars using add_action.


function custom_sidebar(){?>
<div id="sidebar_3"><ul>
<?php dynamic_sidebar('Additional Sidebar'); ?>
</ul></div>
<?php
}
add_action('thesis_hook_after_sidebars','custom_sidebar');

You could use any of the hooks to stick it wherever you’d like.

Populate the sidebar with content

From your wp-admin area, go to Appearance > Widgets. You should see all of your sidebars displayed on the right side, and your choice of widgets on the left. If you just want text in this sidebar, drag the Text widget over to “Additional Sidebar” and fill it with your title and content. Once you save it, your sidebar should be ready to view on your site.

You can customize the look and feel of it using custom.css, Thesis’ CSS file. In the above example, I put the sidebar in a div titled “sidebar_3″, so I can modify it by using .custom #sidebar_3.

Tagged as: thesis, thesis-tip, tutorial, wordpress

• Thesis Tip #11 – Clickable Logo in Header
• Thesis Tip #10 – Filter Categories from Homepage
• Thesis Tip #9 – Custom Options Page
• Thesis Tip #8 – Change Next and Previous Post Text
• Thesis Tip #7 – Import and Export Your Design
• Thesis Tip #6 – Print Stylesheets
• Thesis Tip #5 – Featured Content Rotator
• Thesis Tip #4 – Adding Classes to Body
• Thesis Tip #3 – Multiple content areas
• Thesis Tip #2 – Additional Sidebars

Bill Erickson is a WordPress Consultant who builds custom websites using WordPress as a CMS and Thesis as a framework. He’s a cofounder and resident of The Creative Space, and a cofounder of the BIL Conference (the open analog to the TED Conference).