WordPress.org

Ready to get started?Download WordPress

Forums

[closed] Add HTML wrapper around widget content (16 posts)

  1. licensetokode
    Member
    Posted 1 year ago #

    Hi Folks, hoping someone can help me. I'm using the following to register my widgets:

    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>',
    	) );

    I'm trying to add a wrapper div around just the widget content (not the title). Is this possible?

  2. Marventus
    Member
    Posted 1 year ago #

    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.

  3. licensetokode
    Member
    Posted 1 year ago #

    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

  4. Marventus
    Member
    Posted 1 year ago #

    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');
  5. licensetokode
    Member
    Posted 1 year ago #

    Perfect, thank you!

  6. Marventus
    Member
    Posted 1 year ago #

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

  7. Marventus
    Member
    Posted 1 year ago #

    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!

  8. Marventus
    Member
    Posted 1 year ago #

    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.

  9. cmoral3s
    Member
    Posted 1 year ago #

    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 http://adambrown.info/p/wp_hooks/hook/widget_text so it doesn't work :(

    Isn't there other way?

  10. Marventus
    Member
    Posted 1 year ago #

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

  11. alchymyth
    The Sweeper & Moderator
    Posted 1 year ago #

  12. Marventus
    Member
    Posted 1 year ago #

    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.

  13. cmoral3s
    Member
    Posted 1 year ago #

    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.

  14. Joe Buckle
    Member
    Posted 1 year ago #

    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>
  15. Andrew Nevins
    Barrel Rider, Spam Zapper & Volunteer Moderator
    Posted 1 year ago #

    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.

  16. cmoral3s
    Member
    Posted 1 year ago #

    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, http://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

Topic Closed

This topic has been closed to new replies.

About this Topic

Tags

No tags yet.