Styling Wordpress Dynamic Sidebar – dynamic_sidebar_params Filter

I have been working a lot lately on customizing my personal homepage theme. One thing I have not been happy about has been the right sidebar. The widget heading were just html text and didn’t have the rendered look that I wanted. I decided to reformat the sidebar and use images for the headings rather than just text. I had done some custom sidebars before but I wasn’t sure how to style each widget independently. The problem is that WP gives a generic class to each sidebar widget and you are only able to style all of them to look the same.
The first place I looked for a function to do this was in my template’s function.php file and I noticed this code:

if ( function_exists('register_sidebar') )
    register_sidebar(array(
        'before_widget' => '<div class="sidebar-box">',
    'after_widget' => '</div></div>',
 'before_title' => '<h2><span>',
        'after_title' => '</span></h2><div class="sidebar-box-inside">',
    ));

This isn’t exacly what I wanted as it will apply this to all of my widgets. So after a little more snooping around the web I noticed a WP filter that does what I want. The fitler is called dynamic_sidebar_params and it is called like this:

add_filter('dynamic_sidebar_params', 'my_function_callback');

Where my_function_callback is the name of your function. In my case I called it like this, in functions.php:

add_filter('dynamic_sidebar_params', 'sidebar_styling');

Next I had to figure out a way to style each element uniquely. I decided that the widget name would be a good identifier. Luckily this filter will pass you a field called widget_id, which has a sanitized version of the name which can be used for your CSS identifier. Here is what the params variable looks like:

Array
(
    [name] => Sidebar 1
    [id] => sidebar-1
    [before_widget] => <div class="sidebar-box">

    [after_widget] => </div></div>
    [before_title] => <h2><span>
    [after_title] => </span></h2><div class="sidebar-box-inside">
    [widget_id] => recent-posts
    [widget_name] => Recent Posts
)

Now that we have that ID, it is a simple function to write:

function sidebar_styling($params){
  $params[0]['before_title'] = '<h2 id="sidebar-'.@$params[0]['widget_id'].'"><span>';
  return $params;
}

Now WP will output the unique id for each heading and we can just style it appropriately. I used a big sprite to save resources:

Dynamic Sidebar

#sidebar-recent-posts span{display: none;}
#sidebar-recent-posts{
  background: transparent url(images/sidebar-titles/dynamic-sidebar.png) 0 0 no-repeat !important;
}
#sidebar-twitter-tools span{display: none;}
#sidebar-twitter-tools{
  background: transparent url(images/sidebar-titles/dynamic-sidebar.png) 0 -41px no-repeat !important;
}
#sidebar-categories span{display: none;}
#sidebar-categories{
  background: transparent url(images/sidebar-titles/dynamic-sidebar.png) 0 -82px no-repeat !important;
}
#sidebar-archives span{display: none;}
#sidebar-archives{
  background: transparent url(images/sidebar-titles/dynamic-sidebar.png) 0 -123px no-repeat !important;
}
#sidebar-links span{display: none;}
#sidebar-links{

  background: transparent url(images/sidebar-titles/dynamic-sidebar.png) 0 -164px no-repeat !important;
}

That is all there is, you can see the results on the page you are reading.
I found these articles/sites helpful:

• Dynamic Widget Classes for use in CSS

Related posts:

1. Make an Awesome functions.php File For You New Wordpress Template – Part 1 Its been awhile since I threw up a new blog...
2. Finding a Category Ancestor / Descendant for WP Templates Recently I had a problem where I needed to find...
3. YAML – My Favorite Non-Markup Language I have been using YAML for awhile and decided I’d...