How to add Widget to Pages and Posts in WordPress

Widgets are very powerful and are extremely easy to use. However their usage is  limited to the widget ready areas.  

What if you want to embed widget in a Page or Post?

In this post I will cover a plugin which allows you to embed any widget in a Page or Post.

The plugin is  AMR Shortcode Widget. Its a very popular plugin with 4.9 rating and has over 100,000 downloads.  Here are the instructions to use it:

---

Install and Activate the plugin

The plugin we are using is AMR Shortcode Widget Plugin

Installing and activating the plugin will add a new “Shortcode Sidebar“.

This sidebar will hold the widgets and their settings. These widgets can then be embedded via a shortcode.

Refer to the following screenshot

---

Adding a Widget to Page Content

Drag the widgets you want to embed to the Shortcodes Sidebar. These widgets can then be called inside any page or a post.

Here are a few ways to call the widgets

1. Display Widgets by Name

Use [do_widget widgetname] code to add a widget by name. So if you want to display a text widget use this code [do_widget text].

It will display all text widgets contained in the Shortcode Sidebar.

2.  Display Widgets by ID

Use  [do_widget id=widgetid] to display a widget by ID.

If you want to display a specific widget then this approach will be the best.

3. Display All Widgets in Shortcode Sidebar

You can also display all the widgets contained in Shortcode Sidebar.

Simply use [do_widget_area] shortcode.

---

Points to Note

The plugin also provide a lot options to customize the widget, For Example

• One can hide the title by using title=flase. Here is the code [do_widget pages title=false]
• One can wrap the title in a html tag. [do_widget pages title=h3] will wrap h3 tag around the widget title
• Once can wrap the complete widget in a HTML Tag. [do_widget “tag cloud” wrap=aside] will wrap the widget in an “aside” html tag.
• One can also add a custom css class to the widget.  [do_widget widgetname class=mycssclass] will add the mycssclass to the widget. You can then target this css class to style the widget

Thats it. As you can see , adding a widget to content is really easy. I hope our users will find this tutorial useful.