[wp-hackers] Sidebar widget HTML/DOM

[Jeremy Clarke]

I ran into this same issue while designing a fluid-width site. In order to
keep the width and and padding balanced in all widgets, as well as achieve a
consistent style that  I wanted (specifically a colored box around all
widget content but not their headings) I needed a div around the content
only but not the title. I needed it both because of situations where you
need a double-div to simplify browser-compatible floating/padding/width and
because adding the special color style to each different kind of widget is a
nightmare that causes massive CSS bloat compared to adding it to a standard
widget content container (in my case <div class="widget-contents">), which
makes it just one definition that covers all widgets regardless of their
content.

Here is the sidebar definition for the record (I think this is what ravi was
talking about in his initial question):

    register_sidebar(array(
        'name'=>'Sidebar Promo',
        'id' => 'sidebar_promo',
        'description' => 'Sidebar widgets shown on all pages. TEXT WIDGETS
MUST HAVE TITLES!!!',
        'before_widget' => '<div id="%1$s" class="widget %2$s">',
        'after_widget' =>
"</div><!--.widget-contents-->\n</div><!--.div-->",
        'before_title' => "<h2 class='widgettitle'>",
        'after_title' => "</h2>\n<div class='widget-contents'>\n"
    ));

As Ravi implied, this is a house of cards. It depends on all widgets using
the before_title and after_title html as well as having a title in the first
place. If a title is missing then the whole sidebar falls apart and ruins
the page because the after_widget closes an extra div.

In my case I found this to be an acceptable tradeoff. Except for the text
widget all core widgets have a title no matter what. If you don't supply one
a default is used. I haven't run into any 3rd party widgets that don't
behave in essentially the same way, though I'm sure they are out there, and
I am more of a code-it-myself kind of person for widgets anyway.

In coding my own widgets for this theme I've found that it's easy enough to
ensure that they all have a default title as well, and that any widgets
where a default title makes no sense can be set up specifically to deal with
that scenario/markup -- I do this by adding an optional $args parameter that
inserts html to match the sidebar definition above, again not a particularly
perfect solution but it achieves the final output I desire and because its a
switch the default widget still works well without it. Personally I think
.widget-contents is a generically useful class like .widget and like .widget
i've started using it on parts of the site that aren't even widgetized, so
that they can match up with the sidebars that are.

In the end the biggest problem is the need to enforce a mandatory title on
text widgets. The theme I'm talking about is used on two dozen sites with
different admins controlling the widgets, so enforcing anything with
instructions instead of code isn't ideal. Luckily if they forget to add a
title the sidebar gets all fucked up, so they can tell they've done
something wrong. I also used instructions in the 'description' field for the
widget to declare that titles are mandatory (Don't forget your descriptions
guys, they are super useful!). So far only one of the sites has ended up
with a broken sidebar that the admin couldn't figure out themselves.

IMHO this implies that ideally the widget system should have had 6 optional
HTML parameters from the start, the two missing ones being 'before_content'
and 'after_content'. It seems to me that in many situations having a
containing div around the content, whether its a div, ul or a bunch of p's,
makes sense, and that many people would use that extra bit of formatting to
great effect.

I'm not sure if adding them now would make any sense though, since most
plugin-defined widgets would just completely ignore the new arguments and
nothing would be shown, so themers couldn't depend on it very much.

Actually, looking at the code now I'm seeing a filter on the title in text
widgets (default-widgets.php):

    $title = apply_filters( 'widget_title', empty($instance['title']) ? '' :
$instance['title'], $instance );

I don't have time to check it right now, but to me it looks like this could
almost definitely be used to filter the title of a text widget and make sure
there is SOMETHING there in all situations. If the title is empty you could
either insert a &nbsp; to fill space or a warning message like 'Dude you
need to add a title to this widget!', depending on your taste and the nature
of your theme. Either way having something there would set off the
before_title and after_title parameters of your sidebar and stop it from
breaking. I'll have to look into that for my theme at some point.

-- 
Jeremy Clarke | http://jeremyclarke.org
Code and Design | http://globalvoicesonline.org