I wanted so that my widget has the following structure:

<div class="widget-area">
  <h4 class="widget-title">Foo Bar</h4>
  <div class="widget-content">Blablablabla blabla</div>

so I registered my sidebar...

    'name' => 'Sidebar Widget Area',
    'id'   => 'sidebar-widget-area',
    'description'   => 'Choose Widget(s) to display in this area.',
    'before_widget' => '<div class="widget-area">',
    'after_widget'  => '</div></div>',
    'before_title'  => '<h4 class="widget-title">',
    'after_title'   => '</h4><div class="widget-content">'

It looked good at first... but things went awry whenever there's a widget without title. The reason is kinda obvious, without the title, there will be an extra </div> in the markup.


Is there any good method to achieve my desired markup? ( with/without a widget title )


NB: I'm sorry if the thread's title is kinda different from the main question.

  • Here's another similar question with some interesting solutions. Did you already check it out?
    – birgire
    Jul 27, 2014 at 0:24
  • First time I read that thread... but the picked answer still have messy markup (an extra closing div) whenever there's an untitled widget...
    – Leader
    Jul 27, 2014 at 4:08

1 Answer 1


Nope, there is no way (thank I can think of) to do this cleanly.

Handling of output and related parameters is up to the each wdiget's individual widget() method. There is no generic way to manipulate it.

You could maybe get away with filtering widget save or display instances to force it to always have title (like a single space string for example), but this would be meh semantically and likely visually.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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