How to add Page Navigation to Thesis Theme and CSS Style it using Thesis OpenHook and WP-PageNavi Plugins

Thesis theme is one of the most exciting themes ever, I think this way about it because one thing rather than full controlling of your theme and design from inside your WordPress control panel and the other features included on it easy SEO for your blog, Thesis teach you and enhance your skills each time you tweak it.

I was trying today to add an easy page navigation to FamousBloggers blog, and I was thinking about using WP-PageNavi as it’s ready to use and all what we need is not install it and tell Thesis where to display it in our blog, then styling the way it looks is not a big deal. So let’s go through this three easy steps, but before that try to backup your code and database.

1 – Install WP-PageNavi plugin

Get WP-PageNavi plugin from it’s official website, and install it by the normal way like any other plugin, extract the zip file upload it to your plugin directory then check the plugin settings if needed. Note that after this step the page navigation may not show because Theses Theme doesn’t know about it yet! So we have to do a simple step to display it!

2- Tell Thesis where to display the page navigation

In most cases you will like to display the page navigation after the content section, and using Thesis OpenHook plugin is pretty easy thing. So you will need install Thesis OpenHook if your blog doesn’t have it.

After installing the plugin, open Theses OpenHook settings and scroll to “After Content” section, copy and past this code in the field as shown on the image below:

Thesis OpneHock

The code:

if(function_exists('wp_pagenavi')) { wp_pagenavi(); }
else { ?>
<div class="pagination">
<div class="alignleft"><?php next_posts_link('&laquo; Older Entries') ?></div>
<div class="alignright"><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>
<?php
     }

Don’t forget to tick the three check boxes under the field as shown in the image above where the green arrows to “Execute PHP on this hook”, “Remove Thesis post navigation ” and “Remove Thesis prev/next posts” (the third one is optional), I just didn’t style it yet, and I don’t like the way it show long titles of next and previous posts, I prefer one word or a small image!

3- Styling your page navigation

Here is the fun part, I have included the style code I am using here on FamousBloggers blog, you can change colors font size or any other elements to match your blog theme. Copy and past the code o your custom.css file to over ride the original style of the plugin, your page navigation will look like this:

The code:

/*
-------- 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; }

Don’t forget to clear your cash in case you are using WP Super Cache plugin to see the changes you have made.

That’s it!

Writing about Thesis is pleasure, I am thinking of having a series of post here talking about how to customize Thesis Theme. If you think Thesis need more posts from bloggers who have little experience like me then encourage me by adding a comment to this post.

Need fully customized Thesis Skins? Check out ThesisAwesome.com

Tagged as: after content, execute php, how to customize, styling page navigation, thesis customization, thesis open hook plugin, thesis theme wordpress

Follow @hishaman
Facebook
Google+

Blog → Zebida.com Personal Blog
View all posts by Hesham Zebida

Article by Hesham Zebida

I create websites, and I develop Thesis Skins. I am a social network lover. I am also the night creature who works hard to keep this project up. Owner and founder of FamousBloggers.net.

Write for us a guest post