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 '14 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 '14 at 4:08

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, privacy policy and cookie policy

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