If you write a lot of posts then your visitors need an easy way to find them. Although we all sort our posts into Categories and add appropriate Tags when we have them it can still be difficult paging through your home or archived pages.
On some sites it is reasonable to alter your loop to not show a content or excerpt area in your archives or category pages and just show a list of titles that your visitors can browse through. You can even use a custom loop to show a few hundred posts on a category page if you format them into divs and alter their link heights. This is reasonable for categories that have reference content and are not normal posts.
However on most sites we are likely to find a loop of 5 to 10 posts either with full content or the excerpt showing and then a single forward and back button to let your visitors navigate your posts.
If you want lots of page views you may think this is a good idea … a site with a few hundred or a few thousand posts would have visitors clicking through pages forever to get to the one post they saw 3 months ago about a topic they want to revisit.
On the other hand your visitors are probably more likely to walk away from your site if they can’t find what they need within 5 to 10 page views. After all most of the internet is just the same thing over and over…
To increase the usability of your site you may want to think about adding a simple plugin that will allow your visitors to navigate your indexes and categories by jumping to the next page or by jumping 5, 10 , 20 pages ahead to find something they know is there.
WP-PageNavi
The WP-PageNavi plugin will take most of the work out of doing this yourself with just an install and then placement of the navigation bar.
Within about 5 minutes you should have your navigation converted and working with this new plugin. If you want to alter the way the navigation bar looks then you have the option of placing the plugin call inside a div or altering the plugin’s css file.
Remember if you alter the plugin’s CSS file you want to back it up before you upgrade. However this plugin is fairly stable and so simple that you shouldn’t expect a lot of update announcements.. at least not as often as SuperCache or Akismet.
Installing
Go to your add new plugin menu and search for WP-PageNavi and follow the prompts to install and activate the plugin.
Once you have activated the plugin you want to turn your SuperCache or other caching software off so you can see the results as you configure the navigation bar.
To add the navigation bar to your front page you will need to edit your index.php file in your theme folder. If you have a home.php file then you should edit that file.
Find the line that inserts your standard navigation bar and comment / disable it by placing 2 forward slashes in front of the first part of the php call.
[php]
<?php //include (TEMPLATEPATH . ‘/navigation.php’); ?>
[/php]
Now you can insert your WP-PageNavi navigation bar by placing the following line below the code you just commented.
[php]
<?php //include (TEMPLATEPATH . ‘/navigation.php’); ?>
<code><?php wp_pagenavi(); ?></code>
[/php]
Testing The Navigation Bar
Now that your plugin is activated, installed and you have added the code to your index.php file refresh you home page and look for the new navigation bar.
The first thing you may notice is the colors or sizes are not exactly how you want them.
You can setup the navigation bar for CSS Formatting by wrapping it in a Div as show and giving it the ID navbar which you can style in your styles.css file using the #navbar {something} selector.
[php]
<div id="navbar">
<code><?php wp_pagenavi(); ?></code>
</div>
[/php]
You can also go into your /plugins/wp-pagenavi directory and alter the default settings of the plugin.
Remember if you do this you should make a backup of the original css file
[css]
.wp-pagenavi {
clear: both;
}
.wp-pagenavi a, .wp-pagenavi span {
text-decoration: none;
border: 1px solid #BFBFBF;
padding: 3px 5px;
margin: 2px;
}
.wp-pagenavi a:hover, .wp-pagenavi span.current {
border-color: #000;
}
.wp-pagenavi span.current {
font-weight: bold;
}
[/css]
Final Note
As you can see this is a very simple but very usable plugin and although most of your users will never realize it is there… the function that it brings will help them navigate your site and find what they are looking for.
For more information visit:
http://wordpress.org/extend/plugins/wp-pagenavi/
