Is there any way to add two new functions, before_content and after_content to the register_sidebar function? These would work like before_title and after_title, except it would wrap everything that comes after the title.

I've found this thread which has some useful information, but every mentioned approach has flaws.

For example, inserting the required code in after_title and after_widget can result in broken code if a title isn't set. The solution would be to duplicate the opening div in before_widget and close it out again in before_title then reopen it in before_title, but that creates an empty div if a title is set.

Ideally, I'd like to do this:

    "id"             => "sidebar",
    "name"           => "Sidebar",
    "before_widget"  => "<div class='box box_push'>",
    "before_title"   => "<div class='box-hd'>",
    "after_title"    => "</div>",
    "before_content" => "<div class='box box-bd'>"
    "after_content"  => "</div>";
    "after_widget"   => "</div>",

Which would output as:

<div class="box box_push">
    <div class="box-hd">
        <!-- widget title -->

    <div class="box box-bd">
        <!-- widget content-->

1 Answer 1


The limitation is down to the existing arguments and how pretty much all widgets typically output content:

echo $args['before_widget'];
if ( $title ) {
    echo $args['before_title'] . $title . $args['after_title'];

// Widget content

echo $args['after_widget'];

Some widgets may offer before/after content hooks, but if you want a "global" fix there's no surefire way around it.

The only solution I can see is to add the wrap twice and use CSS :empty to hide the leftovers:

        'before_widget'  => '<div class="box box_push"><div class="box box-bd">',
        'before_title'   => '</div>', // If we have a title, close the wrap above
        'after_title'    => '<div class="box box-bd">', // Now open another one
        'after_widget'   => '</div></div>',

So with widgets that have titles, you'll end up with:

<div class="box box_push">
    <div class="box box-bd"></div>
    Widget Title

    <div class="box box-bd">
        Widget content

Enter the aforementioned CSS:

.box-bd:empty {
    display: none;

This will hide that first redundant wrap. A little dirty, I know, but it means title or no title, you'll always have your content wrapped in .box-bd.

  • I guess this'll work for now, but I really feel like this should be built in to WordPress. I'm particularly worried about older browsers not recognizing the :empty pseudo class. Apr 24, 2015 at 20:45
  • Even if it does get added to WordPress, you'll still need all widget authors out there to update their code... bit of a long shot. Apr 25, 2015 at 13:48
  • I don't know that's necessarily true, if it's blank by default it'd be up to theme makers to bug test. Apr 27, 2015 at 13:02

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.