How do I create a shortcode for a WordPress sidebar?

Question

I have added a custom sidebar to my WordPress installation using the following script that also creates a shortcode:

// Register Sidebars
function custom_sidebars() {

    $args = array(
        'id'            => 'gutenbar',
        'class'         => 'abeng',
        'name'          => __( 'Abeng sidebar', 'text_domain' ),
        'description'   => __( 'Sidebar for block', 'text_domain' ),
    );
    register_sidebar( $args );

}
add_action( 'widgets_init', 'custom_sidebars' );
add_shortcode( 'add_sidebar', 'custom_sidebars' );

When I add the [add_sidebar] shortcode to a Gutenberg block the sidebar does not appear. However, when I use a plugin called Sidebar Shortcode [sidebar id="gutenbar"] the sidebar is displayed perfectly. I assume that my shortcode is associated with a specific function and does not need a name or id for the sidebar to be chosen.

I had been thinking that because the sidebar was added using a plugin that allows the insertion of functions available site-wide rather than only in a theme using its functions.php, that was the reason the shortcode did not do its job. But since the sidebar shows in the widgets area and allowed me to add widgets, and now works with this plugin, that's obviously not the issue.

Looking under the hood of the concisely written Sidebar Shortcode, I can't see what I might want to add to make my code functional.

Why am I doing this? I'm using full-width pages for my posts, disabling the theme's default right sidebar (which doesn't play well in a responsive design) but still need to reinsert the sidebar in a column.

Thanks for any help.

In no theme nor functions.php. See the post: "...the sidebar was added using a plugin (My Custom Functions) that allows the insertion of functions available site-wide rather than only in a theme using its functions.php..." — Mark Lee

Mark Lee Mark Lee · Accepted Answer · 2020-07-17T15:18:17

With the help of Prashant Singh on the WordPress support forum, I learned that the function that creates the sidebar cannot be used to create a shortcode to place it on a page. The shortcode has to be created calling the WP native function dynamic_sidebar() that gives access to all sidebars (https://developer.wordpress.org/reference/functions/dynamic_sidebar/). Below is the full script that includes cleanup code to allow the correct positioning inside a page.

/**
* Create sidebar and shortcode
*/
// Register Sidebars
function custom_sidebars() {

    $args = array(
        'id'            => 'gutenbar',
        'class'         => '',
        'name'          => __( 'Abeng sidebar', 'text_domain' ),
        'description'   => __( 'Sidebar for block', 'text_domain' ),
    );
    register_sidebar( $args );
}
add_action( 'widgets_init', 'custom_sidebars' );
/* Add the shortcode and allow positioning in page*/     
    add_shortcode( 'add_sidebar', 'my_custom_sidebar' );
    function my_custom_sidebar(){
        ob_start(); 
        dynamic_sidebar( 'gutenbar'); 
        $sidebar_left = ob_get_clean(); 
        $html = ' <div class="sidebar-content"> ' . $sidebar_left . ' </div> '; 
        return $html;
    }

How do I create a shortcode for a WordPress sidebar?

1 Answers