Good Navigation Links

It helps people move around your site when you have a clean navigation menu in the sidebar and/or the footer. It helps people find the posts and articles you want them to find. There are a variety of methods for user friendly site navigation on your WordPress site.

Helping the user use your site means putting things where they can find them. Following the newsletter formats from the days of print, most website users are used to looking for intra-site links on the sides and bottom of a web page. As a designer, you can put them anywhere you want, but let's stick with the conventional placement for now. After all, we want our WordPress sites to be user-friendly, right?

In the WordPress Themes that come with your WordPress installation, all use a sidebar to hold most of the site's navigation links. Other Themes may use navigational aids in the header and footer. While these navigation links can be displayed in any template file , typically, the navigation links include:

The template tags associated with generating this list of navigation links are found in the default WordPress Themes's sidebar inside of a nested list . Let's look at each of these tags individually and then look how to expand the use of navigational aids on your WordPress site.

Pages

With the introduction of WordPress v1.5, Pages were available to help the administrator create individual Pages outside of the WordPress Loop such as Contact Us, About Us, and What's New. The template tags used to display the list of individual Pages is wp_list_pages() .

<?php wp_list_pages(); ?>

There are many ways of customizing the wp_list_pages() tag to be more useful to your users. A long list of Pages and sub-Pages can go on for quite a while, so you might want to only feature the most important Pages in your sidebar.

To exclude some Pages from your list, you can set the parameters for exclude. The following example excludes Pages with the Page-ID numbers of 17 and 38.

<ul>
<?php wp_list_pages('exclude=17,38' ); ?>
</ul>

To learn more about customizing the wp_list_pages() template tag, visit the Template Tag page for wp_list_pages() .

Categories

The best template tag for creating a category list in your navigation menu is wp_list_categories() .

The default usage of the category list tag is:

<?php wp_list_categories(); ?>

Again, like the Pages template tag , you can use exclude to limit the categories you want listed, making it easier for the user to pick from only a few instead of twenty or thirty categories. The following example excludes category-IDs 10 and 15.

<ul>
<?php wp_list_categories('exclude=10, 15'); ?>
</ul>

If you would like only to feature the children or sub-categories of one or more categories in your category list, you can use the child_of parameter.

<ul>
<?php wp_list_categories('child_of=8, 14'); ?>
</ul>

To learn more about customizing the these template tags, visit the Template Tag page for wp_list_categories() .

Archives

Like the categories template tag, there is an Archives date-based Template Tag called wp_get_archives() . The tag allows you to display links to archives by year, day, week, day, or individual posts. You can limit the number of actual links to show in your Archives template tags.

The default usage of wp_get_archives will show a link for each month of posts:

<?php wp_get_archives(); ?>

To show the most recent three months of posts by month, you would use the following:

<ul>
<?php wp_get_archives('monthly&limit=3'); ?>
</ul>

Displaying the archives by date, you can show the most recent 15 days:

<ul>
<?php wp_get_archives('type=daily&limit=15'); ?>
</ul>

If you would like to show the actual posts, you can use the parameter postbypost which displays the most recent posts, with the number set by the limit parameter. To show the last 25 posts by post title:

<ul>
<?php wp_get_archives('type=postbypost&limit=25'); ?>
</ul>

To learn more about customizing this template tag, visit the Template Tag page for wp_get_archives() .

Links

The Links feature of WordPress, managed via Administration > Links , allows displaying of external links, such as a blogroll, a user would like to feature on his or her blog. These links are generated by the template tag , wp_list_bookmarks() . For examples and more information on the specific use of each of this template tag, see wp_list_bookmarks() .

Admin or Meta

The Admin or Meta list of links in the WordPress sidebar are the links which are used by the Administrator, if logged in, to access the administration panels of the site. They may also feature RSS Feeds and other information related to the administration or use of the site. Check the following tags for more information on which ones you might want on your site to assist yourself and other registered users:

Other Navigation Locations

In addition to the sidebar, you can help your users navigate through your site with navigation tags used elsewhere, such as in the header and footer of your site. Using the above template tags for navigation links, you can style the link lists as horizontal menus instead of vertical lists.

Often in these narrow areas, you may want to only highlight specific posts or Pages to save space and direct the user to specific areas to continue their browsing. To include a specific link to a post or Page, you can use the get_permalink() template tag.

The following example presents links to post-ID numbers 1 and 10 and lists the categories on the site, excluding category-ID 2 and 4.

<li><a href="<?php echo get_permalink(1); ?>">About My Blog</a></li>
<li><a href="<?php echo get_permalink(10); ?>">About Me</a></li>
<?php wp_list_cats('exclude=2, 4'); ?>

The list might look like this:

There are two other sets of navigational aids to consider as you design your site. Both of these sets involve moving a user through your site from one post to another.

The first set is featured only on the non-single/non-permalink web pages and is the template tag posts_nav_link() . This tag creates two links at the bottom of the page within the WordPress Loop to display the next and previous pages of the index, archives, searches, and categories.

By default, the posts_nav_link looks like this:

To learn more about changing the look of this link, visit the Template Tag page for posts_nav_link() .

The other set of navigational aids for moving through your site control the next post and previous post links typically found at the bottom of your single/permalink post. These direct the user to move to the next chronologically created post or the previous.

The template tags are previous_post_link() and next_post_link() . These can be styled in several different ways, using the next post and previous post titles or using the actual titles of the next and previous posts.

The following example displays the next and previous post titles with arrows to emphasis the direction the user may choose.

<?php previous_post_link('&laquo; &laquo; %', '', 'yes'); ?>
| <?php next_post_link('% &raquo; &raquo; ', '', 'yes'); ?>

To learn more about changing the look of these links, visit the Template Tag page for previous_post_link() and next_post_link() .

Styling Your Navigation Links

As you have seen, there are a lot of ways WordPress uses to help the user move through a WordPress Site. We've shown you some of the WordPress template tags, but there are also many Plugins available which also assist with site navigation such as providing related posts, customized post lists, and more to customize your site's navigation.

The following are some of the resources that may help you in stylizing and customizing your navigation lists.