When it comes to validation, one of the most challenging areas of a blog is the sidebar. For a HTML newbie, it isn’t always self-evident that a li tag must be nested inside of a ul or ol tag. Or the default markup for the widgets is:
<h2>Widget’s title</h2>
Widgets’s content</li>
If, in the same sidebar, someone has chosen to display widgets’ and custom content, and if he hasn’t noticed the opening and closing ul tag, the code simply won’t validate, which can cause some displaying issues in older browsers.
The easiest way to validate the code of a sidebar area is to wrap the widgets with a div tag. Aditionnaly, you may want to change the h2 heading for the widgets’ title to a les important one, since the sidebar’s content is complementay. To do it, all it takes is to replace a little bit of PHP in the functions file of the theme you’re using.
The most common script that registers a sidebar, making it widget ready is this one:
These lines are telling WordPress to allow you to use widgets in two sidebars. The widgets’ markup is the one described above.
To replace the li tag with div, you’ll need this script:
register_sidebars(2, array(
‘before_widget’ => ‘<div id="%1$s" class="widget %2$s">’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h3>’,
‘after_title’ => ‘</h3>’,
));
}
You’ll only have to replace the existing script in the functions.php file registering the sidebars with this one. Then edit the sidebar.php file of your theme and delete the first ul and the last /ul. If you don’t like the appearence of the widgets’ titles, edit the style.css file and look for something like #sidebar h2; change it to #sidebar h3 (or the heading you’ve chosen), and you’re back to the ols look of your blog.
NB The script above is only an example. Your theme might use one or more widgetized sidebars, so make sure you register the actual number:
/p>
.
Caution: Make sure that the functions.php file opens with
and ends with
or your blog won’t display at all.
Published on the 8th of July, 2009, in tips and tricks · Print
For the life of me I couldnt get this to work.
I’m not a coder so that could be part of my problem.
It keeps telling me that there is a problem with line 3 of your code.
Any suggestions? I’ve been trying to get rid of those annoying h2 tags for hours now with no luck