The sidebar is a narrow vertical column often jam-packed with lots of information about a website. Found on most WordPress sites, the sidebar is usually placed on the right or left-hand side of the web page. In some cases, a site will feature two sidebars, one on each side of the main content where your posts are found. This tutorial examines some of the information items and features generally found in the sidebar. After reading this article, you’ll feel more comfortable in adding or changing the content of your own sidebar.
The Classic and Default WordPress Themes use nested lists to present their sidebar information. Nested lists are a series of unordered lists of information, set inside of each other. Here's a simple example:
<ul><!-- open whole list --> <li>Title of Section One <ul> <li>Apple</li> <li>Orange</li> <li>Banana</li> </ul> </li><!-- closing list under section one --> <li>Title of Section Two <ul> <li>Beef</li> <li>Chicken</li> <li>Fish</li> </ul> </li><!-- closing list under section two --> <li>Title of Section Three <ul> <li>Carrot</li> <li>Celery</li> </ul> </li><!-- closing list under section three --> </ul><!-- closing whole list -->
Each of these nested list "sections" can feature a CSS ID or class to make each one look different or all the same, depending upon how they are styled within the style sheet.
You don't have to use nested lists for your sidebar. That is up to you. If you do use the nested lists as set by example in the WordPress core Themes, you need to know how they work. To learn more about how to style your WordPress nested lists, check out the article on Styling Lists with CSS.
Historically, the main purpose of the sidebar has been to provide navigation assistance for the visitor - a function commonly needed to the present day. These navigation aids are designed to help people move about your site and find the information you want them to see. The list of navigation items includes Categories, Pages, Archives, and even the most recent posts. Another navigational tool you'll see in the sidebar is a search form to help people find what they are looking for on your site.
The first information in the standard WordPress installation is a list of Pages or Categories. Listing Pages helps the visitor find more information about your site, like About, Contact, Register, or Site Map.
The information displayed in the sidebar is controlled by your Theme's Template sidebar.php file.
An example usage of the Pages list template tag in your sidebar.php file might be:
<?php wp_list_pages('title_li=<h2>Pages</h2>'); ?>
This puts the title Pages in an H2 heading and then puts the Pages in a list below the title. This is just one sample of its usage and there are more options available for controlling the end result of the template tag called wp_list_pages().
Listing the Categories helps the visitor find the information they want by topic. This might look like:
<li id="categories"><?php _e('Categories:'); ?>
<ul>
<?php wp_list_cats(); ?>
</ul>
</li>
This lists the title Categories within the menu list, and then creates a nested list underneath to list the WordPress categories you've added to your site. If you have no posts in a category, it will not show up on the list by default. Add a post, and it will be there.
The original WordPress Default Theme, Kubrick, used a set of navigation tags on its index.php template file, but you can use this same set in your sidebar to emphasize the navigation from one post to another in chronological order:
<div class="navigation">
<div class="alignleft">
<?php next_posts_link('« Previous Entries') ?>
</div>
<div class="alignright">
<?php previous_posts_link('Next Entries »') ?>
</div>
</div>
This example puts the text for the links to the right and left parts of the screen. You can change this to something more suitable to your sidebar's look by changing the style sheet references or by further customizing the next and previous post links.
Part of helping your visitors navigate your site is to point them towards specific posts and archives. Your most recent posts and archives can be displayed in a variety of ways in your sidebar. The WordPress Classic and Default Themes showcase the archives by month:
<li id="archives"><?php _e('Archives:'); ?>
<ul>
<?php wp_get_archives('type=monthly'); ?>
</ul>
Using the wp_get_archives() template tag, you can customize this list in a variety of ways. Let's say you want to list the last 15 posts you've written by their title. Replace the type=monthly as follows:
<?php wp_get_archives('type=postbypost&limit=15'); ?>
There are also Plugins which can help you customize different ways of showcasing your lists of posts. They can be customized by category, most commented on, most recent, most recently updated, and the list goes on.
Coffee2code's Customizable Post Listings offers myriad ways of creating a customizable list of posts in your sidebar. For example, if you would like to create a list of the 5 posts that have most recently been commented on:
<ul>Recently Commented Posts <?php c2c_get_recently_commented(5); ?> </ul>
Several plugins will generate a list of related posts to the one you are viewing. One of them, WordPress Related Entries Plugin by Wasabi, is easily activated and might appear like this in your sidebar to return a result of ten related posts in a list:
<li id="related"><?php _e('Related Articles'); ?>
<ul><?php related_posts(10, 10, '<li>', '</li>', '', '', false, false); ?></ul></li>
This is just the tip of the iceberg for ways of listing posts in your sidebar. You can find more on your visit to the plugin sites listed below.
Did you know you could put anything you want in your sidebar? Some people like to add the post meta data to the sidebar because it has information about the post and adds links to different categories, dates, and possibly even next and previous posts, all helping increase the visitor's navigation choices.
WordPress Lessons features an article on designing your Post Meta Data Section which will help you to customize this information in your sidebar.
Part of that meta data might be a little paragraph about who you are and what the site is about. You can add that using standard HTML and CSS and place it where you would like it to appear in the sidebar, such as:
<p class="aboutme">Have a passion for racing cars? Join the club. This site is dedicated to the hobby and passion of car racing.</p>
Remember, it's your sidebar and you can add or remove anything you want.
Lists of links, also called Blogrolls, are ways of listing different websites for your viewers to visit when they are done with your site, of course. This is also a handy way of featuring link exchanges.
Your link lists are controlled through the WordPress Link Manager. Each link can be displayed as text or as an image. In the WordPress Default Theme, your Links List is created with a conditional tag that only displays the Links List on the front page and not on the rest of the web pages within the Theme. The Classic Theme displays the Links List on every web page like this:
<?php get_links_list(); ?>
There are several ways of displaying your Links, and the above is just one example. You can also customize the display of the list by using the get_links() template tag. For example, let's say you want to display the links only for category 2 in a list featuring images and not the link text, and sort the links by the URL address:
<ul><?php get_links(2, '<li>', '</li>', '', TRUE, 'url', FALSE); ?></ul>
There are also a variety of Plugins for Links you can choose from to customize this information even more.
Have your own set of links you want to share and you don't want to use the Link Manager? Want to highlight links to specific posts or pages? Check out the article on creating links to posts, pages, and categories.
If you have a requirement to present a list of authors (users) with links to their web-site, consider this example designed for the WordPress Default Theme's sidebar.php. Here the wpdb class is used to collect the User ID Column (get_col) from the wp_users table. The User ID of All users is stored in the array called $user_ids . A foreach loop is used to 'cycle' through all the users in that array. In that foreach loop, the WordPress Function, get_userdata, is called to get all the Profile data for a given user, and finally, that user's Web-site ($user->user_url) and Display name publicly as ($user->display_name) is used to compose the "a href" tag link to each author's web-site:
<h2>Link list of authors:</h2>
<ul>
<?php
$order = 'user_nicename';
$user_ids = $wpdb->get_col("SELECT ID FROM $wpdb->users ORDER BY $order"); // query users
foreach($user_ids as $user_id) : // start authors' profile "loop"
$user = get_userdata($user_id);
?>
<li><?php echo '<a href="' . $user->user_url . '">' . $user->display_name . '</a>'; ?><br /></li>
<?php
endforeach; // end of authors' profile 'loop'
?>
</ul>
Sidebars come and sidebars go...well, at least they do in the WordPress Default Theme. View the front, archive, or category page and you will see the sidebar. Click on a post title and view the post and you will see the sidebar disappear. How did this magic trick happen?
WordPress 1.5 used modular template files for the different parts and pieces of a site. We are currently discussing one of them, the sidebar.php. Some Themes feature different web pages beyond the index.php such as archive.php, single.php, search.php, and category.php. Each of these post pages can feature different sidebars, headers, and footers. Do you want to have the sidebar change dependent upon whether someone is viewing a category, archive, or the front page? We'll show you how.
By default, the call for the sidebar is:
<?php get_sidebar(); ?>
In the WordPress Default Kubrick Theme, the single.php template file did not request a sidebar. If you viewed a single post, you would see that the post stretches across the space where the sidebar would have been. Click back to an archive, category, or the front page and the sidebar returns. This Theme has removed the call for the sidebar.
To have a sidebar be different on a different template page, instead of using the default template tag, you can use the PHP command INCLUDE.
<?php include ('sidebar2.php'); ?>
Placed on the single.php or the category.php template file instead of the default tag, this different sidebar would appear on those web pages. You can then customize sidebar2.php to feature whatever information you would like so that it is different than the default sidebar.
If you would like to have a different sidebar on the single.php template file, and another different sidebar visible when viewing an archive or category, edit the archive.php or category.php template files and change the sidebar call to:
<?php include ('sidebar-cat.php'); ?>
<?php include ('sidebar-archive.php'); ?>
Actually, you can use whatever name you want. You can also set up The Loop to call different sidebars dependent upon what you are viewing, and you can learn more about this technique in the WordPress Lesson on Exploring the Loop. You've got the basic idea, and from here, it's up to your imagination.
You can register more than one sidebar. In wp-includes/widgets.php you find the function-definition for register-sidebars() which you may use in your custom function within your theme-folder (functions.php - if it does not exist, create an empty php file by that name):
<?php if ( function_exists ('register_sidebar')) {
register_sidebar ('custom');
} ?>
'custom' refers to a sidebar file called sidebar-custom.php. Sidebars get indexed in the WordPress database. Your default sidebar (sidebar.php) gets indexed as 1. Every succeeding one will have an index higher than 1. You will see your sidebars now listed in 'Appearance' -> 'Widgets'. You can drag and drop Widgets onto sidebars.
In your sidebar-templates you may now call the dynamic generated content (widgets) by the index of your sidebars:
<?php if ( function_exists ( dynamic_sidebar(1) ) ) : ?> ... regular html ... <?php dynamic_sidebar (1); ?> ... regular html ... <?php endif; ?>
Or, even easier, call your sidebar by name - if your sidebar has a name of 'foo', you can use:
<?php dynamic_sidebar('foo'); ?>
You can integrate your sidebars in your template-files (e.g. index.php, single.php, archives.php):
<?php get_sidebar (); ?>
gets you the default sidebar.
<?php get_sidebar ('custom'); ?>
should display your custom sidebar.
You can put anything you want in your sidebar. Want to have a random image or a bit of text that changes with every view of a page on your site? How about adding some asides which are little snips of post information? Want to add "buttons" or icons to indicate favorite sites, or sites that do validation, or awards you've won? How about weather reports or the latest news? You can honestly add anything you want to your sidebar. Here's more examples of what's possible.
Did you know you could have random images or text in your sidebar? Yep! There are a variety of scripts and techniques for creating random images on your site, images that change with every page or with each refreshing of the browser screen. The key to having these things in your sidebar is making sure they fit within your sidebar.
Vertical photographs and graphics tend to fit well with the long vertical column of the sidebar. You can also feature horizontal images as long as they don't exceed the width of the sidebar. If they do exceed the sidebar width, they can either overlap, or push the rest of your content around, messing up your lovely layout.
Here are some resources for creating random images:
More random content, such as text that changes with each page view, can be added to your sidebar with the use of various plugins. This is a great feature if you want to have a random list of links to posts within your site, or random quotes or sayings, or other random bits of information.
There are a lot of random things you can add to your sidebar, and you can find many of these at WordPress Extend.
Asides are like mini-posts; little tidbits you can post that show up in your sidebar to leave a quick note about a topic or issue. These can be generated by using Plugins or by taking advantage of the Link Manager.
Within Link Manager, create a link category called Elsewhere, for example. Enter the links you would like to have listed in your Asides section in your sidebar. Give them simple titles and descriptions to help identify the links. Then put the following in your sidebar where you want your Elsewhere Asides to appear:
<h3>Worth Visiting:</h3> <ul id="elsewhere"> <?php get_links(5, '<li>', '</li>', ' ', FALSE, '_id', FALSE, FALSE, 3, FALSE, TRUE); ?> </ul>
The Elsewhere category has a category ID of 5 and the template tag get_links() displays three links in a list sorted by ID and showing titles to the links. Since it features the elsewhere style, you can customize the look. You can change the tag to show the descriptions of the links as well as the titles, so they might look like this:
There are other ways of creating asides, including using some Plugins which turn "mini-posts" into asides:
You can find more Plugins and ways to create Asides by visiting the various WordPress Plugins sites listed below.
People enjoy listing their links and accomplishments in their sidebar highlighted by buttons and icons. Instead of listing a text link that proves your site has valid XHTML or CSS, you can create a link using the icon "awarded" to sites which pass the test. If your site has won an award, or is part of a webring, or is a member of a group, you can provide a graphic link to show that off, too. You can even use graphics to create links to your RSS feeds.
The WordPress Default and Classic Themes provide a text link to validate your site. It looks like this:
<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"> Valid <abbr title="eXtensible HyperText Markup Language">XHTML</abbr></a></li>
To replace the link with a graphic link, like the "Valid XHTML" icon, copy the icon to your site and try the following example, changing the file name and folders to match your site:
<li><a href="http://validator.w3.org/check/referer" title="This page validates as XHTML 1.0 Transitional"><img src="http://example.com/graphics/icons/valid-xhtml10.gif" alt="Valid XHTML 1.0!" height="31" width="88" /></a></li>
The same technique can be used to highlight an award your site has won or any other graphic link:
<li><a href="http://example2.com/" title="Award Winning Site Awards"><img src="http://example.com/graphics/icons/award42.gif" alt="Award for Award Winning Site" height="50" width="50" /></a></li>
Linking to graphics for Feeds is a little different from putting graphics in links. WordPress uses Template Tags to display and coordinate feeds within a WordPress site. Without a graphic, a link to a RSS 2.0 Feed looks like this:
<li><a href="feed:<?php bloginfo('rss2_url'); ?>"
title="<?php _e('Syndicate this site using RSS'); ?>">
<?php _e('<abbr title="Really Simple Syndication">RSS</abbr>'); ?>
</a></li>
The template tag bloginfo() has parameters for the different feeds so you don't have to come up with the URL yourself. It's automatic. Now, let's replace the text with a graphic.
It used to be common that Feeds were identified by an orange colored box, but now, RSS Feeds can look like anything, but they tend to have a common look so they are identifiable from site to site. They feature a horizontal box with two "columns" of color, one bright and one light, saying RSS|FEED or RSS|Valid. You can make it say whatever you want, as long as it points your visitors towards this feature. Feedforall's DYI Feed Graphic Designer allows you to easily design your own feed icon.
The Feed Icons site provides graphical icons using the icon created by the Mozilla Foundation and later adopted by Microsoft. A graphical icon helps avoid some of the issues currently associated with the wide variety of text-based icons.
To use a different icon, here is how it might look:
<li><a href="feed:<?php bloginfo('rss2_url'); ?>"
title="<?php _e('Syndicate this site using RSS'); ?>">
<img src="http://example.com/graphics/icons/rssfeed20.gif"
alt="RSS Feed 2.0" height="20" width="75" /></a></li>
We've given you some examples of how to create graphic links, buttons, or icons in your sidebar, the rest is up to you.
There are so many things you could put into your sidebar, we could go on forever. Some of the most popular elements are weather bulletins for the weather wherever the site administrator calls home, GPS and location information, and even the time in different time zones. There is even a plugin that you can use to list upcoming dates, events, and holidays, with a countdown until the date.
If you can't find a plugin that does what you want it to do in your sidebar, you can also write your own plugin and share that with the world to use in their sidebars.
As users are requiring more and more control over their websites, developers are relying on WordPress Sidebars to offer this additional control. Until recently the hurdle of displaying different widgets on every page, while using a single sidebar, was a daunting task that few accomplished.
Plugins such as Widget Logic and Dynamic Widgets now allow users to customize the display of Widgets on pages.
We've only mentioned a few of the many different Plugins you can use in the designing and customization of your sidebar in WordPress. You can find these and more from the various plugin resources listed below or search the Internet for more.
Follow the instructions very carefully as provided by the plugin author. If you have trouble with the plugin, contact the author's site first, then the author, and if that doesn't help, do a search on the Internet for help and then visit the WordPress Forum for further assistance.
One might test one's sidebar with the CSS disabled, to understand how it might appear in such cases, e.g., in text-based browsers. Often one is shocked about how long and drawn-out one's pages become, (a great opportunity to find places to optimize,) as the former sidebar now just becomes part of the vertical flow.