How to add stylish page navigation in thesis using wp-pagenavi

May 4, 2010 by: sensehow 0

Tweet

Thesis does not have an default page navigation option.But page navigation can be added to thesis by various plugins.But unless customizing these plugins,they wont look appealing to your visitors and also will not attract their attention.Page navigation is also very important to reduce the bounce rate of blogs.So let me explain how to add page navigation in thesis and how to customize it to look stylish.

1.Install wp-pagenavi wordpress plugin from your wordpress dashboard and activate it.

2.And then install thesis open hook wordpress plugin and activate it.

3.Go to the “Thesis open hook” menu and add the below code  to “After content Box” and Check “execute php” and save it.

<div align="left">
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
<br />
</div>

4.Now page navigation will be visible in your wordpress thesis blog.

5.To customize the page navigation add the below code to the custom.css from your thesis custom file editor.

/* css code for page navigation menu
-------- wp-pagenavi----------------------------------- */
.wp-pagenavi { margin: 15px 0px 15px 0px; }
.wp-pagenavi a, .wp-pagenavi a:link { font-size:14px; padding: 5px 9px; margin: 2px; text-decoration: none; border: 1px solid #e1e1c8; color: #413f36; background-color: #eeeeee; }
.wp-pagenavi a:visited { font-size:14px; padding: 5px 9px; margin: 2px; text-decoration: none; border: 1px solid #e1e1c8; color: #413f36; background-color: #eeeeee; }
.wp-pagenavi a:hover { font-size:14px; border: 1px solid #608e7a; color: #FFF; background-color: #75040b; }
.wp-pagenavi a:active { font-size:14px; padding: 5px 9px; margin: 2px; text-decoration: none; border: 1px solid #e1e1c8; color: #413f36; background-color: #eeeeee; }
.wp-pagenavi span.pages { font-size:14px; 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:14px; padding: 5px 9px; margin: 2px; font-weight: bold; border: 1px solid #608e7a; color: #FFF; background-color: #75040b; }
.wp-pagenavi span.extend { font-size:14px; padding: 5px 9px; margin: 2px; border: 1px solid #608e7a; color: #FFF; background-color: #75040b; }

You can change the hover,background and other colors of the page navigation bar by changing it in the above code.

Check your website you will have a stylish page navigation bar below the content area in thesis wordpress theme.
Have difficulties?post a comment

Related posts:

1. How to add page navigation in thesis without openhook plugin
2. How to add stylish asnio 3 column footer to thesis wordpress theme
3. How to add a widgetized 3 column footer in thesis wordpress theme
4. Adding author profile box in thesis wordpress theme
5. How to add image hover effects in thesis and other wordpress themes,blogger
6. How to add author profile box below posts in wordpress themes