WP SITES

2785

Original Genesis & WooCommerce Tutorials & 6000+ Guaranteed Code

Snippets

Add Widget On Page Inside Content Area

To display a widget on a page, you could install a plugin which creates a shortcode.

Or you could simply add a few extra lines of PHP to your code that creates your widget.

This tutorial provides 2 code snippets you can use to add a new widget area within the body of your content area.

  1. The 1st snippet works with Genesis
  2. The 2nd snippet works with any theme

This example show you the widget text between the 1st and 2nd paragraphs in a post.

Widget Within Body of Content

The PHP simply creates a new widget with a shortcode.

Add the PHP code to your functions file and the shortcode to your text editor.

Genesis Widget Area Shortcode

genesis_register_sidebar( array(
    'id' => 'wpsites-widget',
    'name' => __( 'Custom Widget', 'genesis' ),
    'description' => __( 'Custom Widget Area', 'childtheme' ),
) );

add_shortcode( 'wpsites_widget', 'add_genesis_widget_area' );
function add_genesis_widget_area() {
    ob_start();
    genesis_widget_area( 'wpsites-widget', array(
    'before' => '<div class="wpsites-widget widget-area">',
    'after'  => '</div>',
    ) );
    $wpsiteswidget = ob_get_contents();
    ob_end_clean();
    return $wpsiteswidget;

}

// Add this short code anywhere in your editor
[wpsites_widget]

Any Themes Widget Area Shortcode

register_sidebar( array(
    'id' => 'wpsites-widget',
    'name' => __( 'Custom Widget', 'wpsites' ),
    'description' => __( 'Custom Widget Area', 'wpsites' ),
    'before_widget' => '<div>',
    'after_widget' => '</div>',
) );

add_shortcode( 'wpsites_widget', 'wpsites_shortcode_widget_area' );
/**
 * @author    Brad Dalton
 * @link   https://wp.me/p1lTu0-eJI
 */
function wpsites_shortcode_widget_area() {
    ob_start();
    dynamic_sidebar( 'wpsites-widget', array(
    'before' => '<div class="wpsites-widget widget-area">',
    'after'  => '</div>',
    ) );
    $wpsiteswidget = ob_get_contents();
    ob_end_clean();
    return $wpsiteswidget;

}
// Add this short code anywhere in your editor
[wpsites_widget]

Related Tutorials

Reader Interactions

Comments

  1. Brad,

    Thank you very much for posting this. I’ve been able to make it work on our site.

    I do have a question, though. I’m try to use this code to add a widget for a 300×250 ad and have it float left or right. Here’s the problem: Is there a way to get the text that follows the widget to float or wrap to the right or left of the widget, rather than resuming below it? What I’m getting now is text, followed by the widget in line horizontally with some white space, followed by more text. I’m trying to figure out a way to get that second section of text to move up into the white space. I’ve tried different settings for clear, float, and display but haven’t found anything that works yet.

    Any help you can provide will be greatly appreciated.

    Thank you,

    • Brad,

      I was able to insert an ad widget and get the text to wrap using CSS rules embedded within the div tags, setting width and height and float: left.

      I tried adding a second widget a little lower on the page, duplicating the code but using a slightly different widget name. I called the first widget inside_posts and the second inside_posts_2. That didn’t work, so I changed the second widget name to inside_posts_second. But that didn’t work either. In both cases, I got a white screen.

      Do you know if it’s possible to create a second widget area within the content?

      Thank you,

      John Huotari
      Oak Ridge Today

      • Yes, use this code:

        register_sidebar( array(
    'id' => 'wpsites-widget-two',
    'name' => __( 'Custom Widget Two', 'wpsites' ),
    'description' => __( 'Custom Widget Area Two', 'wpsites' ),
    'before_widget' => '<div>',
    'after_widget' => '</div>',
) );

add_shortcode( 'wpsites_widget_two', 'wpsites_shortcode_widget_area_two' );
/**
 * @author    Brad Dalton
 * @example   <a href="http://wpsites.net/" rel="nofollow ugc">http://wpsites.net/</a>
 * @copyright 2014 WP Sites
 */
function wpsites_shortcode_widget_area_two() {
    ob_start();
    dynamic_sidebar( 'wpsites-widget-two', array(
    'before' => '<div class="wpsites-widget widget-area">',
    'after'  => '</div>',
    ) );
    $wpsiteswidgettwo = ob_get_contents();
    ob_end_clean();
    return $wpsiteswidgettwo;

}

  3. After reading the excerpt in the post notification email I was expecting an automated insertion of the sidebar via a the_content filter. Maybe a late running filter that searches for and inserts the dynamic_sidebar() after it.

Leave a Reply