WordPress.org

Ready to get started?Download WordPress

Forums

Widget container HTML (and missing titles) (6 posts)

  1. digitalnature
    Member
    Posted 5 years ago #

    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 ?

  2. kennyeicher
    Member
    Posted 5 years ago #

    Having the same issue.

  3. digitalnature
    Member
    Posted 5 years ago #

    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.

  4. Sayontan Sinha
    Member
    Posted 4 years ago #

    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.

  5. digitalnature
    Member
    Posted 4 years ago #

    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>
  6. Sayontan Sinha
    Member
    Posted 4 years ago #

    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 .

Topic Closed

This topic has been closed to new replies.

About this Topic