WordPress.org

Support

Support » How-To and Troubleshooting » Widget container HTML (and missing titles)

Widget container HTML (and missing titles)

  • digitalnature
    Member

    @digitalnature

    Hi

    I have something like this setting up widgets:

    'before_widget' => '<li>',
    'after_widget' => '</div></li>',
    'before_title' => '<h2>',
    'after_title' => '</h2><div>',

    so the output is:

    <li>
      <h2> title </h2>
      <div>
        content
      </div>
    </li>

    the problem is that some widgets (eg. search), don’t output the title (h2 in this case), therefore </h2><div> is left out, making the entire design break because of the closing div tag.

    is there a way to force the title to display, or a better way to customize the widget container HTML ?

Viewing 5 replies - 1 through 5 (of 5 total)
  • kennyeicher
    Member

    @kennyeicher

    Having the same issue.

    digitalnature
    Member

    @digitalnature

    found a solution (for the Arclite theme), using javascript to modify the widget html output locally. Not very elegant, but it’s the only way 🙂

    jQuery('.widgettitle').each(function(){ jQuery(this).prependTo(this.parentNode); });

    This will move the title element where you want (if exists), so you don’t need to add anything ‘after_title’. In the example it will be moved in the parent element.

    Sayontan Sinha
    Participant

    @sayontan

    Digitalnature,
    Not sure how that solves the problem. In the example that you have given, assuming that the h2 tag has a class widgettitle, how would you move it if it was missing?

    Sayontan.

    digitalnature
    Member

    @digitalnature

    if it’s missing then it means the widget has no title, so this little hack won’t be applied. jQuery will not move anything if .widgettitle doesn’t exist

    one other thing I should mention is the sidebar widget layout with this solution:

    'before_widget' => '<li><div>',
    'after_widget' => '</div></li>',
    'before_title' => '<h2 class="widgettitle">',
    'after_title' => '</h2>',

    output:

    <li>
      <div>
        <h2> title </h2>
        content
      </div>
    </li>

    after jQuery is loaded, the output will become:

    <li>
      <h2> title </h2>
      <div>
        content
      </div>
    </li>

    Sayontan Sinha
    Participant

    @sayontan

    Ah, now I see what you are saying. You have modified your before_widget and after_widget tags so that they work without the before_title and after_title tags, then, depending on whether these tags are present, you move them to their appropriate place. Wonderful!

    Thanks a lot for the tip! I had logged an “idea” on the forum a few weeks back for supporting a “before_content” and “after_content” tag: http://wordpress.org/extend/ideas/topic.php?id=3287#post-13922 .

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Widget container HTML (and missing titles)’ is closed to new replies.