Publishers of technology books, eBooks, and videos for creative people

Home > Articles > Web Design & Development > Usability

Web Design Reference Guide

Hosted by

Customizing WordPress: Using Widgets

Last updated Oct 17, 2003.

By Miraz Jordan

Before widgets, changing the sidebar on your blog meant rummaging around in the code of theme files. Now, it’s as easy as drag and drop.

Main Content vs. Sidebar

Many people use a blog design where the main content—the posts—is in one column, and one or more "sidebar" columns list categories, links, recent posts or comments, advertising, polls, Flickr images, and the like.

Your blog’s layout is controlled by the theme you choose. If you use an older theme and want to change either what is displayed in the sidebar, or the order in which it is displayed, you have to delve into the theme’s files and edit them by hand. A later article in this series will look at editing themes.

Widgets Give Us Drag and Drop

Some themes, such as the Default theme included with WordPress 2.2, allow you to edit sidebars easily and quickly by dragging boxes into a Sidebar Arrangement area inside the Dashboard. Those boxes are called "widgets."

My demo blog at http://miraz.info, Always the Future, is set to use the Default theme. The default sidebar contains a Search box, a list of Pages, Archives, Categories, Blogroll, and a section called Meta.

Figure 1

Figure 1 This screenshot shows the sidebar on the front page of my demo blog, using the default WordPress theme.

Choose Your Widgets

To change the sidebar in a theme that uses widgets, log in to the Dashboard on your blog, click on the Presentation link, and then click the Widgets link. The Sidebar Arrangement area appears. If there is no Widgets link, then your theme does not use widgets.

Figure 2

Figure 2 Here you’ll see the Sidebar Arrangement heading in the Dashboard. It’s on the Widgets page under Presentation.

Scroll down to the Available Widgets section and drag widgets from that section into the Sidebar section above. Drag the widgets into the order you want them to appear for visitors. When you’ve finished, click the Save Changes button below the Available Widgets section.

Figure 3

Figure 3 I’ve added some widgets to the Sidebar area in the Dashboard: Search, Links, Pages, Categories, and Recent Comments.

Figure 4

Figure 4 The changes are reflected in the blog’s sidebar.

Configure Your Widgets

Some widgets allow or require you to configure them. In Figure 3 above, you can see that the Pages, Categories, and Recent Comment widgets include an icon on the right-hand end of the widget box. Click the icon to configure the widget. Each widget offers appropriate settings, such as the number of comments to display. Remember to Save Changes when you’re done.

Figure 5

Figure 5 The title I enter in the Recent Comments widget configuration window overrides the default Recent Comments title.

Text and RSS Feed Widgets

By default, you can use only one Text and one RSS Feed widget, but if you scroll to the bottom of the page you can create extras for both. Use the pop-up to choose how many widgets you need, then click the Save button. Extra widgets appear in the Available Widgets section.

RSS widgets are simple: Click on the Configure icon and add an RSS feed address. If you like, you can provide a title for the feed. Use the pop-up to choose how many items to display. Close the Configure window and remember to Save Changes.

Text widgets are good for almost anything: add text such as a Quote of the Day, affiliate code, Flickr badge code, and so on.

Figure 6

Figure 6 The sidebar now includes an RSS feed, a Flickr badge, an Amazon affiliate link, and a quote. These all use text widgets.

Download and Install Widgets

Having fun? You can find even more widgets in the WordPress widgets list.

To use the widgets, use your FTP software to create a folder called Widgets inside the Plugins folder on the server and upload any new widgets to that folder. Then, visit the Dashboard’s Plugins section to activate the newly added widgets. After activation, the new widgets are available on the Widgets page.

Drag the widget to the sidebar and configure it if necessary. Remember to save your changes.

Figure 7

Figure 7 I added the KB Countdown Widget to show how long it is until the lunar eclipse mentioned in my post.

Widgets make your WordPress blog much easier to customize. It’s worth exploring both the default widgets and third-party widgets. If your theme doesn’t allow for widgets, then check to see if an updated version of the theme is available. It may even be time to consider a new theme.

The next article in this series will explain the difference between Pages and Posts—something that opens the way to using WordPress as a content management system. Just because you use WordPress, doesn’t mean you have to have a blog.