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.
- The 1st snippet works with Genesis
- The 2nd snippet works with any theme
This example show you the widget text between the 1st and 2nd paragraphs in a post.
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]
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:
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
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.
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
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.
Thanks For the Post Brad, Great info
I was just searching on how to do this and found your post
Thanks
Thanks for stopping by Brent.
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.
Doesn’t Motopress do the same thing too?
Not sure but it might.