WP SITES

Log in

Add Widget On Page Inside Content Area

—

by

Brad Dalton

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

Comments

15 responses to “Add Widget On Page Inside Content Area”

  1. Display Ads After Specific Paragraph on Single Posts

    […] Code To Add Widget Inside Body of Content in Any Theme […]

  2. Place Any Widget Within Content Area of Post or Page

    […] Add Widget Inside Content Area […]

  3. How To Add A Email Opt In Form In The Content Area of a Page

    […] Code To Add Widget Inside Body of Content in Any Theme […]

  4. John Huotari Avatar
    John Huotari

    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,

    1. John Huotari Avatar
      John Huotari

      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

      1. Brad Dalton Avatar
        Brad Dalton

        Yes, use this code:
        [code]
        register_sidebar( array(
        ‘id’ => ‘wpsites-widget-two’,
        ‘name’ => __( ‘Custom Widget Two’, ‘wpsites’ ),
        ‘description’ => __( ‘Custom Widget Area Two’, ‘wpsites’ ),
        ‘before_widget’ => ‘

        ‘,
        ‘after_widget’ => ‘

        ‘,
        ) );

        add_shortcode( ‘wpsites_widget_two’, ‘wpsites_shortcode_widget_area_two’ );
        /**
        * @author Brad Dalton
        * @example http://wpsites.net/
        * @copyright 2014 WP Sites
        */
        function wpsites_shortcode_widget_area_two() {
        ob_start();
        dynamic_sidebar( ‘wpsites-widget-two’, array(
        ‘before’ => ‘

        ‘,
        ‘after’ => ‘

        ‘,
        ) );
        $wpsiteswidgettwo = ob_get_contents();
        ob_end_clean();
        return $wpsiteswidgettwo;

        }
        [/code]

        1. John Huotari Avatar
          John Huotari

          Thank you, Brad. I got it to work.

          This time, though, I added the style rules in the div tag after ‘before_widget’.

          You can see the result on this page: http://oakridgetoday.com/2014/09/23/oak-ridge-mall-new-name-banks-considering-financing/

          I think there is one small typo in the code you posted above. I think it should be wpsites-widget-two in the div tag after ‘before’, rather than wpsites-widget.

          Thank you,

          John Huotari
          Oak Ridge Today
          http://oakridgetoday.com

          1. Brad Dalton Avatar
            Brad Dalton

            I used the same class so both widgets use the same CSS. You only need to make the widget I.D’s and function names unique unless you want to style each widget differently.

          2. John Huotari Avatar
            John Huotari

            Brad,

            A follow-up: I was able to insert a third widget (an ad) into a story using code similar to that used for the second widget. I assume I could continue using a modified version of that code to add as many widgets as I like.

            You can see a story with the three widgets here: http://oakridgetoday.com/2014/12/01/epa-oak-ridge-is-a-green-power-community-of-the-year/

            Thanks again for your help.

            John Huotari
            OakRidgeToday.com

          3. Brad Dalton Avatar
            Brad Dalton

            Yes. You will need to register new widgets with unique I.D’s as well as duplicate the code.

            Example:

            Another option is to use custom fields if you want to add content on a large number of posts or pages in any hook position.

  5. Brent Dawson Avatar
    Brent Dawson

    Thanks For the Post Brad, Great info
    I was just searching on how to do this and found your post

    Thanks

    1. Brad Dalton Avatar
      Brad Dalton

      Thanks for stopping by Brent.

  6. Damien Carbery Avatar
    Damien Carbery

    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.

  7. Ben Siegfried Avatar
    Ben Siegfried

    Doesn’t Motopress do the same thing too?

    1. Brad Dalton Avatar
      Brad Dalton

      Not sure but it might.

Leave a Reply

Join 5000+ Followers

Get The Latest Free & Premium Tutorials Delivered The Second They’re Published.