Widgetize This!
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(
__('Home Header'),
__('Home Content'),
__('Home Footer'),
__('Single Header'),
__('Single Content'),
__('Single Footer'),
__('Archive Header'),
__('Archive Content'),
__('Archive 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 class="section">',
'after_widget' => '</div>',
'before_title' => '<h2 class="section-header">',
'after_title' => '</h2>', ));
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.
<?php
/*****************************************************
Creating our pimped out widgetized section.
*****************************************************/
// If on the home page
// Need to use is_home() for WP versions older than 2.5
if(is_front_page())
$my_widget_id = __('Home Header');
// Single posts
elseif(is_single())
$my_widget_id = __('Single Header');
// Archives
elseif(is_archive())
$my_widget_id = __('Archive Header');
// Default to Home widget section
else
$my_widget_id = __('Home Header');
// Display the widgetized area
echo "<div id='header-widget-section'>";
if(function_exists('dynamic_sidebar') && dynamic_sidebar($my_widget_id)) :
else :
// Default to Home widget area if nothing is set in the widget panel
if(function_exists('dynamic_sidebar') && dynamic_sidebar(__('Home Header'))) :
else : _e('Add content to your widget section through the widget control panel.');
endif;
endif;
echo '</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.