When it comes to WordPress and widgets, there’s a single question that folk want the answer to;

How do I add a widget to my page?

There are a few ways to achieve this, ranging from low level code, using shortcodes, right up to using the visual editor. We’re going to look at the simplest route here, one that requires no code, no copying and pasting of shortcodes, and no need to know CSS to have our widgets laid out responsively, in columns.

Our Task

Let’s say we have a WordPress site, and we want to create a page that has some generic text content, but half way down we also want show some widgets. We’d like to show two in fact, and we’d like them to be displayed side by side on most screens, but one underneath the other on smaller screens.

Step 1 – Install the Widgets on Pages Plugin

The Widgets on Pages plugin was built specifically for this scenario, and this demo will use that plugin. The demo will also use the Pro version, that includes visual editor support and the ability to arrange widgets in columns (without the need for knowing any CSS).

Get Widgets on Pages Now

Step 2 – Create a new Sidebar for our Widgets

With the Widgets on Pages plugin installed we now have the ability to create an unlimited number of sidebars through the standard admin screens. These sidebars could be used in our theme, through the use of it’s template tags, but they can also be used to add widgets to posts and pages content.

I’ve created a new sidebar – or Turbo Sidebar, as they’re known in Widgets on Pages – called Basic Widgets Demo. I have some options that would allow me to automatically add the contents of this sidebar to either the header, content, or footer of all posts and/or pages, but I’m not needing that for this example.

 

Step 3 – Add our Widgets

Our new Basic Widgets Demo sidebar is now visible in the standard WordPress widgets admin screen. I’m going to add a couple of widgets, a calendar, and a tag cloud. These add dragged onto the new sidebar, just as you would with any standard sidebar that was part of your WordPress theme.

Note that our Turbo Sidebars are easily identifiable through their orange highlighted top border.

Step 4 – Add Widgets to a Page

Everything is set in place now for us to add our widgets into our page content.

From within the page edit screen, we use the new “Add Turbo Sidebar” button in the visual editor to bring up a pop-up screen where we can select which Turbo Sidebar we want to use. We’re also able to set how many columns should be used to display our widgets, and at which screen sizes. For this demo I choose to have 2 columns, for all but the smallest of screen sizes.

To get a real sense of how this works, here is a short 1 minute video.

The demo site cal be visited, to see the outcome.

Get Widgets on Pages Now