I’m about to go all WordPress Geek 2.5 on y’all now. So, if you don’t want to look at PHP code or have no clue what a widget is, then you might want to take a break from this post.
WordPress theme developers. Pay attention.
Ian Stewart just created the “we need to kill the sidebar bandwagon,” and it’s about time you all hopped on.
The basic idea is that with all the things we can do with widgets, it makes no sense to call these widgetized sections sidebars at all. Why would we call a footer or a header widget area “Footer Sidebar” or “Header Sidebar”? You can even vote on this idea.
Since a few of you requested it, I’ll give you a tutorial on how to take full advantage of WordPress 2.5’s new widget interface.
The setup
This is totally new code straight from the development versions of my old and new themes.
The first thing you need to decide is what you want to widgetize. For the sake of this tutorial and the No Sidebar Bandwagon, let’s pretend our theme has no sidebars at all. I’ll try to avoid using the term “sidebar” as much as possible.
I’m going to keep this real simple. Here’s what our page layout will look like:
- Header
- Content Area
- Footer
Each of these sections is widgetized. Take a look at what the setup of the basic page and widget panel will look like (click images for larger view):
Adding widgets to the widget panel
Now, we need to put together a bunch of widgetized areas for our widget panel in the WordPress dashboard. Typically, we’ll put these in the functions.php file of the theme we’re using.
I’ve found the best way to do this, which is a lot less coding, is to create an array of all the sidebars we want to use. Plus, it’s much cooler.
Note: This tutorial uses text strings that are ready for localization.
<?php
/*****************************************************
Pimp out this page with an endless amount of widget sections.
*****************************************************/
if(function_exists('register_sidebar')) {
// Create widget names and put them in array
$my_widget_name = array(
__('Header'),
__('Content'),
__('Footer'),
);
// Define how we want our widgets to display
// Replace ridiculous list items with custom style
foreach($my_widget_name as $my_widget) :
register_sidebar(array(
'name' => $my_widget,
'before_widget' => '<div id="%1$s" class="widget %2$s">',
'after_widget' => '</div>',
'before_title' => '<h3 class="widget-title">',
'after_title' => '</h3>', ));
endforeach;
} ?>If that seemed a bit complicated, let me break the process down a bit. We’re first creating an array of all our widgetized sections. The reason we’re doing this is because we don’t want to have to write the second part of the code over and over and over. So, for the second part, we just loop through each widget section and register it.
Displaying your widgets on your blog
I’ll show you how to display this for your header section. It will be basically same for each of our sections.
<div id="header-widget-area">
<?php dynamic_sidebar(__('Header')); ?>
</div>Widgetize your site!
Now, you have the basic tools to widgtize your site in any way you want. You could create widgets for any section of any page you’d like. You could build a three-column all widget theme if you wanted. The only limit here is your preconceptions of what widgets are and what they can do.
WordPress’ built-in conditional tags are your friends. Use them.
If you’re using my Options theme, then I have a special tutorial for making many sidebars.
I encourage you all to start thinking about what more we can do with this.
Cool tutorial, JT! It may make things easier if you placed conditional tags on your widgets though. That way you could define which widget shows up on which page, WITHOUT having to create 3 different widgetized areas for each.
Additionally… I still maintain 2.5’s widget interface hurts more than it helps. Sure, it’s nice that the page doesn’t get super crowded when you have 3+ sidebars, BUT at the sacrifice of drag and drop functionality BETWEEN sidebars (and the impossibility of moving Text/RSS widgets between sidebars). And THIS I view as an essential function if your whole theme is widgetized. It just becomes a tedious pain to change your layout.
Bryan
Thanks. I definitely understand how it might seem like a good idea to put conditional tags in widgets. Heck, that’s a great idea! The problem with this is getting all theme authors and widget developers to comply with this for it to truly work well. That’s unless I’m missing something — it is late here, and I’ve been teaching most of the day.
For example, a user might be using a theme with 3 widget sections (home page, single page, and archives page). Along comes a widget that has conditional tags. OK. So, a user drops the widget in the first widget section. They assume that the widget will work on whatever sections they’ve defined it for. Nope. They’d still have to add the widget to all three sections because the widget won’t have a chance to load on the other 3 sections because of the way the theme was developed. Then they’d have to define it three times.
I think the conditional tags in widgets would work great as theme-specific widgets.
I hope that makes some kind of sense. I’ve ran your idea through my head several times trying to come up with a good solution for this. Like I said, I think it’s a great idea but would take a lot of compliance from too many people, unless someone with more brain power than me can kindly point me in the right direction.
The code above also defaults to the Home widget section if nothing is used in the other widget sections.
As far as 2.5’s interface goes, I still think the WP team will get it right and fix some of the problems with usability by 2.6. If we’re lucky, maybe they’ll come up with a fix for saving text/RSS widgets in a minor release.
A question about how you use widgets (it’s good to know these things for some reason I’m sure): Do you move your widgets around on your site a lot? From a lot of the reactions I’ve seen, it seems like a lot of people do this.
Another little fact: JustinTadlock.com uses no widgets! This is coming from the guy that praises the new widget interface.
Of course, I just code all this stuff directly in my personal themes.
Just curious:
the more php calls – the more server load – the more processes – the more data stream – the more costs
wrong?
milo
I don’t see this as being costly at all. Using conditional tags like this is already a pretty standard thing to do in WordPress themes. Even with 100 different widgetized sections, I see the costs as being pretty minimal.
Of course, don’t take my word for it. I could be wrong. Maybe we should do some kind of experiment to see how much load 50, 100, even 200 sections would put on a blog.
The best move would be to have WP2.6 that has a three layer widget admin page.
Tops layer would allow up to 4-6 widget areas to be maintained like the old WP2.3+ version with drop n drag interface.
below that would be 2 hidden areas that hold place holders for widget areas and then widgets.
The idea being you open level 2 the widget selection area and drag the widgets you want to maintain to the level 1 top area that shows the widgets in each area.
then you close level 2 and open level 3 to view available widgets to drag up to the widgets in the maintenance level 1.
anyone follow that or think its a good concept?
Good idea, let’s do the experiment, drop me a line so we can settle it down.
As far as I know, each php query performs some data stream to wp db, so there should be some increasing data stream, but we’ll see that after the experiment or ask some wp wiz?
Btw: how far is your own design going?
dameryworld
I think you lost me at some point there. I’m sure the WP team will come up with some more usability. As I’ve mentioned on the post where we discussing the new widget panel, sometimes you have to take a step back in usability for better features.
milo
From what I can tell, we’re not doing any PHP queries; we’re checking something that’s already loaded for each page view of WordPress. So, this stuff is already available, at least I think so.
Take a look at the Query Overview, particularly Section 4.2. It took a little digging to find this.
I’ve also placed this code in the footer of my local version for testing:
This is giving me the same query count no matter how many conditional tags I’m using. Of course, I haven’t exactly tested this with widgets yet.
I’m not sure what an optimal number of queries would be (well, none would be optimal), but I imagine that using 10 widgets in your sidebar won’t help much.
Which brings me to my next point, I’m almost finished with my new design, so I’m actually using a version of the code in this post for my sidebar. I don’t use widgets for my personal site because I just code those functionalities in myself.
Here’s an image of what the redesign currently looks like. It’s based off my old Faded Green Leaf theme, Movable Type, and the WP redesign. I want to keep a purely blog look, so I’m trying not to complicate things too much.
[...] Widgetize This — If you use Wordpress this might be useful. [...]
[...] Contact your local public or university library for more than this summary. [↩]And thanks to Justin Tadlock the widget master for the shiny new Cleaner Gallery plugin! [↩]While I was drafting this, an even more exasperated [...]
Sorry JT, here is the high level of my concept.
The objects are:
1. Widget plugins(TEXT, BLOG_ROLL, etc.) ~WP
2. Widget areas(sidebars) ~WA
then we have basically a sandbox for putting WP into WA’s
Widget admin page
[WA Sandbox] <- top area is where we drag WA and drop WP’s into them.
[WA repository] <- middle area where we list all widget areas.
[WP repository] <- bottom area where we list all Widget plugins.
drag n drop WA into Sandbox to show WP’s in WA.
drag n drop WP into WA’s in Sandbox click to save object relationships. just drag n drop….easy.
*Note: just like the 2.3 version you would be able to modify the parameters of individual WP’s. Like adding text to a text WP.
[...] Tadlock, who’s work I admire, posted over on his blog about something that I’ve been thinking about myself for quite some [...]
So this is how you created the “Options” theme. I was wondering what the hidden secret was behind the ability to pick and choose the main body content. It makes so much more sense this way, than trying to code one massive sheet. Plus, it’s a perk for people like me who definitely aren’t programmers. hahaha
Keep up the good work, Justin.
dameryworld
Sorry, it’s taken me so long to reply. Now, it’s much easier to understand. This looks like a very good idea.
I’d like to do a good visual representation of how we could do this thing.
U.S.
Well, the Options theme is a bit more complicated than this. The main body content doesn’t work off widgets at all. The Structure theme actually works more like this than anything, but it’s a bit outdated and will be getting an update soon.
The problem right now is a lack of widgets for adding much of the content you’d normally see on a page, such as the post content and those type of things. Once we get widgets for things like that, there won’t be much need for us theme authors.
Hey Justin, thanks for this code. I’m playing around with it and think I’ve implemented correctly, but when I add a widget and hit save changes in the admin area, the page won’t reload, it just goes blank. Hitting back and reload shows the changes were saved and the widget displays correctly. Any ideas?
I’m not sure. This shouldn’t be a problem with your widget control panel because it doesn’t really do much there.
If you stop by the forums and post your code there, I’ll have a look at it, maybe figure out what’s going on.
I am glad someone else is thinking of this because this is obvious to anyone that has seen the old sidebars. I’m sorry wordpress devs have chosen to throw that away that, and move to the counterintuitive and not yet fully functional sidebar system found in v2.51.
How about this: the widget target areas are resizable using jquery or whatever, thus allowing the end user to really have a custom, unique, layout.
I sure miss the modules of joomla also, where you can create custom modules by just pasting some code in, that doesn’t get deleted if you unpublish it.
Great work, and I also like your latest theme! Keep it up.
[...] Widgetize This!: Taking full advantage of WordPress 2.5’s widget interface (tags: wordpress) [...]
Thanks for your input Chris. I’m eagerly awaiting 2.6 to see if we get more usability on the backend. The direction widgets have gone with 2.5 is great for the front end (your blog’s display) but a slight step back with the admin widget panel.
Justin,
Great tutorial. Thank you for that. What I am failing to understand tough is some of the advantages.
* I want show different sidebars at my site
* At the moment I did this with simple WP conditionals, in which I simply manually add the code I want to show. Like:
if (!is_page()) {
wp_list_categories(...)
}
if ( is_page('Blurb') )
{
Custom HTML
...
My question is, if all the widgets that I create go inside the functions.php for each theme, then what is the point of replacing these conditions like I have above with conditions to display widgets, since the only thing they would do is to call my custom widget function which outputs the exactly same code from each relevant conditional as I have above?
I guess that this would only be really useful if we create some sort of admin panels for our custom widgets, right?
Moreover, could we have widgets that are site-wide (not only to given theme) without touching any of the core WP files? I can see the value since customisations would be cross-themes.
Pedro
This isn’t really a tutorial on using widgets in sidebars, but it could be carried over to sidebars.
Nevertheless, I set my sidebars exactly as you set them. Basically, I have something like this in my
sidebar.phpfile:I don’t use widgets on my site.
Here’s a couple of advantages:
Be able to easily use any widget anywhere (considering it’s a “multi-widget”).
Theme developers can give users a wide array of options without having to do too much work.
There are other advantages to this posted above, but your question was specific to sidebars.
The average user doesn’t want to use the conditional statements like you or I would, writing their own code. They want simplicity. Widgets give them that simplicity.
“Site-wide” widgets can be written in the form of plugins. Most themes don’t come with their own widgets. Most widgets come from plugins.
Overall, this isn’t that useful if you’re just creating your own theme with its own functions. It’s not that useful if you can write those functions for the theme.
The post is more about asking theme developers to start thinking outside the box with their theme releases.
Justin,
Thank you for the reply.
Well one of the reasons why I preferred to use the widgets is because it seems to render the sidebars in some sort of XHTML compatible way, which when I try to call using the regular wordpress functions, I have issues with.
If you try to validate the XHTML of the pages in my site which contains a sidebar listing the categories or topics, you get an error of:
Now it seems that the validator doesn’t like the fact that the header is a tag , which contains other tags of type . But this is how WP renders it by default. I am not sure what I am doing wrong though but when I use a widget, the code is “prettyfied” and returns no XHTML errors.
OBS: I am not counting any errors due to poor youtbue embedded objects, as I (/me thinks) have no control over them.
Hello
I followed the above as I wanted to widgetize my footer. It has worked in that I now have widgets on my footer but they are displaying in a vertical column like a sidebar when I would like them to be horizontal across the footer, or in 3-4 columns across the footer. I can’t work out how to achieve that with the above example. Can you help?
Thanks
Thank you for this great tutorial it is just what I was looking for to help with a problem I had.
[...] few months ago, I wrote about how we could widgetize different areas of our site. Today, I want to ask everyone what areas should be [...]
Thank you for this. It answers (almost!) a question I’ve had for quite awhile now about formatting widgets for my sidebar. The “almost” part is this: after making the changes to the functions.php and sidebar.php files, the widgets appear–and function–correctly. The problem is that whenever I add a new post, edit an existing one, add a widget, or really, make ANY change to my website from the wp-admin page, the admin screen goes blank immediately after I press “update”. I can get the admin pages to reappear by visiting another admin page (i.e., if I update a post, I then get the blank page. I can then type in the URL to wp-admin and everything shows up again). At no point is the website itself affected — it always performs normally.
If I either 1) remove the changes to the functions.php and sidebar.php files OR 2) change to another theme, I don’t have any problems.
Do you have any idea how I might remedy this? I’d be grateful for your help. Thanks!
Really appreciate you walking through this for me. Never really got out of using the basics for my blog, but this really is interesting.
Re my 12/21/2008 post:
For any of you with a similar problem, try removing any blank lines from your theme’s functions.php file. This worked for me.
good idea…
but need to create easy editable widgets for header, footer parts…..
need to think about it….
Oh my god, what an Idea! This will help newbie users or clients to easily customize a theme. Thanks sharing this cool post
will give a try soon
That is a pretty interesting concept, getting rid of sidebars all together. But I like the crazy idea! It would definitely set your site apart from the thousands of other blogs out there. I am just getting into learning some php stuff, but I find wordpress to be a great tool for learning as you can test things out in real time and “tweak.”
[...] Widgetize This. [...]
Here is a hug from me for this gr8 article.
Thank you very much, dude. You gave exactly what i was looking for.
Rock on.
[...] was inspired by Justin Tadlock’s Widgetize This [...]