Setting up widgets in wordpress with a unique ID for the after_title argument

Question

I try to get the collapsible-widget-area plugin so that every widget it creates inside the collapsible area has a unique id <div> after its title.

function get_args() {
    $this->args = apply_filters( 'collapsible-widget-area-args', array(
        'name'          => __( 'Collapsible Widget Area', 'collapsible-widget-area' ),
        'id'            => 'collapsible-widget-area',
        'description'   => __( 'Drag widgets into this area in order to use them inside of the Collapsible Widget.', 'collapsible-widget-area' ),
        'before_widget' => '<div id="%1$s" class="widget %2$s collapsible-item">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="widgettitle">',
        'after_title'   => '</h2><div id="i_want_to_be_a_unique_id_for_every_widget_but_i_am_not"></div>',
    ) );
    $this->sidebar_id = $this->args['id'];
    if ( ! class_exists( 'collapsible_widget' ) ) {
        require_once( 'class.collapsible-widget.php' );
    }
    add_action( 'widgets_init', array( $this, 'register_widget' ) );
}

This is the function that sets the args, but as far as i understand it, it is only called one time and the arguments apply to every widget. Can somebody tell me now to use seomthing like the %1$s for the before_widget or even better the exact same value in the after_title?

The entire plugin can be viewed at in the wordpress plugin svn, the function i am shoing above is in the class.collapsible-widget-area.php and the only thing i added so far is the <div id="i_want_to_be_a_unique_id_for_every_widget_but_i_am_not"></div>.

This is not a "write me a programm" question, its just a example i give. Maybe there needs to be a complete other solution to accomplish this, or its very easy to do with this plugin wich already extends wordpress widget class, i don't know.

Answer 1

Looking at widget.php in trac sprintf() only runs on before_widget (Line 884):

$params[0]['before_widget'] = sprintf($params[0]['before_widget'], $id, $classname_);

Hence, it won't work for any of the other arguments.

I wondered whether you could use the dynamic_sidebar_params filter, but the $id and $classname_ arguments aren't passed on to the filter. Outside of hacking core, I'm not sure there's much you can do other than look into modifying Twitter bootstrap or using jQuery to add on the ID after the page load.

Answer 2

9 years and a pandemic later, I found my way to do use the filter of @mrwweb and create a nicely working Bootstrap (4) collapse with the Wordpress widgets:

Because the dynamic_sidebar_params do contain unique params (such as ID) you can use this to add a custom collapse ID to each widget created. See: https://developer.wordpress.org/reference/hooks/dynamic_sidebar_params/

A working example:

add_filter('dynamic_sidebar_params', function($params) {
    $params[0]['after_title'] = sprintf( $params[0]['after_title'], $params[0]['widget_id'] );
    $params[0]['before_title'] = sprintf( $params[0]['before_title'], $params[0]['widget_id'] );
    return $params;
}, 10, 1);

For now I added the $params[0]['widget_id'] as %1$s but you can easily create more. Read the docs on how sprintf works: https://www.php.net/manual/en/function.sprintf.php

So, creating a sidebar with these settings will make every widget inside it collapsible.

$config = [
    'before_widget' => '<section class="widget mb-4 %1$s %2$s">',
    'after_widget'  => '</div></section>',
    'before_title'  => '<a data-toggle="collapse" href="#%1$s" role="button" aria-expanded="false" aria-controls="%1$s"><h5>',
    'after_title'   => '</h5></a><div id="%1$s" class="collapse">'
];
register_sidebar([
    'name'          => __('Footer col 1', 'textdomain'),
    'id'            => 'footer-col-1'
] + $config);

Notice that I wrap the title in <a> AND <h5> PLUS, I create a div around the widget content by opening a div inside the after_title and closing it at the after_widget. This way the title will function as the collapse-toggle.

If you want to use a filter instead of creating your own sidebar you can filter the widget args as followed (for this SO question):

add_filter('collapsible-widget-area-args', function($args) {
    $args['after_title'] = '</h5></a><div id="%1$s" class="collapse">';
    // here the other args for before_title, after_widget eq.
    return $args;
}, 10, 1);