WordPress.org

1. digitalnature
   Member
   Posted 4 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 4 years ago #
   

   Having the same issue.

3. digitalnature
   Member
   Posted 4 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 3 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 3 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 3 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.