WordPress Bits

Hacking WordPress. Keeping the bits together.

Widgetized web site. Beyond sidebars.

Posted by Leonid Mamchenkov on June 16, 2007

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:

Register sidebar

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:

Dynamic sidebar

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?

Custom sidebar

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:

Multiple sidebars

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):

Template with multiple sidebars

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.

24 Responses to “Widgetized web site. Beyond sidebars.”

  1. Michel said

    Very interesting:)

    I’ll wait for Part II with great interest!

    BTW, can I include PHP code in a text widget from the original WordPress theme?

    I think I tried recently and code wan’t parsed :-(

    K2 has a “PHP code sidebar widget” and if you include PHP there, it’s processes OK?

    But no luck with a text widget in WordPress origional theme.. Any help would be appreciated :)

  2. Michel said

    (Sorry for typos… Too tired, I guess…)

  3. Hi Michel,

    I’m glad you liked the post.

    Regarding PHP code in Text widget – I don’t think it works. This kind of functionality is said to be provided by Widgetize Anything plugin, but I haven’t tried it myself, so no promises here.

  4. […] widgets. Widgets 101. In the last post I covered widget containers and promised to tell you how to create widgets. I also mentioned that widgets can be of a varying […]

  5. TO use php inside your widgets you can use http://samsarin.com/samsarin-php-widget plugin. It add’s functionality similar to Text Widget which can parse php code.

  6. Thanks for the link. Keep them coming. :)

  7. Bit of offtop as advice: it is better to leave code samples as texts (possibly colored) so people can copy parts of it and modify, insead of retyping all of it from the image as it is now.

  8. Alexander,

    Yes, I agree. The problem is that WordPress.com strips way too much from the post text for security reasons. As a result, code snippets are hard to do (encode HTML entities, one way only editing, etc) and are way too fragile (switching between visual view and code view removes much of the formatting again).

    I started this blog with code in text, but decided to use images very soon, as these are much easier to make (2 seconds instead of 2 minutes per piece) and they look much better too.

    Also, the code snippets that I’m posting are mostly short, just a few lines, less than a full page length. The code here is for explanations and examples, not for the actual functionality.

    If you have any suggestions on how to make this better, please let me know. ;)

  9. Michel said

    Yeah, switch blogging platform ;-)

    Go from wordpress.com to your own domain and post any code snippets you like:)

    Code should remain code to be easily copy-pasted if needed, modified, etc. :)

  10. Michel,

    to be honest, I’m not very impressed with text code snippets on ANY blogging platform. I tried many – Blog:CMS, NucleusCMS, LiveJournal, WordPress, SimpleBlog (or whatever was its name), and a few others. I guess our editing tools aren’t there just yet.

    But don’t worry.. I’m keeping an eye on this issue. ;)

  11. Michel said

    Sure:)

    Well, usually you should simply add tags CODE, PRE, and that’s all:)

    (and also to make sure the box with the code doesn’t exceed column’s width (adding ‘overflow: auto’ and some max-width, maybe))

    What more should be expected from a code snippet, published in a blog?

    Not much, I believe:)

    BTW, I’m off to explore http://samsarin.com/samsarin-php-widget to see if it’ll work for me:)

  12. Michel,

    Well, it sounds simple and straight forward. But it’s not like this. :)

    One of the things that you’ll miss immediately is syntax highlighting. Some consider this a nice feature. For others, like myself, it’s an essential. I can’t consume code without syntax highlighting anymore. I’m just too slow.

    Another thing that happens is character conversion. Normally, one uses WYSIWYG editor for post writing. How does one insert tags like CODE and PRE? WordPress’ editor offers this Code tab where you can edit the HTML of the entry. Now that you’ve edited HTML and switch back to WYSIWYG editor, some of the brackets are converted (& lt ; things). And spaces of the indentation are gone. Switch back and forth a few times, and the editor is confused beyond no control…

    Then you have the fancy quote marks. When you write regular text, many CMSs convert it according to typesetting rules. One of those rules is about the quotation marks. You know, double backword quote marks at the beginning and double single quote marks at the end of the quoted text. The problem is that there is no need to do so in CODE snippets. Because when someone copy pastes this code later on, it just doesn’t work (syntax errors).

    Once again, these problems aren’t WordPress specific. I’ve seen them more or less on all CMS platforms that I’ve used. It just seems that our tools aren’t good enough just yet. But we are getting there. See CodePress for example. There are talks on wp-hackers mailing list about integrating something like this with WordPress. Once one of the CMSs has something like that, others will follow fast.

  13. Michel said

    Interesting…. I didn’t know some of these details… Thx! :-)

    WordPress, btw, often changes code on its own… Sometimes you have to switch off completely the WYSIWYG editor so you can insert a simple DIV… :-/

    Hope this’ll change soon:)

    Are you on the wp-hackers mailing list?… I wonder how to push a little change in WP (a bug I have discovered)… I’ve logged it in the TRAC but still no results….

  14. Michel,

    yes, I am reading wp-hackers. But I haven’t used TRAC yet. I’m just keeping myself updated on the latest developments and arguing here and there. No actual tractivity ;)

    Maybe you can subscribe and buzz the developers about your issue. They seem to be pretty responsive. You can try the forum…

  15. Michel said

    Great, thx:)

    The forum — nooo, no luck there… I posted a question, no response at all:( So tried TRAC… Pity I can’t hack it (propose a fix, I mean) myself… :-/

    http://trac.wordpress.org/ticket/4427

  16. Michel,

    Yes, the forum isn’t the best place of the WordPress community right now. I haven’t even posted anything in there… Only searching for answers and rarely so.

    I see that there was some activity in Trac regarding your issue. It’s marked for branch 2.4, which is not too far away. :)

    In the meantime, it might be possible to get a workaround with Apache’s mod_rewrite. In your .htaccess you could have a rule that would redirect requests from /something/wp-uploads/some_file to /wp-uploads/some_file . I don’t know if that would break the actual uploading though. :)

  17. Michel said

    apache/.htaccess might work, but still the URLs will be wrong in WordPress, and this is what puzzles me (and I’d like to see it fixed…)

    So better to search what part of the WP code makes the error… :-) I’ll try, I’m just not very strong in PHP:)

  18. adam said

    naming your sidebars is a good idea, but with 2.2.x, i’ve found that i’ve had to also add 'id' => 'right', to the array.

  19. Adam,

    if I understand it correctly, IDs are used for cases, where the same widget can be used several times. Like the text widget. There is a way to automatically generate unique IDs with WP.

    One day I’ll dig deeper into that and will share the findings.

  20. adam said

    no, i wasn’t clear. for themes, your code should be something like


    'before_widget' => '',
    'after_widget' => '',
    'before_title' => '',
    'after_title' => '',
    'id' => '1',
    'name' => 'Left Sidebar'

    if you only include name, and not ID, the theme borks in strange ways (sometimes related to static front pages)

  21. Adam,

    this is probably very specific to a theme used. But it’s good to know, in case random problems pop up. Thanks for sharing.

  22. […] Here are some helpful links for coding in WordPress: Codex.Wordpress – Theme Development Mastering Your WordPress Theme – Hacks and Techniques Change Default Thumbnail Size – This should be an admin option! Gravatars – Like politics, gravatars is everywhere! WordPress Widgets […]

  23. Damis said

    This seems not to apply to 2.5… Any updates?

  24. […] widget in the sidebar […]

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

 
%d bloggers like this: