-
Featured Columnists
- Faruk Ateş
- Andy Clarke
- Kris Hadlock
- Robert Hoekman, Jr.
- Molly Holzschlag
- Sarah Horton
-
Miraz Jordan
- Customizing WordPress: Make a Start
- Customizing WordPress: Using Plugins
- Customizing WordPress: Using Widgets
- Customizing WordPress: Pages and Posts
- Customizing WordPress: Integrating Other Apps
- Customizing WordPress: Edit Theme Style Sheets
- Customizing WordPress: Display a Better Title
- Customizing WordPress: Make a Lasting Impression
- Customizing WordPress: Dividing Long Posts
- Customizing WordPress: Starting Points and Tips for WordPress 2.5
- Customizing WordPress 2.5.1: Make the Most of Pages
- Customizing WordPress 2.5.1: Using the Links and Archives Pages
- Customizing WordPress 2.5.1: 404 Pages
- Customizing WordPress 2.5.1: Search
- Jonathan and Lisa Price
- Catherine Seda
- Dave Shea
- Dave Taylor
-
Table of Contents
- Welcome
- Web Basics
- Publishing on the Web: Putting Files on the Server
- Web Design Process and Workflow
- Project Management
- Mark My WWWord: HTML and XHTML
- Standards Compliance
- Layouts
- Forms
- Meta Tags and Search
- Usability
- Accessibility
- Enhancing Web Page Interaction
- Web Graphics
- Web Page Optimization
- Multimedia
- Content
- Overview of Servers
- Server Programming Basics
- Careers in Web Design
- Tools
- Tutorials
- Intellectual Property for Web Designers
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 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 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 I’ve added some widgets to the Sidebar area in the Dashboard: Search, Links, Pages, Categories, and Recent Comments.
)
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 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 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 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.
