There are three widget based plugins which I think provide functionality so powerful that it is possible to create one index.php file with dynamic sidebars in key positions and to use widgets for everything else. Here are those plugins:

Fun with theme widgets

This is one of mine, and by far the simplest and least impressive of the three, but, it provides an incredibly simple way for theme builders or individuals to create their own widgets out of snippets of code.

You can find out more about Fun with theme widgets here

Query posts widget plugin

This plugin by Justin Tadlock is most excellent. It allows you to include a list of posts by selecting the selection criteria. I see no reason why this shouldn’t be used instead of hard coding the page lists into the theme itself. If it supports paging and templates then even better.

You can read more about Justin Tadlock’s Query post widget plugin here.

Widget context

Kaspars widget context plugin adds the option to any widget to choose when it is displayed, i.e. home page, single post pages, when the URL contains certain characters etc. This is the killer plugin as, combined with the two above, it is no longer necessary to create individual post pages. Simply decide which widgets should go where.

You can read more about Kaspar’s Widget Context plugin here.

Presetting widgets

It isn’t a plugin, but any theme using these combinations of plugins and widgets really needs the option to preset some widgets. Ptah Dunbar recently wrote a post explaining how to preset widgets from within a theme so this is a post well worth checking out.

Are these widgets the next step toward the ultimate WordPress theme system? I don’t know; what do you think?

I think it is a great idea, you can check out the widget reset plugin at Justin’s site.

His widget lets you get a selection of posts based on your own criteria. Most of the query_posts options are there so if you want most recent? easy. How about most recent from a particular category? Yep. Want to sort them in a different order? Want to sort according to the most recent category? want 5, 10, 15 or more? No problems.

If you were designing a website (platform aside) for a customer you wouldn’t dream of just asking them to plonk the content where they wanted it. You would consider the available content, the interaction between that content, probably do some information architecture work on their existing content and present your final design as a fait accomplii, or near as damn it. You can’t do that with themes, but does that mean that all responsibility should be dumped on the consumer?

Seeing Brian Gardner’s UI for selecting categories made me wonder if the widgetised areas of the best themes would start to become more limited, with more thought given as to the optiminum positioning in any given layout. Say for example that you can choose the layout that you want, and then instead of choosing each individual widget you choose from combinations of content. For example, A main menu that works in a particular way is paired with a sub-menu in the sidebar, a search option in the header and lists of archives in the footer.

Might these themes also start to dictate the way the blog works, instead of the other way around, to help with visitor retention, or to drive focus to adverts, depending on theme? Consider a hard coded list of favourite posts. The blogger would be faced with the option of selecting their own favourite posts or leaving the list blank. If the theme was chosen for its carefully researched strategy surely he would go with the former?

I’m not suggesting that all themes would be widget free, but, just that uber-premium themes might win over normal themes because they do not provide control, they provide a strongly researched framework to help the blogger achieve their goals in the area they are targeting and limit their options for self fulfilled failure.

What do you think? Will themes continue on the never ending road of providing ultimate flexibility and removing structure, or will someone stop this merry-go-round with the intention of providing more?

There are three parts to adding extra sidebars to your theme:

1. Register the sidebars in functions.php
2. Call the sidebars form the PHP
3. Add some extra styling to layout the sidebar

Register the sidebars

Registering the sidebar is about more than just telling WordPress it exists. You also need to specify the structure of the sidebars. In this case I want to use a structure something like this:

The wrapper div will be contained within the theme itself as it will have a specific ID based on its location. The remainder is specified in the array shown below:

//create the array
$sidebar_array = array(
‘before_widget’ => ‘<div id=”%1$s” class=”widget %2$s”>’,
‘after_widget’ => ‘</div>’,
‘before_title’ => ‘<h2 class=”widgettitle”>’,
‘after_title’ => ‘</h2>’,
);

In this you can see that the HTML specified in before_widget and after_widget wrap the widget in a DIV tag. %1s and %2s will be automatically replaced with the ID and title of the widget so they can be individual styled if necessary. before_title andafter_title wrap the title in H2 tags. The content will be specified by the widget.

Except for this styling there is only one more variable we need to provide that is the name of each sidebar. As this is separate for each of the sidebars we will need to modify the array twice. Each time just before the sidebar is registered with theRegister sidebar function. For example:

//set the name
$sidebar_array['name'] = ‘Sidebar’;
register_sidebar($sidebar_array);
$sidebar_array['name'] = ‘footer’;
register_sidebar($sidebar_array);

With these two sets of code included in functions.php you should now have two named sidebars available for widgets. But don’t add them yet.

Call the sidebars

The next step is to add the function calls in the HTML files. The function call itself is very simple: dynamic_sidebar(sidebar_name);, but for most themes you will want to do a little more to cope with situations where there are no widgets added, and to highlight where the widgetised areas are.

If there are no widgets then dynamic_sidebar will return false. This means you can easily add it as the equation in an IF statement like this:

<div id=”footer”><?php if ( !dynamic_sidebar(‘footer’) ) { ?><p>Sample Content</p><?php } ?><p>&nbsp;</p></div>

In this example I have included some example content that will be shown if there are no widgets. In the default theme, and most others, this will contain a pre-widget sidebar. The default theme also checks to see whether widgets are installed at all. I am assuming they are, but check sidebar.php in the default theme to see how to check.

I have also added the wrapper DIV I mentioned above, this one for the footer, and a paragraph with a class of clear, so I can float the widgets and use this to clear them.

Styles the sidebars

If you go ahead and add some widgets to the footer sidebar now you will find that they all appear above one another, like a normal sidebar. This is not what we want for a footer, so a little styling is needed. But only a little.

#footer div.widget
{
float:left;
margin-right:30px;
margin-left:30px;
}

#footer p.clear
{
line-height:0.001;
font-size:0.001em;
clear:both;
}

The example above is the default theme. To make it work in the default theme I also needed to alter another line of CSS. Line 83:

//from
background: #eee url(‘images/kubrickfooter.jpg’) no-repeat top;
//to
background: url(‘images/kubrickfooter.jpg’) no-repeat bottom;
//create the array
$sidebar_array = array(‘before_widget’ => ‘<div id=”%1$s”>’,'after_widget’ => ‘</div>’,'before_title’ => ‘<h2>’,'after_title’ => ‘</h2>’,);

Widget Management

One of the options in the survey is widget management. I rated this as most important out of the available options. But it isn’t just the UI that needs attention, although it does, as my post on widget management concepts shows. If you have ever tried to do anything slightly advanced with widgets (see my widget structures plugin) then the code requirde can drive you mad.

Right now it is far too difficult to code widgets. Single widgets are easy enough, although not easy for those without coding knowledge (that is why I created the Fun with theme widgets plugin), but multiple use widgets are horrible and require a huge amount of code that you need to copy almost verbatim. It isn’t so much a feature of WordPress as a hack the developers figured out and then provided as an example.

I think that all this stuff needs to be added to the core so that a multiple use widget requires setting a single variable in the add widget function. Alternatively, or perhaps better yet, provide a widget class that you extend to make the new widget.

Finally, I think they need to consider whether widgets can be produced using something other than code. Perhaps XML that can be imported. I write about this back at the start of November – Does WordPress need a better type of widget?

Modularisation

This is the second major thing that I think WordPress needs to start doing, and I think should start doing in 2.8.

There are significant parts of WordPress that can be segregated out and put into core plugins. While these things do no harm if they are in the core and are not used it also means that you are limited to hooking into them, or rewriting them completely if you want to change them. I would like to see a system where you could copy the core plugin into user plugins, modify it, and then it would be a simple matter to make serious changes without modifying the core itself. Widgets would be a prime candidate for pluginisation as would links.

This may mean that the plugin system needs to be looked at to get the maximum performance out of it. But that is fine by me.

This is a very big project and that dovetails nicely with my feeling that they should really let 2.7 rest for a bit before replacing it. It is by far the most advanced (in terms of what users can do) system out there and I don’t think there is an immediate need to tinker with it beyond making major improvements.

Sum

WordPress has everything it needs right now. Having revamped the UI I think there is a need to step back and do the same for the underlying architecture and code. Considering where WordPress will go in the future. Should content management be the key, or better interaction with other blogs. And how about looking at which of the BuddyPress features should be plugins for WordPress as a whole.

The real things that are needed next are a focus on developers. This means modularisation, flexibility, and simplicity.

What do you think?

Installation

To install the plugin just download it and activate it. It has no options.

Creating Theme Widgets

Creating a theme widget really is very easy. Here is a step by step process.

Step 1

Create a new PHP file in the theme and call it {something}.widget.php.

Step 2

Add a PHP comment at the top of the file to indicate the name and description of the widget. Like this:

[php]
/*
Widget Name: 3 Random Posts
Widget Description: Outputs 3 random posts in a list
*/
?>


Step 3

Add the code you want for your widget. In this example I am adding code to output three posts at random:

[php]


Note that this code is identical to the code you would insert into a theme file to do this manually. There is nothing special about this code that needs to be changed to make it a widget.

Step 4

Assign the widget to sidebar.

On the left of the image is the output (there is only one post because it is a fresh installation) on the right the widget added to the sidebar.

Download

You can download the plugin from WordPress extend.

The Potential

I think that making it this easy to create, and more importantly understand, the widgets included with a theme opens up a lot of possibilities. For example, with this it would be easy to use a sidebar and widgets to offer different layouts for a featured post on the home page.

If you have any suggestions for improvements to the plugin itself, or ideas about how it can be used, let me know.

For a wireframe widget system to truly work the wireframe needs to be set up by the theme author before hand. I envisage an area of WordPress.org where a theme author can upload a large screenshot of their theme, and using the tools provided, select the regions where the sidebars are placed. For example:

The theme in this example is Clockwork Simple

For each region they select they provide a nice name, and the name of the sidebar within the theme so that WordPress can match them up later on. Once finished they are given an XML file containing the screenshot filename, the coordinates of each region, and the names of each sidebar. The XML file and large screen shot are saved within the theme folder.

When the user installs the theme and navigates to the widgets page they are presented with the list of widgets, as now, but instead of clicking add, they drag the widget to the location they want. For example:

I think this process could really create a solid usable widget system, but I also think that more change is required to the process of creating a widget in the first place.

In the scenario described about, and which I wrote about in a previous post — changing layouts using widgets, many more places use widgets to provide options. For example, the main area could contain a single post widget, that is only used for single posts, a multiple post widget, for archives, and a page widget. These do away with the need for multiple template pages as each widget deals with one specific situation. The problem with this is that widgets are too hard to create.

Widgets are simple enough to create for a plugin author, but theme authors should be able to define a PHP file as a widget by adding some code at the top, in the same way as the CSS file contains the theme details.

If the want to create a single post layout with an image on the left they create it as a file and add the widget code. They can then do the same for a single post layout with the image on the right, a larger image with text below it, and so on, without needing to worry about the plugin style code that would be needed in functions.php right now.

In the next few days I will release a plugin that allows widgets to be created from theme files in this way so you can see for yourself how easy things could be. All we need now is the new font end. Roll on 2.8.

In my view there are two types of widget. A widget that gets data from WordPress, and a widget that gets data from outside WordPress. In the first case some PHP will clearly be required, but the second? I think not.

There are a limited number of things that you might want to do to WordPress information when you display it in a widget. You may want to filter the data, combine two sets of data, limit the data, or add to the data, and you will usually want to do it to multiple records. Lastly you will want to create an HTML template, and a CSS template to use when outputing it.

It seems to me that these kinds of manipulations could be done with some kind of pseudo code, or even a simple UI so that all users can join in creating widgets, not just those that know how to write a plugin and use the WordPress API.

If you don’t know how to code PHP and if this kind of system was available is there any kind of widget that you would want, that you don’t have right now?

Beta 2 of 0.1 is now available for download, for anyone to test. I’d love to hear your comments on it.

P.s. There is still time to complete the poll on the WordPress focussed sites you visit regularly. I’ve had a great response so far.