• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar
  • The Famous Blog
    • Blogging
    • Social Media
    • SEO
    • Marketing
    • Design

Famous Bloggers

How To Blog and Start a Business

  • Contribute
    • Submit News
  • Login

Home » The Famous Blog » How to add Page Navigation to Thesis Theme and CSS Style it using Thesis OpenHook and WP-PageNavi Plugins

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

January 21, 2010 - Last Modified: December 1, 2011 by Hesham Zebida 6,824

thesis theme for wordpress

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
Thesis OpneHock

The code:

[php]
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
}
[/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: page_navigation

The code:

[css title=”custom.css”]
/*
——– 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; }

[/css]

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

Thesis_468x60

ShareTweet

Filed Under: Design, Thesis Theme

About Hesham Zebida

Follow @hishaman

I create websites with WordPress, and I develop Schema Plugins to help SEOs. I am a social network lover. I am also the night creature who works hard to keep this project up. Owner and founder of the Famous Blog.

Reader Interactions

Related Posts

  • Thesis Themes Design BusinessThe Thesis Theme Design Business as I see it!
  • WordPress 3.1Upgrading Thesis Theme Blog To WordPress 3.1 Safely
  • WordPress author pageThesis Theme Tutorial: Customize WP Author Archive Page
  • Building Your WebsiteWhy You Need to Plan Before Building Your Website

{ 76 Responses }

  1. Toufiq says:
    i have followed your tutorial and added it to my site, though i have my own css edit.
  2. Rajib Kumar says:
    Not working for me. I think problem on given code. I use following code and it works-
    • Deborah Anderson says:
      Thank you for providing the code, Rajib, but it appears that our system automatically removed it, so we can't see it.
  3. Mary says:
    I do not know what I am doing wrong. I followed all of the instructions above and I still do not have a Nav bar showing. I have the pages selected, I have the plugins installed. I have Googled like crazy. I am not a Pro at this (obviously) and could use a little guidance. Any help would be greatly appreciated!
    • Hesham Zebida says:
      I can see the navigation on your single post, probably you need to check the plugin settings!
  4. D.J.Rony says:
    I tried the code with custom_function.php but it does nothing but an error in syntax. If I use it directly in custom_function file shouldn't it work? i had to use the ftp to cleanup the code at last.
    • Hesham Zebida says:
      Sorry, my code highlighting plugin was adding some extra comments to the code! It's fixed now!
  5. Gouri says:
    Thanks for sharing this.. How nice it would be if this was included in the customization option!
  6. Maria says:
    I am using page navi-plugin.. And its really frustrating. I have tried to change its style according to my theme. Can anybody suggest me any other good plugin?
    • Hesham says:
      Hi Maria, You might want to check "Paginator", it's the best navigation plugin for wordpress I've seen so far!
  7. Nasif says:
    I followed your tutorial and placed a page navigation link to my blog. The design is nice compared to the default one. Thanks for the post :)
  8. kenedy says:
    Hello, i have a problem with the pagination, it appears everywhere, in comments pages, on squezze pages... i just need it in the home posts page... how could I do that? Thankyou....
    • Hesham says:
      Hi Kenedy, Check the plugin settings, there is an option to display the navigation on every page "Always Show Page Navigation", make sure it's not selected!
      • kenedy says:
        Thankyou!! great! ;-)
  9. kenedy says:
    Hello, Thankyou for this pagination tutorial... By the way, by default thesis insert the posts in a way that i don't like. The first two, great, but the other ones appear in double column. I'm a newbie with thesis, how can I fix this? i need all the post the same like the first two. and just a page with 4 posts, then after that begin the pagination with page 2. I don't want 7 posts all sqeuzzed together. I'm struggling with this, could you help me? Thankyou in advance!
    • Hesham says:
      Hi, I don't understand your question perfectly but you maybe need to check your thesis design options, look for "Home Page Display Options" and change the numbers of featured posts or something! Try to visit Thesis support forum, they have good support!
      • kenedy says:
        Ok, Thankyou... that was the problem... ;-)
  10. Gustavo says:
    How can I get rid of the page navigation on posts? For some reason the page navigation also appears also in posts. Is it supposed to?
    • Hesham says:
      I see, probably you need to set a condition to display it only on home page! Have you tried Paginator plugin? I think you are going to like it!
      • Gustavo says:
        Yeah, I finally was able to fix it. I had to un check something I had selected. What is the difference between pagenavi and paginator?
  11. Rohit says:
    Thanks buddy.. its working fine for me..
  12. Mike Pablate says:
    Thanks for telling info on Thesis, as I'm new to Wordpress, so I just use simple plug-ins and themes to do blogging. When I started my first website about "home data entry jobs" that time I was not aware of Wordpress but by visiting Wordpress forums I learned a lot and I also have to learn more to share here. What I mainly use is site-map plug-ins, contact forum plug-ins and latest posts plugs etc...
    • Hesham says:
      WordPress is the king CMS for blogging!
  13. Mohzy says:
    It works but how i remove "← Previous Entries" from my blog ?
    • Hesham says:
      Hi Mohzy , Sorry for the very late reply! To remove the previous entries from thesis skin, you can add this code to your custom-function.php : remove_action('thesis_hook_after_content', 'thesis_post_navigation');
  14. Thu Nguyen says:
    Thanks so much for this. I knew that Lester's plugins are great but in integrating it into Thesis, well I haven't yet mastered my hooks. So this is a godsend. Appreciate the help, Hesham!
  15. Drahen says:
    Thank you for this information, I though pagenavi automatically add this after content, just like sexybookmarks do. I don't know that I had to manually add it. Thanks.
    • Hesham says:
      Great to see it working for you, I have just visited your blog now.. enjoy!
  16. David Osajie says:
    Thanks for this, worked like a charm. Though I'm yet to edit the css to fit the color of my blog, I think I'll just keep using it that way.
    • Hesham says:
      It's actually a great plugin, glad you like it and it worked for you!
  17. element321 says:
    Hey buddy thanks for code. I just installed the plugin and added the code. It looks sorta like your page nav but not exactly. I will have to recode it to work better with my theme but overall it looks like a good starting point. .-= NEW from element321 @ evolutionary designs´s last blog ..Daily Delicious Links April 8th 2010 =-.
    • Hesham says:
      Check also the other page navigation plugin for WordPress I have posted about it recently, it's much much easier to work with and have a feature to scroll through all pages!
  18. Tony M says:
    Im having troubles with this plugin, there is some padding in between each page # box that I can't seem to remove. The darn menu is spreading across the whole theme and then dropping down, yet I only have 6 page numbers. Any ideas? .-= Tony M´s last blog ..Top Notch Fitness Website Design Advice =-.
    • element321 says:
      I know its a little late and you have probabally fixed it or moved on to something else. Have you tried using Hesham's code? I had a lot of issue the standard CSS until I used his code. Now all I have to do is update it and change so it works better with my blog. .-= NEW from element321´s last blog ..Daily Delicious Links April 8th 2010 =-.
      • Hesham says:
        Thanks for your support buddy!
    • Hesham says:
      I am sorry for the late respond Tony, I see that you have solved the problem, you juts need to check the size of font in you CSS, it's changing when I hover! Also there is a post on the main page talking about another page navigation for WordPress that you can use, it's the same I am using right now!
      • Tony M says:
        Thanks for the response Hesham. I fixed the code by aligning the css to conform to full page width with the Thesis theme. What browser are you using to get a font error? I look and I see the hovered box enlarge, but not the font. .-= NEW from Tony M @Fitness Website Design´s last blog ..How to Embed Videos on Wordpress Fitness Blogs =-.
        • Hesham says:
          Chrome and Firefox! It's not an error by the meaning,and maybe it's not a font size, but there is a little difference between 2 values, it makes a little shift when you move over the page numbers!... Ok, I find it.. insted of .wp-pagenavi a:hover { background-color:#EEEEEE; border:4px solid #1A317F; I think it should be .wp-pagenavi a:hover { background-color:#1A317F; border:1px solid #1A317F; This to avoid this little shift! tell if it work because I am not sure!
          • Tony M says:
            Thats how I wanted it, is there a reason I shouldn't do that? .-= NEW from Tony M @ Fitness Website Design´s last blog ..How to Embed Videos on Wordpress Fitness Blogs =-.
        • Hesham says:
          Nope ;)
  19. Praveen says:
    Hi, Thanks for this tutorial. I am having problems setting this up on my blog. I am using Thesis theme with Blogussion skin. Below is a link to an image describing my problem. http://www.watchmissedtvshowsonline.com/images/sample.jpg I don't know why but I am getting huge gap between the page numbers. Please help me solve this problem. Thank you. .-= Praveen´s last blog ..24 Season 08 Episode 06 Day 8: 9:00P.M. to 10:00P.M. =-.
    • Hesham says:
      I see! this is probably because your plugin is set to show lower number of pages! it's set to show 5 pages! Fix this problem by visiting the settings > PageNavi > and set it to show 9 or 10 pages or something!
      • Praveen says:
        Thanks for that. Even after I set the number of pages to show to 9 in the pagenavi options, I am still out of luck. Have a look at it now. http://www.watchmissedtvshowsonline.com/images/sample1.jpg I have followed your tutorial doing all the steps for several times, still no luck on my side. Does blogussion skin has got any thing to do with this? .-= Praveen´s last blog ..24 Season 08 Episode 06 Day 8: 9:00P.M. to 10:00P.M. =-.
        • Hesham says:
          The problem seem to be in this code in your custom.css file, this code apply on the page navigation some how! .post_box, .teasers_box, .full_width #content_box .page { margin:0 2.3em 0 1.1em; } Probably you can add this code right after the above code: .page {margin:0 0 0 0;} So maybe you will discover what exactly to change!
          • Praveen says:
            Thank you. Looked into the code and edited as you told. Works like a charm now. .-= Praveen´s last blog ..24 Season 08 Episode 06 Day 8: 9:00P.M. to 10:00P.M. =-.
  20. Dennis Edell says:
    I feel so left out of these tutorials. lol. They give me good ideas of what I may want on my non-thesis themes though. :) .-= Dennis Edell´s last blog ..Blog Move Is Imminent ! I’m Looking For Launch Partners… =-.
    • Hesham says:
      LOL! good it's actually working on any theme!
      • Dennis Edell says:
        Woohoo! .-= Dennis Edell´s last blog ..Here We Go! Theme Construction Part 1 – Your Participation Is Wanted-Needed! =-.
  21. Jimi Jonesjim says:
    This is very nice, thank you for sharing, Hesham. .-= Jimi Jonesjim´s last blog ..Computer Glitches – Weirdness in Wonderland =-.
    • Jimi Jones says:
      Pardon the typo ;-) .-= Jimi Jones´s last blog ..Computer Glitches – Weirdness in Wonderland =-.
      • Hesham says:
        No problem, thanks Jimi!
  22. Latief says:
    Thanks for the sharing Hesham, sorry I'm not using Thesis Theme. I just curious, can I use this for my streamline theme? I don't have page navigation yet, or there's a plugin for the navigation?
    • Hesham says:
      Yes! WP-PageNavi Plugin can be used on any blog!
  23. JR says:
    The styling looks really nice Hesham, very neat and pretty. .-= JR @ Internet Marketing´s last blog ..List of 128 Comment Luv Blogs by Niche =-.
  24. lawmacs says:
    Thanks for sharing this information hesham .-= lawmacs´s last blog ..Guest Posting =-.
  25. Michael Aulia says:
    I didn't know about the Thesis OpenHook plug-in, I was using this manually on the custom_functions.php: remove_action('thesis_hook_after_content', 'thesis_post_navigation'); function custom_prev_next () { if(function_exists('wp_pagenavi')) { echo ''; wp_pagenavi(); echo ''; } } add_action('thesis_hook_after_content', 'custom_prev_next'); .-= Michael Aulia @CravingTech.com´s last blog ..Canon EOS 500D =-.
    • Michael Aulia says:
      Whoops..looks like the comment form doesn't accept the copy-paste code correcty lol but you've got the idea .-= Michael Aulia @CravingTech.com´s last blog ..Canon EOS 500D =-.
    • Hesham says:
      I can read the code, and yes you are right, this is another way to do the same, I actually thought this at the beginning but I decided to make it more easy to let people think about what else they can do with the OpenHock plugin, you can imagine!
      • Michael Aulia says:
        True, true. Not many people like dealing with codes and manuals. At least with the OpenHook plug-in, things will get a bit easier for them .-= Michael Aulia´s last blog ..Canon EOS 500D =-.
  26. Kristi Hines says:
    I forgot about adding this back into my theme after I upgraded to Thesis... I just realized that I still have the Previous Entries link. Thanks for the post... I'll have to go add that now. .-= Kristi Hines´s last blog ..11 WordPress Plugins to Analyze and Increase Traffic =-.
  27. mathan raj says:
    This plugin will really helpful for wp thesis users. Thanks for sharing.

Primary Sidebar

Our Newsletter

Our Newsletter

Join our mailing list to receive the latest news and updates from our blog.

You have Successfully Subscribed!

Popular Articles

  1. Top 10 Sites Where You Can Get Paid to Write 115,649 views
  2. How to Get Targeted Twitter Followers Fast 92,036 views
  3. How to Set Half Rating Scale 1-5 (Poor to Excellent) by Words 86,704 views
  4. 66 Awesome Social Media Quotes 78,368 views
  5. 50 Traffic Sources You Should Milk Like Crazy 75,081 views
Schema Structured Data for wordPress
  • Blog
  • Contribute
  • About Us
  • Contact Us
  • Disclosure Policy

Copyright ©2020 · FamousBloggers - All Rights Are Reserved · Powered by Genesis Framework

  • Login
Forgot Password?
Lost your password? Please enter your username or email address. You will receive a link to create a new password via email.
Go to mobile version