Add Page Navigation in Thesis Theme- Stylish and Customized

Thesis Theme customization is very easy and you can customize it uniquely in a few steps. Previously i wrote about featured post on home page for thesis and as demanded by users to write more thesis customization tutorials, i am going to share another one. Using this tutorial you can easily add a Page Navigation on home page in your thesis theme. For example you can see the navigation added to TechMaish home page. Here is the screen shot.

Page Navigation helps your users to easily navigate your blog posts. Although categories and wordpress tags can also do the same, but page navigation can show them all the posts according to date wise. It is also part of your blog design and can make your blog more attractive.

How to Add Page Navigation in Thesis?

1. Download WP-PageNAV plugin and install it. You will also need Thesis Open Hook Plugin in order to add page navigation to your theme.

2. Download Thesis Open Hook Plugin and activate both plugins.

3. Next step is to paste the below code through Open Hook plugin. Add the code in the Open Hook box where you want to add page navigation. For example i pasted the code in Before Footer hook. Make sure to tick “Execute PHP for this plugin” box so that the code can be executed.

Add this Code

<div style="clear: both;"></div>
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); }
else { ?>
	  <div>
		 <div><?php next_posts_link('« Older Entries') ?></div>
		 <div><?php previous_posts_link('Newer Entries »') ?></div>
	  </div>
<?php } ?>

Next Step- Style and Customize the Page Navigation

Add the below code in your custom.css file to style and customize your page navigation.

/*
-------- pagenavi-----------------------------------
*/
.wp-pagenavi { margin: 15px 0px 15px 0px; }
.wp-pagenavi a, .wp-pagenavi a:link { font-size:16px; padding: 5px 9px; margin: 2px; text-decoration: none; border: 1px solid #e1e1c8; color: #413f36; background-color: #eeeeee; }
.wp-pagenavi a:visited { font-size:16px; padding: 5px 9px; margin: 2px; text-decoration: none; border: 1px solid #e1e1c8; color: #413f36; background-color: #eeeeee; }
.wp-pagenavi a:hover { font-size:16px; border: 1px solid #608e7a; color: #FFF; background-color: #2ab7d9; }
.wp-pagenavi a:active { font-size:16px; padding: 5px 9px; margin: 2px; text-decoration: none; border: 1px solid #e1e1c8; color: #413f36; background-color: #eeeeee; }
.wp-pagenavi span.pages { font-size:16px; padding: 5px 9px; margin: 2px 2px 2px 2px; color: #000000; border: 1px solid #e1e1c8; color: #413f36; background-color: #eeeeee; }
.wp-pagenavi span.current { font-size:16px; padding: 5px 9px; margin: 2px; font-weight: bold; border: 1px solid #608e7a; color: #FFF; background-color: #2ab7d9; }
.wp-pagenavi span.extend { font-size:16px; padding: 5px 9px; margin: 2px; border: 1px solid #608e7a; color: #FFF; background-color: #2ab7d9; }

You are done. Visit your blog and you will be able to see page navigation added to your blog home page at the exact location where you pasted the PHP code in Thesis Open Hook Plugin.