33 responses to “Widgetize This!”

  1. Bryan

    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.

  2. milo

    Just curious:
    the more php calls – the more server load – the more processes – the more data stream – the more costs
    wrong?

  3. dameryworld

    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?

  4. milo

    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?

  5. PHP Weekly Reader - April 20th 2008 : phpaddiction

    [...] Widgetize This — If you use Wordpress this might be useful. [...]

  6. Reading Circle Books » » WordPress 2.5 Widgets — Taking the Load Off Your Mind

    [...] 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 [...]

  7. dameryworld

    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.

  8. Joining The “No Sidebar Bandwagon” | FreshPress Themes

    [...] Tadlock, who’s work I admire, posted over on his blog about something that I’ve been thinking about myself for quite some [...]

  9. U.S. Common Sense

    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.

  10. dave

    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?

  11. chris

    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.

  12. Skylog » Blog Archive » links for 2008-05-30

    [...] Widgetize This!: Taking full advantage of WordPress 2.5’s widget interface (tags: wordpress) [...]

  13. Pedro

    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.

  14. Pedro

    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:

    document type does not allow element “li” here; missing one of “ul”, “ol”, “menu”, “dir” start-tag.

    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.

  15. elle

    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

  16. Steve McDaniel

    Thank you for this great tutorial it is just what I was looking for to help with a problem I had.

  17. If you were a WordPress theme developer: Widget areas

    [...] 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 [...]

  18. henigushi

    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!

  19. Abalone Beads

    Really appreciate you walking through this for me. Never really got out of using the basics for my blog, but this really is interesting.

  20. henigushi

    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.

  21. Victor

    good idea…

    but need to create easy editable widgets for header, footer parts…..

    need to think about it….

  22. Nicholas | Pixobyte.com

    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

  23. Internet Marketing Consultant

    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.”

  24. Widgetize This | Widgetifyr.com

    [...] Widgetize This. [...]

  25. Ahmad Bagadood

    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.

  26. Dynamic menu for your WordPress theme | Christian Schenk

    [...] was inspired by Justin Tadlock’s Widgetize This [...]

Leave a Reply

By submitting a comment here you grant this site a perpetual license to reproduce your words and name/web site in attribution.

WordPress-o-Sphere

  • WordPress 2.8 – "Baker"
    WordPress 2.8 adds hundreds of bug fixes, adds cool functions for themes, boasts a new widget API, and makes custom taxonomies easy for end users.
  • WeRockWP
    WeRockWP recognizes and showcases the individuals who contribute much to the WordPress community. These individuals are called WordPress Rockstars.
  • wpazo
    The all-signal, no-noise, source for the best WordPress stuff.
  • BuddyPress 1.0 has arrived
    The long-awaited BuddyPress (a set of plugins that turns a WordPress MU install into a social network) has been officially released.
  • BuddyPress for WordPress (not MU) coming
    It looks like BuddyPress will also be released for normal WordPress installs (not just WPMU).