Add HTML wrapper around widget content

Hi licensetokode,
You need to further tweak the before_widget parameter if you wish to wrap your widgets further.
For instance, if you needed to add another div inside the wrapping widget div, you would go:

register_sidebar( array(
   'before_widget' => '<div class="widget"><div class="some-other-div">',
   'after_widget' => '</div></div>',
));

However, if you needed to place your new div around your existing widget div, you would need to change the after_widget parameter to:

'before_widget' => '<div class="some-other-div"><div class="widget">'

The after_widget parameter would remain unchanged.

Thanks for the help Marventus, really appreciate it.

The only problem is I’m trying to put a div around only the widget content not the title.

I’m not sure If I’m misunderstanding your explanation but the above solutions would give me the following?:

<div class="widget">
   <div class="some-other-div">

      <!-- the widget title -->

      <!-- the widget content -->

   </div>
</div>

The result I’m trying to get is:

<div class="widget">

   <!-- the widget title -->

   <div class="some-other-div">
      <!-- the widget content -->
   </div>

</div>

I know I *could* insert the some-other-div in the after_title option, this would work for most widgets but breaks for ones without titles so I wouldn’t really want to do that

Hi there!
You are absolutely right, hahaha. I was clearly having a blonde moment, ??
Try this:

function my_widget_content_wrap($content) {
    $content = '<div class="some-other-div">'.$content.'</div>';
    return $content;
}
add_filter('widget_text', 'my_widget_content_wrap');

Perfect, thank you!

No problem. Glad it worked!
Please don’t forget to mark the thread as resolved whenever you can.
Thanks!

Could you please mark this thread as resolved? It will help other users to know that the solution provided in this thread works, and only the original poster (OP) can do it.
Thanks!

Hi.
It’s been over 2 weeks now, and you haven’t marked the tread as resolved. Please do so whenever you get a chance: it would help other people experiencing the same problem.

add_filter('widget_text', 'my_widget_content_wrap');

That filter is for the Text Widget only (the widget to display text/html) as it looks from here https://adambrown.info/p/wp_hooks/hook/widget_text so it doesn’t work ??

Isn’t there other way?

Hi.
It seems to have solved the OP’s problem. Not sure if yours is the same. What are you trying to accomplish, exactly?

related ?
https://wordpress.stackexchange.com/questions/74732/adding-a-div-to-wrap-widget-content-after-the-widget-title?rq=1

Hi Alchymyth,
it is very much related, but not really what the OP wanted, since he said he was

trying to put a div around only the widget content not the title.

None of the register_sidebar parameters would have helped in this case, if I didn’t misinterpret the question.
Cheers!

Edit: I stand corrected: the chosen reply would work, but not the second by itself, which is the one I saw.

Hi,

Maybe I didn’t understand the OP problem correctly, but it seemed like what I wanted to get: wrap a DIV around the widget’s content. The problem with the widget_text filter is that it only works for the text widget, not all types of widgets, and I’ll need it to work for all.

The solution suggested by alchymyth looks quite good, I will try it.

Thanks both of you.

I have just had a similar issue and I used jQuery to move the title wrapper outside of it’s parent. If this is any use to you, and you’re using jQuery, try this:

// THE SIDEBAR
register_sidebar( array(
'name' => __( 'Primary Widget Area', 'qns' ),
'id' => 'primary-widget-area',
'description' => __( 'The primary widget area', 'qns' ),
'before_widget' => '<div class="widget">',
'after_widget' => '</div>',
'before_title' => '<div class="widget-title"><h4>',
'after_title' => '</h4></div>',
) );

// JQUERY
jQuery('.widget-title').each(function() {
jQuery(this).insertBefore(jQuery(this).parent());
});

This should output

<div class="widget-title">
<h4>The Title</h4>
</div>
<div class="widget">
The Widget Content
</div>

If you need further help than that provided in this thread, please create your own thread. Otherwise it becomes very hard to track who’s having which issues per thread.

Andrew, if you were refering to me, I’m having the same problem described:

add a wrapper div around just the widget content (not the title)

. I don’t see a reason to create a new thread for the same issue.

The solution suggested by alchymyth, https://wordpress.stackexchange.com/questions/74732/adding-a-div-to-wrap-widget-content-after-the-widget-title?rq=1 , works fine, but it has a problem: it fails to deal with default titles.

The solution involves this check:

if ( $params[0][ 'after_widget' ] == '</div></div>' && isset( $settings[ 'title' ] ) && empty( $settings[ 'title' ] ) )
        $params[0][ 'before_widget' ] .= '<div class="content">';

And it works fine for some widgets. However, some widgets (like most of WP’s built-in ones) put a default title if nothing is set:
$title = apply_filters('widget_title', empty($instance['title']) ? __('Recent Posts') : $instance['title'], $instance, $this->id_base);

And the check fails to deal with that default. Is there any way to get the “real” title of the widget to check for it?

Thanks