The Easy Way to Add Widgets to WordPress Content

In my experience of building and maintaining WordPress web sites it is quite a common to want to put some related blocks of information into your main post’s or page’s content, inline. For example you might want to add a tag cloud or a list of related posts. This type of information is already available via WordPress widgets and of so you could add it to your sidebar (if you theme and template supported one). But what if you want to add the tag cloud into the middle of the post… like this;

Wow, pretty cool eh?

So this is possible today using my 5* rated Widgets on Pages plugin. With the plugin installed you can create a new Widgets on Pages sidebar, add your Tag Cloud widget to it, copy the generated shortcode and then paste that into your content. But now it’s even easier…

Introducing Turbo Widgets

I’ve recently created a new plugin for WordPress, called Turbo Widgets. And with this, WordPress widgets can be added to posts and pages using the nice WYSIWYG editor… click, click, click, BOOM!

Turbo Widgets Demo

There’s a free version of the plugin available on the WordPress.org plugin repository that has this nice GUI for adding widgets and there’s also a premium version that supports the ability edit the widgets too, again using the TinyMCE WYSIWYG editor.

And Turbo Sidebars?

As well as this, the premium version also supports Turbo Sidebars. These are custom content areas that can hold standard WordPress content (text, images, etc) as well as widgets added through the Turbo Widgets features. These content areas can then also be added to posts and pages via shortcodes (soon through the WYSIWYG too) . You can also use template tags to add these Turbo Widgets to your themes templates, say for example adding related posts to the bottom of each blog page.

The documentation page for Turbo Widgets contains further info on how to use these, but I also hope to blog through their usage too in the near future.

From a Problem to 100,000 Downloads

It was 1054 days ago that I first wanted to place a WordPress widget into a post I was writing. Whether it was for a client site or personal one I can’t remember… the important thing is that out of the solution I came up with emerged the Widgets On Pages WordPress plugin.

The plugin has undergone very little change since it’s 0.0.1 check-in to the WordPress.org plugin repository but since then it’s had very favourable reviews and been included in several blog posts and conference talks. But more importantly, for today at least, it’s now been downloaded over 100,000 times!

It has a current rating of 4.7/5 and at the time of writing sits as the 105th most highest rated plugin on the WordPress.org repository. 105th might not seem too good but it should be noted there are over 23,800 plugins in the repo.

August wp-hooked Widgets Admin Write-Up

At the August Meet-up of the London based wp-hooked I talked on the topic of WordPress Widgets, and in particular the admin area for them (slides can be found here). The talk came from the view of a user (read not developer) of WordPress who wants to take advantage of all the wonderful chunks of code that already exist in the WordPress widgets ecosystem. This ecosystem is a constantly growing one with Widgets being developed and released on the WordPress.org repository all the time. For website users (e.g. site owners, authors, etc) to actually make use of these great blocks of logic it’s not a friendly place sadly. The legacy idea of Sidebars is one that still has a place but it’s the use of Widgets outside of these well-trodden widget areas that things start to get tricky.

Let’s CMS it ALL

Users are wanting the freedom to add widgets into posts and pages as inline content; they want to easily add widgets to footer areas for things such as recent post lists, location maps and recent tweets. All these things are available as widgets but for users are heavily theme-reliant when it comes to how many widget areas are available to them and where those areas are on their site. In my talk (it could hardly be called a presentation) I suggested several plugins that can help users on their way to achieving these things;

During the talk several other plugins were discussed;

  • Dynamic Widgets – Control which widgets to display in the sidebars for pages
  • Widget Logic – Control which widgets to display in the sidebars for pages
  • Multi Edit – Not really widgety but adds extra content blocks to posts and pages admin screens
  • Page Layout – Page Layout allows to define a page layout using widgets
  • Carrington Build – A premium build tool which gives an advanced admin “layout” UI which enables users to add “content modules” to pages which could be widgets.
Screenshot of the Carrington Build in action

 

What Next?

Although all these plugins seem to add some great support to users when it comes to having control of their sites’ layouts and in particular the use of widgets they all seem to be a bit lacking. As a group we discussed what the solution would look like if we were designing from the ground up… especially now that we knew there was a demand to have this extra level of control and advanced use cases… something that the WordPress guys wouldn’t have known about when initially thinking about widgets. We came up with the following points which would hopefully spur on some further thought and potentially create a great solution;

  • Users want to add widgets to posts and pages on the fly.
  • Do widgets need to belong to sidebars? My personal thinking here is that CPT could be used to replace sidebars altogether.
  • Perhaps Widget attributes could be stored in post meta data if that Widget instance belonged to a particular post.
  • Having a drag and drop, minimal interface via the editor would be good… we would want to avoid the use of shortcodes. Perhaps in a similar way to the method used for images?
  • Users want to easily add widget areas to existing themes
  • Users want to be able to control the layout of widgets within their posts and pages.

And so there we have it… we have essentially a loose spec for a killer plugin or modification to core.

And what of wp-hooked?

For my part I really enjoyed the opportunity to vent some frustrations I’d been having personally as well as seeing over and over again in the WordPress.org support forums. It was great to have some expert feedback from like-minded WordPress folk. Once again, of course, thanks go to Emily and Ross for organising and chairing and of course the Dachis Group for hosting us. I’m already looking forward to the Sept ’12 event… what can I say, beer, WordPress and friendly geeks are excellent bed-fellows.

WordPress 1 Minute Wonder – Styling Widgets on Pages Horizontally

WordPress One Minute Wonder

In this edition of WordPress 1 Minute Wonders I will answer a question which I frequently get emailed about… and that is how to style widgets next to each other when using my Widgets on Pages WordPress plugin.

In this post I have 3 widgets in one of the sidebars created by the plugin. I have named the sidebar horiz.

To get the Widgets to display as they do above there was some extra CSS that I had to add to my theme’s style.css file to get them to display like this… here it is.

#horiz {
  overflow: auto;margin: 10p;padding: 10px;
}
#horiz .widget {
  float: left;
  width: 25%;
  padding: 2%;
  background: #f1f1f1;
  border:1px solid #999;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -o-border-radius: 10px;
  border-radius: 10px;
  -moz-box-shadow: 3px 3px 7px #999;
  -webkit-box-shadow: 3px 3px 7px #999;
  -o-box-shadow: 3px 3px 7px #999;
  box-shadow: 3px 3px 7px #999;
  margin: 0 1%;
 }

I have put a fair amount of styling in there to make them look a bit more appealing but essentially the important bit that makes the widgets sit next to each other can be done with just the following;

#horiz {
  overflow: auto;
}
#horiz .widget {
  float: left;
  width: 25%;
  padding: 2%;
  margin: 0 1%;
 }

In the first section we style the whole sidebar (you would replace .horiz with whatever you had called your sidebar), making sure that the content overflow is set to auto. This makes sure that any content following the sidebar does not also creep up alongside the widgets.

The second section styles the widgets (all three in this case). The key part here is the float:left; which makes them site alongside each other.

[jbox color=”blue” vgradient=”#fdfeff|#bae3ff” title=”Found this useful?”]If you’ve used this tip why not subscribe to my feed or check out the first item in the WordPress 1 Minute Wonder series?[/jbox]

Advanced WordPress Page Layout Experiment

Screenshot of layout

Styling WordPress page and post layouts can be daunting for the novice… especially if you don’t want to dirty your hands with PHP and the like. I wanted to experiment with what was possible to do using only the default WordPress theme 2010 and plugins alone (OK, some CSS was needed).

So I set myself the challenge of mirroring something which is a classic layout across news sites and ended up with the perfect example from the BBC News web pages (please someone let me know if I’m NOT allowed to publish the below pic).

Extract of the BBC News site, the desired layout
Extract of the BBC News site, the desired layout

The desired layout is essentially a main news article with a supporting image followed by a couple of secondary articles and then a listing of tertiary articles.

My initial ideas came from using the Widgets on Pages WorPress plugin that I had developed which allows the addition of sidebar areas to be inserted inline in pages and posts. Using this plugin I was able to essentially define multiple areas in a standard page (using a standard template) which could then have independant content defined and (with some tweaks to the live version of the Widget on Pages plugin) could be styled each in it’s own way. This, by itself, was limited though as I really needed some mechanism to pull in the desired stories… I needed something to support it.

Then at the recent WordCampUK 2010 I was lucky enough to be attending Michael Kimb Jones‘ presentation on WOW Plugins when the Query Posts plugin (by the incredible Justin Tadlock) was brought to my attention. The plugin provides a widget can be set up to be populated with the result of a query against the posts in the database. Kimb actually mentioned that he had thought of producing an entire WordPress site just through widgets… a very similar one to the train of investigation I was pursuing. This Query Posts plugin was the answer.

I put this plugin to work (with some slight mods to now use WordPress featured image feature) alongside my own Widgets on Pages plugin and some additional CSS to the 2010 theme to come up with a layout that is indeed on the way to what I was after.

Screenshot of layout
Adv layout with no template messing

The page content actually consists of only the following content;

[widgets_on_pages id="featured_news"]
[widgets_on_pages id="also_in_the_news"]

To support this I have 2 sidebar areas defined (featured_news and also_in_the_news) which each have Query Posts widgets in which pull in the news feed with each one offset to allow idea of one single feed.

The CSS used to stylize these is as follows (yes I know it’s not clean… this is an experiment remember);

.featured_news {
width:650px;
border: 1px solid grey;
border-width: 0  0 1px 0;
overflow: auto;
padding-bottom: 8px;
}

.also_in_the_news ul li {
float: left;
width:290px;
padding: 0 0 0 0
}

.also_in_the_news  {
margin: 5px 0px 10px 0;
border: 1px solid grey;
border-width: 0  0 1px 0;
overflow: auto;
width:650px;
}

.also_in_the_news ul li:first-child {
float: left;
width:290px;
margin: 0 0px 0 0;
}

.widgets_on_page ul {
list-style: none;
}

.widgets_on_page h2.widgettitle  {
font-size:1.2em;
}

.widgets_on_page h2.post-title a  {
font-size:0.9em;
}

.featured_news h2.post-title a   {
font-size: 1.5em;
}

.widgets_on_page .entry-summary {
clear: both;
padding: 0px 0 0 0;
font-size: 0.8em;
line-height: 1.5em;
font-family: arial;
}

.widgets_on_page  {
font-size:0.9em;
}

.widgets_on_page .hentry  {
margin: 0 0 5px 0;
}

#content .widgets_on_page  p,
#content .widgets_on_page  ul,
#content .widgets_on_page  ol,
#content .widgets_on_page  dd,
#content .widgets_on_page  pre,
#content .widgets_on_page  hr {
margin-bottom:5px;
}

img.attachment-thumbnail {
float: left;
}

.also_in_the_news img.attachment-thumbnail {
display: none;
}

.featured_news .words {
margin: 0 0 0 20px;
clear: none;
float: left;
width: 440px;
}

li.widget li a {
font-family: arial;
text-decoration: none;
font-weight: bold;
font-size: 0.8em;
}

li.widget li ,li.widget li:first-child  {
margin-bottom: 0.8em;
}

li.widget li a:hover {
font-family: arial;
text-decoration: underline;
}

The demo page

How to display Widgets inside posts and pages

I was faced the need to be able to place extra manageable content inside a wordpress page’s core content… and without an existing plugin available to do this I thought I’d write one of my own.

The output was the Widgets on Pages wordpress plugin which is at time of writing at version 0.0.4. The plugin basically allows the author to add a shortcode to their wordpress page or post which will then add the content of a predefined Widget area (or sidebar) at that point in the post/page

Widgets on Pages Options

The plugin approach allows the user to add a lot of extra control to their wordpress sites without the need for any coding or markup skills (PHP, MySQL, HTML etc).

UPDATE: In version 0.0.4 you are able to define an unlimited number of separate sidebars and call these all separately within the wordpress content.