Page navigation for wordpress blog is vital, the navigation links allow search engine to crawl more links to the site interior thoroughly. This is good for Search Engine Optimization, by implementing a Search Engine Friendly site. More than that page navigation provides easy way for user to access site contents that makes your site User Friendly. There are lot of wordpress plugins to provide such page navigation, but it is not a good idea to use too much plugins for your site, since it could harm your server performance and make your blog works heavier.
Before we continue, I'd like to remind You that this is how to create page navigation for wordpress, if you are using blogger you can try my stylish page navigation for blogger that I designed meself with 5 different styles so far.
This trick was adapted from WP Page-Navi plugins with a little modification. OK then, let's just get started:
In addition, this page navigation code has two navigation options. The normal navigation like the above link and dropdown navigation. To change the navigation type, simply re-open your functions.php file, there you'll find custom navigation style and define what you like most. Find code $pagenavi_options['style'] = 1;, number one (1) means normal navigation or you can set 2 for dropdown navigation.
This trick was adapted from WP Page-Navi plugins with a little modification. OK then, let's just get started:
- Open functions.php file from your theme directory or from your Dashboard, click appearance – editor and look for Theme Function, then add code from this file: View Code. You can append the code anywhere in functions.php file but to put it in the end is recommended.
- Now use this code <?php wp_pagenavi(); ?> to call the page navigation function to work from the functions.php you added earlier. Open index.php file and copy the code and put it somewhere after post entry or before the footer division of your template, it could be different for any theme but you may customize it when you know where it appears.
- Until then, your page navigation should have worked properly but only in your front page (index.php). So add also code <?php wp_pagenavi(); ?> to archive.php file, it should create page navigation in archive, category, and tags.
- In order to match the look of your page navigation, open yur style. css file and add the following code:
/*Page Navi*/
.wp-pagenavi{text-align:center; margin-bottom:21px;
margin-top:5px; clear:both}
.wp-pagenavi a, .wp-pagenavi span{text-decoration:none;
font-weight:bold; border:2px groove #555;
padding:3px 5px; margin:2px}
.wp-pagenavi a:hover, .wp-pagenavi span.current{
background-color:#43Bccc; border-color:#000}
.wp-pagenavi span.current{font-weight:bold; background:#ccc} - Don't forget to insert the page navigation code and add the style to it. Add code <div class ="wp-pagenavi"> to call the style for your page navigation, it should look like this:
<div class ="wp-pagenavi"><?php wp_pagenavi(); ?></div>As the example of how this page navigation looks like, see this page.
In addition, this page navigation code has two navigation options. The normal navigation like the above link and dropdown navigation. To change the navigation type, simply re-open your functions.php file, there you'll find custom navigation style and define what you like most. Find code $pagenavi_options['style'] = 1;, number one (1) means normal navigation or you can set 2 for dropdown navigation.