37 Responses

  1. Bryan
    Bryan Published |

    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.

    Reply
  2. milo
    milo Published |

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

    Reply
  3. dameryworld
    dameryworld Published |

    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?

    Reply
  4. milo
    milo Published |

    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?

    Reply
  5. PHP Weekly Reader - April 20th 2008 : phpaddiction
  6. Reading Circle Books » » WordPress 2.5 Widgets — Taking the Load Off Your Mind
  7. dameryworld
    dameryworld Published |

    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.

    Reply
  8. Joining The “No Sidebar Bandwagon” | FreshPress Themes
  9. U.S. Common Sense
    U.S. Common Sense Published |

    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.

    Reply
  10. dave
    dave Published |

    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?

    Reply
  11. chris
    chris Published |

    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.

    Reply
  12. Skylog » Blog Archive » links for 2008-05-30
  13. Pedro
    Pedro Published |

    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.

    Reply
  14. Pedro
    Pedro Published |

    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.

    Reply
  15. elle
    elle Published |

    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

    Reply
  16. Steve McDaniel
    Steve McDaniel Published |

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

    Reply
  17. If you were a WordPress theme developer: Widget areas
  18. henigushi
    henigushi Published |

    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!

    Reply
  19. Abalone Beads
    Abalone Beads Published |

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

    Reply
  20. henigushi
    henigushi Published |

    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.

    Reply
  21. Victor
    Victor Published |

    good idea…

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

    need to think about it….

    Reply
  22. Nicholas | Pixobyte.com
    Nicholas | Pixobyte.com Published |

    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

    Reply
  23. Internet Marketing Consultant
    Internet Marketing Consultant Published |

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

    Reply
  24. Widgetize This | Widgetifyr.com
    Widgetize This | Widgetifyr.com at |
  25. Ahmad Bagadood
    Ahmad Bagadood Published |

    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.

    Reply
  26. Dynamic menu for your WordPress theme | Christian Schenk
  27. christina
    christina Published |

    not sure why my code isnt showing up in the last 2 post but I was wondering where you put the div id=header-widget-area
    php dynamic_sidebar(__(‘Header’));
    ?

    Reply
  28. ian
    ian Published |

    (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.)

    Agree with you on this as an average user my self i want is a simple as pos

    Reply
  29. Ricky
    Ricky Published |

    Nice tutorial. Having a sidebar and footer is really important. I am looking for creating 3 column widgetized header area for my theme. I hope I can make it properly.

    Reply
  30. Valerie
    Valerie Published |

    Just wondering if there’s an update to this for adding widgetized areas in parent/child themes off the current Hybrid Core?

    Reply

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.

Please use your real name or a pseudonym (i.e., pen name, alias, nom de plume) when commenting. If you add your site name, company name, or something completely random, I'll likely change it to whatever I want.

css.php