How to display widget areas with a shortcode

Reading Time: ~ < 1 minute

Recently, a member of the Genesis WP Facebook group posted a question about using shortcodes to insert widget areas inside blog posts, and the pros and cons of doing so. We’ve also had a few customers ask us about this too.

This functionality can be useful when trying to display widget areas inside the content of posts and pages, for special types of content such as ads or image sliders.

In this post, we’ll provide a handy function that makes displaying widget areas with shortcodes easy.

Step 1

Add the following code snippet to the end of your functions.php file:

add_shortcode( 'widget_area', 'prefix_widget_area_shortcode' );/** * Display widget area with shortcode. * * @since  1.0.0 * * @return string */function prefix_widget_area_shortcode( $atts ) {    $atts = shortcode_atts(        array(            'id' => '',        ),        $atts,        'widget_area'    );    ob_start();    genesis_widget_area( $atts['id'], array(        'before' => '<div class="' . $atts['id'] . ' widget-area"><div class="wrap">',        'after'  => '</div></div>',    ) );    return ob_get_clean(); }

This function registers a new shortcode with WordPress called ‘widget_area’. It accepts one argument called ‘id’ that lets you pass in the id of the widget area, which is usually the widget title in lowercase separated by dashes.

Tip: A list of all widget IDs can be output in your site’s footer by adding this snippet to your functions.php file. Remember to delete when done.

Step 2

Once the above function has been added to your theme, you can simply display a widget area using the [widget_area] shortcode and specifying the id parameter. For example, to display the Footer 1 widget area you would use:

[widget_area id="footer-1"]

That’s it, you can now display any widget area any where your site allows shortcodes.