Widgetized web site. Beyond sidebars.

WordPress widget is a powerful tool when used properly. Too bad, many people who use WordPress for web site building haven’t heard of them. And many of those who heard of them, don’t realize the full potential. In this post, I’ll try to put some light on WordPress widgets.

So, what is a widget and what is it good for? WordPress widget is a block of something. It can be as simple as a paragraph of text or a piece of HTML markup. It can be a customized call to some WordPress function. It can be a mini application. It can have its own options. And it can have its own administration area.

WordPress comes with a few default widgets, which are very useful for blog web sites. These are things like search boxes, archive lists, links lists, recent posts and comments, etc.

WordPress provides a way to create a sort of container, where you can put your widgets. In most cases that I’ve seen, this container is placed in sidebar – a place where such functionality belongs on a blog.

But the thing is that WordPress puts no limitation on where you can use widgets. You can create a container on your article page, or in the search results, or on a front page. It doesn’t matter. And what is even better, you can have several such containers, each with unique set of widgets.

So, why would one want to use widgets instead of just coding these blocks in the theme? Because, widgets can be easily sorted, added to the site, removed from the site, or moved from one place to another – all that without any need for coding. Administration interface has a really simple drag-and-drop interface. Define widget containers in your theme, code some widgets, and then drag them and drop them anyway you like. It’s that easy.

Can we see an example? Sure, why not.

First of all, you need to register your widget container, which is confusingly called sidebar. Here is how to do it. In one of your theme files (I prefer functions.php, but you can use anything at all – index.php, sidebar.php, search.php, whatever), add these lines:

You just created a widget container called ‘Widget Home’. (Here is a good description of widget API, if you need one.) Now we need to place these container somewhere in the theme. Somewhere, where we want it to appear. This is up to you. You can choose any place at all – front page, search results, sidebar, footer, you name it. Once you decided where you want it to be, add these lines of code:

If you will accidentally use your theme on a WordPress installation which does not support widgets, or if your widget container is empty, you’ll have a “Widget Home is broken.” string printed out. You can, of course, change it. For example, you can have a fallback include file, which you can call with include(‘missing_widgets.php’).

So far so good. What’s next?

Now you need to place some widgets into your widget container. Login to administration interface and navigate to Presentation -> Widgets. You’ll see a rectangle with ‘Widget Home’ title on top. You’ll see a rectangle with ‘Available Widgets’ below. And you’ll see some widget boxes in there, such as ‘Recent comments’ and ‘Links’. Simply drag-and-drop these widget boxes into your widget container, reoder them as you see fit, and save your layout. Check your web site. Cool, isn’t it?

See, widgets are not only for sidebars. They are for anything and everything. You can have several widget containers (sidebars, eh?) defined. For example, you can have a setup like this:

In your administration area, you’ll see three widget containers now – ‘Left sidebar’, ‘Main area’, and ‘Right sidebar’. You can drag-and-drop widgets between them. And you can use them from in your theme like so (in index.php file, for example):

Now your front page can be easily customized and organized with some drag-and-drop in the administration area. No need to play with PHP files anymore.

In the next post, we’ll see how to create our own widgets.