5 Useful And Creative Ways To Use WordPress Widgets

Advertisement

If you’ve been reading some of the previous WordPress-related articles here on Smashing Magazine, you’ll know that WordPress is much more than a blogging platform. It can be used as a CMS, too. And WordPress widgets are a powerful tool in your WordPress development arsenal.

When you think of WordPress widgets, you may think they’re just a way to rearrange various items in your blog’s sidebar without touching any code. Sure, that’s nice and all, but that’s really just the tip of the iceberg of all the things WordPress widgets can do.

You may be interested in the following related posts:

1. Multiple Widget-Ready Areas

Screenshot

A widgetized theme has come to be expected by theme users and developers alike. Nowadays, however, just one widgetized area doesn’t cut it. The first step to using widgets on your WordPress website is to widgetize your theme, and that’s really not that hard if you have the right code in place.

Register the Widget Areas

To have multiple widget-ready areas, the first thing to do is register the widget areas in the functions.php file of your WordPress theme. Let’s say you have a three-column theme, and you want to have two different sidebars on the left and right side:

<?php
  register_sidebar( array(
    'name' => 'left-sidebar',
    'id' => 'left-sidebar',
    'before_widget' => '<div id="%1$s" class="%2$s widget">',
    'after_widget' => '</div>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>'
  ) );
  register_sidebar( array(
    'name' => 'right-sidebar',
    'id' => 'right-sidebar',
    'before_widget' => '<div id="%1$s" class="%2$s widget">',
    'after_widget' => '</div>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>'
  ) );
?>

Activate the Widget Areas

The next step is to put the dynamic sidebar code in the actual sidebar files. Depending on your theme, this could be located in a sidebar.php file, or elsewhere. Here’s the code to use:

<?php if (!dynamic_sidebar("left-sidebar") ) : ?>
Default left sidebar stuff here…
<?php endif; ?>
<?php if (!dynamic_sidebar("right-sidebar") ) : ?>
Default right sidebar stuff here…
<?php endif; ?>

The code between the PHP tags will be displayed if no widgets are currently used in the relevant widget area. For example, if no widgets are used in the “left-sidebar” widget, then “Default left sidebar stuff here…” would be displayed instead.

Sources:

2. Widget Logic

Screenshot

Sometimes you may not want the same widgets to appear the same way on every single page of your blog. This is where the Widget Logic9 plug-in comes in handy.

After the plug-in is installed, a new “Widget Logic” input box is displayed in the options box of every widget you use. In this box, you can type a series of WordPress conditional tags to control where exactly the widget is displayed.

In the screenshot above, the Calendar widget is set to display only on the page called “Evil.” You can use many more conditional tags as well.

Examples

  • Display only on the home page: is_home()
  • Display only on individual posts: is_single()
  • Display only on pages: is_page()
  • Display on archive pages (category, tag, etc.): is_archive()
  • Display on search results pages: is_search()
  • Display on all pages except the home page: !is_home()
  • Display on “Advertise” or “Contact” page: is_page('advertise') || is_page('contact')

Simply type something similar in your own Widget Logic boxes, depending on where you want the widgets to display.

Sources:

3. Query Posts

Screenshot

For those who don’t know, the query_posts template tag is a powerful WordPress function that you can use to control how different posts and pages show up in the loop.

However, if you’d rather not mess around with more PHP code than is necessary but still want to take advantage of the query_posts tag, you can use the Query Posts12 widget to display WordPress content in almost any way you can think of.

After installing and activating the plug-in, you will have a new “Query Posts” widget available in the WordPress widgets menu.

What It Can Do

  • Display posts by tag, category, author, time/date or custom field keys/values,
  • Display however many number of posts you want,
  • Order posts by date published, title or ID in either ascending or descending order,
  • Display posts with full content, as excerpts or in a list,
  • Show WordPress pages.

Source:

4. 404 Templates

Screenshot

A lot of WordPress themes out there, including the default WordPress theme, don’t offer anything useful in their 404 templates. For example, if you land on a 404 page of a WordPress website that uses the default theme, you’ll be greeted with a message that says “Error 404 – Not Found,” and that’s it.

There are plenty of WordPress widgets you can use to spice up your 404 page and make it more useful to visitors who are trying to find content. The widgets “Recent Posts,” “Categories” and “Archives” come to mind.

The Code

The first step is to register the widget area in WordPress. To do this, open up your theme’s functions.php file, and put the following code in it:

<?php
  register_sidebar( array(
    'name' => '404',
    'id' => '404',
    'before_widget' => '<div id="%1$s" class="%2$s widget">',
    'after_widget' => '</div>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>'
  ) );
?>

Now that the widget is registered, you’ll have to edit your theme’s 404.php file and add the following code:

<?php dynamic_sidebar( '404' ); ?>

That’s it. You can now place any widgets you’d like in your “404” widget, and they will be displayed every time a visitor lands on a 404 page. Load it up with things like a search box, recent posts, category listings or maybe a few Query Post lists.

Source:

5. Insert Ads Between Posts

Screenshot

You can code your theme to insert a widget in between a certain number of posts. Some people use this to insert advertising, but the sky is the limit when it comes to widgets.

The Code

As we did when widgetizing the 404 template, the first step to setting this up is to register the widget area for the index insert. Open up your functions.php file again and insert this similar code:

<?php
  register_sidebar( array(
    'name' => 'index-insert',
    'id' => 'index-insert',
    'before_widget' => '<div id="%1$s" class="%2$s widget">',
    'after_widget' => '</div>',
    'before_title' => '<h3 class="widget-title">',
    'after_title' => '</h3>'
  ) );
?>

To set it up on your main index page, you’ll need to open up the index.php file of your theme, locate the “endwhile” near the end and put the following code directly above it, so that it looks like this.

<?php if ($count==2) { ?>
<?php dynamic_sidebar('index-insert') ?>
<?php } ?>
<?php $count = $count + 1; ?>
<?php endwhile; ?>

The above code will insert the “index-insert” widget area right after the second post. You can change the $count==2 number to something else, according to the post you’d like the widget area to be displayed after.

If you want ads to show up in between your archive listings, such as on category or tag pages, you may have to insert the above code in other files, including archive.php, category.php and tag.php. You can even control which ads are displayed on which pages by using conditional tags, such as is_archive(), is_category() and is_tag(), in the Widget Logic plug-in.

Source:

More Widget Resources

Related posts

You may be interested in the following related posts:

(al)

Footnotes

  1. 1 http://www.smashingmagazine.com/2009/07/02/power-tips-for-wordpress-template-developers/
  2. 2 http://www.smashingmagazine.com/2009/06/10/10-useful-wordpress-loop-hacks/
  3. 3 http://www.smashingmagazine.com/2009/05/13/10-custom-fields-hacks-for-wordpress/
  4. 4 http://www.smashingmagazine.com/2009/03/04/15-useful-twitter-plugins-and-hacks-for-wordpress/
  5. 5 http://www.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/
  6. 6 http://www.smashingmagazine.com/2009/05/18/100-amazing-free-wordpress-themes-for-2009/
  7. 7 http://www.themelab.com/2008/04/18/see-how-easy-it-is-to-widgetize-wordpress-themes/
  8. 8 http://automattic.com/code/widgets/themes/
  9. 9 http://wordpress.org/extend/plugins/widget-logic/
  10. 10 http://www.themelab.com/2008/04/14/the-ultimate-guide-to-wordpress-conditional-tags/
  11. 11 http://codex.wordpress.org/Conditional_Tags
  12. 12 http://wordpress.org/extend/plugins/query-posts/
  13. 13 http://justintadlock.com/archives/2009/03/15/query-posts-widget-wordpress-plugin
  14. 14 http://justintadlock.com/archives/2009/05/13/customize-your-404-page-from-the-wordpress-admin
  15. 15 http://themeshaper.com/thematic/
  16. 16 http://www.themelab.com/2009/04/25/add-a-widgetized-footer-to-your-wordpress-theme/
  17. 17 http://codex.wordpress.org/Plugins/WordPress_Widgets
  18. 18 http://www.smashingmagazine.com/2009/07/02/power-tips-for-wordpress-template-developers/
  19. 19 http://www.smashingmagazine.com/2009/06/10/10-useful-wordpress-loop-hacks/
  20. 20 http://www.smashingmagazine.com/2009/05/13/10-custom-fields-hacks-for-wordpress/
  21. 21 http://www.smashingmagazine.com/2009/03/04/15-useful-twitter-plugins-and-hacks-for-wordpress/
  22. 22 http://www.smashingmagazine.com/2009/02/02/mastering-wordpress-shortcodes/
  23. 23 http://www.smashingmagazine.com/2009/05/18/100-amazing-free-wordpress-themes-for-2009/

↑ Back to topShare on Twitter

Advertising

Note: Our rating-system has caused errors, so it's disabled at the moment. It will be back the moment the problem has been resolved. We're very sorry. Happy Holidays!

  1. 1

    Thanks, I love Widget Logic

  2. 2

    Another great article by SM. Thanks once again!

  3. 3

    hoho. straightforward and easy to understand. well done!

  4. 4

    Simon Food Favourites

    July 14, 2009 5:06 pm

    any widgets for Blogger?

  5. 5

    way cool! i must try this one!
    im wordpress fan! :)
    thanks for sharing this!

  6. 6

    Another great article, Leland ;)

  7. 7

    YEEEEEEEEEh it’s great.

  8. 8

    Nice article on Word press widgets. WordPress users should say thanks to authors of smashing magazine for all the tips.

    Thanks
    Sankar

  9. 9

    Great overview! Nice job, keep going!

  10. 10

    Simon Harlinghausen

    July 14, 2009 10:18 pm

    Interesting post. Quite useful.

    Thanks

  11. 11

    Finally a WordPress post my tiny mind can decipher, good work!

  12. 12

    Thanks for the tips! Very useful.

  13. 13

    Wow! What a great Post thank u for this! :)

  14. 14

    This is so helpful. Thank you for presenting and explaining these so well.

  15. 15

    Just what I need! Thank you very much :)
    That Widget Logic looks great.

  16. 16

    Very nice post. Thnks You.

  17. 17

    Wp logic should be a shame for any CMS.

    How can you even consider acceptable the fact of allowing a user to input “php code” in a configuration stuff.

    user do not have to deal with the code. the code is the geek’s stuff, not the user’s stuff…

  18. 18

    Another wonderful post about WordPress. Love WordPress, Love Smashing..

  19. 19

    Just what i was looking for… thanx

  20. 20

    Thanks everyone, glad you all like the article!

    @Luc: I partially agree with you, but not sure I would call it a “shame” though.

    Hopefully the conditional tags are pretty easy to understand, even for an average user. You can simply copy and paste them from the WordPress codex and edit them for your own purposes.

    It may not be the friendliest interface for an average user, but the way the Widget Logic plugin is set up now makes it very flexible to control exactly where you want your widgets to display

  21. 21

    Great article Leland, and thanks for linking to my Query Posts video tutorial. I plan to create many more videos for many other plugins:)

  22. 22

    Thanks for the awesome article!

  23. 23

    Leland –

    This is an excellent post. It is a bit advanced for most users, but it illustrates that if a person is willing to put some time in to learning several straight forward steps you can take your Word Press blog a higher level in function and impact.

    Thank you!

  24. 24

    Thanks for this awesome article. It’s just what i was looking for.

  25. 25

    Appreciate all the comments!

    @Adam W. Warner: No problem. It’s a great video and very relevant to this article. Looking forward to the other videos you have in store for other plugins.

  26. 26

    this article is awesome, i’ll try some of those widgets, right now

  27. 27

    Clarence Johnson

    July 15, 2009 1:40 pm

    Thank you. Thank you. I have been searching for a concise tutorial on how to widegtize my WP theme and you guys met my expectations.

    Clarence

  28. 28

    Jay (blaszta.com)

    July 15, 2009 6:36 pm

    Great & straight forward article! Like it a lot!

  29. 29

    If you really like the Widget Logic
    you should check out the section widget. It’s a wicked brand new plugin.

  30. 30

    I’m new to this and am wondering…. when you say “Open up your functions.php file again and insert this similar code:” where exactly on that page do you drop that code? In the beginning? Thanks!

  31. 31

    @anubis: It doesn’t really matter. Just make sure the functions.php file begins with a <?php and ends with a ?> with no spaces or line breaks before and after, otherwise it could cause errors.

  32. 32

    @Luc @Leland Fiegel Check out our Section Widget ().

  33. 33

    Great post.

    There’s an alternative to Widget Logic that I’ve been using: Widget Block. And instead of typing in conditional tags, you only have to put in the URL/s: Screenshot

  34. 34

    @Godfrey Chan: Thanks for the link. That plugin looks very interesting. It’s kind of like a text widget, with conditional functionality built in?

    @Jessi: Nice find. Can you use it for anything besides pages/subpages though?

  35. 35

    It’s sounds quite good.
    -San

  36. 36

    So useful, Thank you very much for sharing this article

  37. 37

    I subscribed to your RSS feed, but I was disappointed that you did not offer the option to have it appear on my igoogle homepage. You should use feedburner to get this option activated and optimize your feeds.

  38. 38

    Those who are messing around with widgets might want to check out my little widget making tool at widgetifyr.com. I created it for my own use, but others seem to be find it useful. Let me know what you think.

  39. 40

    I was having a lot of problems registering multiple widgets, because when I went to the admin area my widgets would sometimes dissapear or be ordered differently.

    After implementing my widgets in the way described above it seems to be working fine now.

    Thanks SM!!

  40. 41

    awesome article… thanks a lot.

  41. 42

    thank you! it works!

  42. 43

    Widget logic saved me a ton of time – was creating different sidebars for different pages before that.. thanks!

  43. 44

    Guys, I am struggling to find the widgets to edit them. I have “recent comments”, “recent posts”, “calendar” widgets added to my blog but I can’t find them to edit. My blog is another language, so I would like to change some of the words displayed on the blog. I have done this pretty much with rest of the blog, because I know where root files are located. But I cannot find WP default widgets’ files to change. Any help is really appreciated.
    http://www.deffektiv.com

    Thanks,
    Elman.

  44. 45

    Jonathan Puddle

    June 23, 2010 2:12 am

    Thanks, some of these are awesome!

  45. 46

    I have successfully added and created the 404 Widget last night ..
    everything working fine but the problem now is that i have closed the browser and after a refresh the Sidebar widgets are having the options (categories, rss, Tag Cloud etc…)
    but
    the 404 is empty while during error it shows all the widgets i have added yesterday to it.

    Please HELP

  46. 47

    Good news brother

  47. 48

    Can someone explain please how to name the sidebar files and then include them properly in the template??? I can’t make it work because each tutorial lacks this information! I know what to put in function.php to ahve multiple sidebars, but where to put the dynamic codes, how WP will know where to look for proper sidebar?

  48. 49

    I’ve really been wondering how (or if it was possible) to stick a widget between posts on my home/main index page! Limiting them to sidebars & footer seems so, well, limiting. thanks!

↑ Back to top