Feb
1
2009

WordPress Theme Customization & Design – Creating Sidebars

Share
Email

Creating custom block or widget areas throughout your site means easier management in the long run. It can also give you some great options for performance improvements.

Single & Multi Page Widget Designs

If you find yourself switching around widgets on your home page (or any page you desire) you can use PHP Code Widget in combination with the tutorial/techniques I’ve described here: WordPress Custom Home Page Design – Widgetized Front Page.

Those individual widgets can be further enhanced by wrapping them with the same conditional code anywhere else in your site. For example:

  1. if (is_front_page()) {
  2. widget_functions_or_any_code();
  3. }

Design & Layout Planning

One of the important aspects of this is designing (sketching out) where you want predefined widgets to begin with. After that its just plug and play through the widget area. No need to be fancy.

  • Get it down on paper to help you visual the process of what you’re trying to accomplish.

During this phase its also good to do a bit of research

  • Surf similar sites in your own network
  • Poke around on the websites you have in your own RSS reader.

What setup/layout do they have?

  • What do you like?
  • What fits functionally within your niche?
  • What other widgets do they use that enhance user functionally and navigation through the site?

Your WordPress blog probably doesn’t have all the functionality that theirs has. If that’s the case, search for it here: http://wordpress.org/extend/plugins/

Create your list of blocks and then mock them in in your draft.

  • Consider their placement and ordering (if in a sidebar).

WordPress register_sidebar Functions

STEP 1: Inside your themes folder you should have (if not create it) a functions.php file. For WordPress to recognize the new side bars, you have to define them. Adjust divs and add/delete new sidebars as needed. See the example functions.php content below.

  1. <?php
  2. if ( function_exists('register_sidebars') ) {
  3.  
  4. //For a rightside box
  5. register_sidebar(array('name'=>'rightsidebar',
  6. 'before_widget' => '<div class="rightbox">',
  7. 'after_widget' => '</div></div>',
  8. 'before_title' => '<div class="rightboxtitle">',
  9. 'after_title' => '</div><div class="rightboxcontent">',
  10. ));
  11.  
  12. //For a leftside box
  13. register_sidebar(array('name'=>'leftsidebar',
  14. 'before_widget' => '<div class="leftbox">',
  15. 'after_widget' => '</div></div>',
  16. 'before_title' => '<div class="leftboxtitle">',
  17. 'after_title' => '</div><div class="leftboxcontent">',
  18. ));
  19.  
  20. //For topleft box
  21. register_sidebar(array('name'=>'topleft',
  22. 'before_widget' => '<div class="topleft">',
  23. 'after_widget' => '</div>',
  24. 'before_title' => '',
  25. 'after_title' => '',
  26. ));
  27.  
  28. //For topright box
  29. register_sidebar(array('name'=>'topright',
  30. 'before_widget' => '<div class="topright">',
  31. 'after_widget' => '</div>',
  32. 'before_title' => '',
  33. 'after_title' => '',
  34. ));
  35.  
  36. }
  37. ?>

Setting Up Multiple Dynamic Sidebars

STEP 2: You’ll need to create a sidebar file for each one that you’re adding. Every file should be named according to how you named the sidebars in your functions.php file. They should also always begin with “sidebar-”. For the topright file we named in the function above, the file name would be sidebar-topright.php. Make sure that file is saved/placed in your active themes directory: (/wp-content/themes/your_theme_name/)

Now you need to fill each of those sidebar files with a small amount of code. See below and choose one method or the other depending if you want something to be displayed by default. If this is your first time doing this, you might want to put something in there so you can debug a bit easier if something goes wrong. Having a default is generally a good idea incase that sidebar doesn’t exist later on (for whatever reason). Also make sure for each function call, you’re changing the name of the side bar you’re trying to call.

  1. //Option 1 (with a default if sidebar isnt available)
  2. <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('topright')) { ?>
  3. <?php } else { ?>
  4. Put something here if you want something to display by default.
  5. <?php } ?>
  6.  
  7. //Option 2: It can look like this if you dont have a default:
  8. <?php if (!function_exists('dynamic_sidebar') || !dynamic_sidebar('topright')) { ?>
  9. <?php } ?>

Setting Up Multiple Dynamic Sidebars

STEP 3: You’re going to have to edit your theme files.

Below is a mock up of a design/layout. Based on this, note how you would apply the code in the proper areas (likely within div tags, or td cells if its an older design) on your theme’s index.php file (/wp-content/themes/your_theme_name/index.php).

  1. <?php
  2. //this references a file in your theme folder named sidebar-topright.php
  3. get_sidebar('topright');
  4. //sidebar-topleft.php
  5. get_sidebar('topleft');
  6. //sidebar-rightsidebar.php
  7. get_sidebar('rightsidebar');
  8. //sidebar-leftsidebar.php
  9. get_sidebar('leftsidebar');
  10. ?>

Working With Multiple Dynamic Sidebars

The whole point of doing all of this is so that you can easily and quickly swap out widgets in various areas from the Design >> Widgets area in WordPress admin at anytime.

Technically you could skip all of this and directly edit each widgets function into your index.php file directly. In some cases this will be required if a plugin doesn’t have a built in widget. But, instead of editing index.php, you will now be editing the related sidebar in which you’d like the the widget to appear.

Theme Troubleshooting

If your new widget or sidebar only shows up on the front page you probably just need to add it to a few other template files. Such as the single.php , category.php. These do not need to exist by default, and if they don’t, will default to your index.php design setup. This is another reason why we go to the trouble to widgetize everything into sidebars. Once you have your sidebar areas setup, you don’t have to go into each of these files to make changes.

If you only want widgets to show up on certain pages, you can still do so within the sidebar-locationhere.php code manually. Referrer to all the conditional tags you can apply. There are a lot of options there, down to specifying widgets on a per page or article basis.

Performance

I use everything described above and then top it off with this plugin: Widget Cache

This allows me to cache the output of an individual widget for a period of time. This works really well for plugins that are non-unique on a per page basis. What I mean by this is they don’t have dynamic output based on the page you’re on, or do any kind of site/user logging.

That rules out using it with one of my favorite widgets: Yet Another Related Posts Plugin. If widget cache were to cache the output of this plugin on this post, it would also be displayed for another post. Which means irrelevant data.

Another favorite plug-in of mine, Simple Tags, adds a cloud widget of all your tags. Until you add a new post, this data is always going to be the same. A perfect candidate for Widget Cache.

If you need better performance in combination with all of this (on a page by page basis) WP Super Cache is the way to go.

Respond: Leave A Comment | Trackback URL

Entrupeners, Subscribe for the lastest tools, tips, and tutorials.


12 Responses to WordPress Theme Customization & Design – Creating Sidebars

  1. After reading this i am very thankful that word press has made this job a lot easier , all that code makes me feel woozy…

    Jason

  2. Wow, this has got to be the most comprehensive post I’ve seen to date on how to customize a theme for module layout and understanding deployment of sidebars.

    Thanks a bunch Rob, this is exactly what I needed to save not only some time, but some money as well. This just made it 50X easier for me to do.
    Thanks again!

  3. Hi Rob,

    Are you very well read in PHP?

  4. WOW! I’m with Swingers. I reckon this is counted one of the most comprehensive write-up on the subject. Setting multiple dynamic sidebar has been one area I dread to go beyond. Again thanks for the awesome tutorial.

  5. This is a really detailed post on working with WordPress. I’ve been trying to expand my use of wordpress but I felt crippled trying to figure out some of the ways to modify the default layout. This info is really reat. Thanks Rob!

  6. Rob-

    Do you know if there is a template to get your started? A shell, if you will that only has the structure so someone can start plugging in the content…

  7. @ben – yes, I’d say I’m pretty advanced with php though theres always things left to learned though.

    @augie – this kind of is the template. If you’re looking for practice before you muck with your live site I’d create a local wordpress install with xampp and test it out your copy/paste abilities with the default wordpress theme. After you do it once and know the placements etc. backup your current site and load it accordingly.

    If anyone needs help implementing this onto their own site use the contact form to get a hold of me and provide as much detail as possible. I’ll quote you based on the extent of the work involved.

  8. The most important thing is to plan and design the whole thing beforehand. You’ll finaly be able to customize everything the way you like even if it takes you a lot of time. However when you don’t have a clear idea of what you want you’ll never create something great.

  9. I just left a post on a forum for this exact info. Thanks.

  10. Interesting what you said about the caching.

    I love the idea of being able to cache the output of individual widgets, rather than the whole page.

    Thanks heaps for that! :-)

  11. It’s amazing to read and see that wordpress has made things much easier for blog owners. Thank for sharing ruf

  12. I don’t think you should even attemp it if you don’t have the gift for that. There’s nothing worse than people with no sense of color or style designing their own themes.

Leave a Reply

Custom Theme by Rob Malon | Content & Design © 2010 - RobMalon.Com - Chicago, Illinois