Changing your WordPress Sidebar Markup

While creating a theme for WordPress today I ran into a little problem with my sidebar; the layout of the sidebar didn’t quite fit my needs for the design in-hand. At first I thought it could be a case of delving into the WordPress core code that generates all the widgets and modifying where needed, but that isn’t much fun. You also run the rist of these changes being overwritten next time you update WordPress; there had to be another way.

Purely for styling I needed to add an extra span to the title and a div to the widget wrapper. After searching through the Codex I came across the perfect solution:

1
2
3
4
5
6
7
8
9
10
11

//Custom settings in associative array
$args = array(
    'before_widget'  =>   '<li id="%1$s" class="widget %2$s"><div class="inner">',
    'after_widget'   =>   "</div></li>",
    'before_title'   =>   '<h3 class="widgettitle"><span>',
    'after_title'    =>   "</span></h3>"
);
//Check for register function and register the sidebar
if (function_exists('register_sidebars')){
    register_sidebars(1, $args);
}

You simply create an array with your custom settings and pass it into the register_sidebars function along with the number of sidebars you wish to register; paste that into the functions.php file in your theme and you’re done. If you don’t have a functions.php file you can just create one. All the settings are pretty self-explanatory and with these changing widget markup is easy.

On a side note; I’ve never been a big fan of using nested lists in the sidebar, I’m not sure it’s semantically correct; but I guess it does the job and works even when CSS is disabled.

You learn something new everyday!