Chunks of Useful Code


Easily Add Widgets to Pages and Posts in WordPress

By on Nov 3, 2017 in Blog | 0 comments

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...

Read More