Changing Widget List Titles in Dynamic WordPress Sidebars

Just a quick post today – something that I picked up while trying to figure out some issues with my web design portfolio site. I am in the process of adding a blogging section to my site, which should be easy given the fact that I built it on wordpress. However, I ran into a relatively simple problem while trying to design my widgetized sidebar.

The Problem

The problem I was having was relatively simple. I built my sidebar using a standard unordered list. It looked something like this:

<ul>
    <li><h2>Title</h2>
      <ul><!-- Second Level Etc... -->
    </li>
</ul>

The problem was that I needed my title to be inside an H3 tag rather than the standard H2. Turns out the fix is relatively simple if you understand how to use the widget API. When ‘widgetizing‘ your wordpress theme, one of the first things you need to do is create a special file in your theme directory named functions.php. Inside of this file is where you put the basic code required to get your widgetized sidebar up and running.

The Fix

Using the widget API (explained in detail here), I was able to quickly change the tags that surround my titles. Check out this code (located in your functions.php file) and you’ll understand how it all works:

if ( function_exists('register_sidebar') )
    register_sidebar(array(
    	'before_title' => '<h3 class="widgettitle">',
    	'after_title' => '</h3>'));

All you need to do is replace my H3 tags with whatever you want to appear around your widget title. It does not need to be a heading tag at all – you could make it whatever you want. Hope this helps anyone having the same problem I did.

Hail to wordpress,
Emerson