How to add Page Navigation Menu without Using Open Hook Plugin in Thesis Theme

In any blog if you have more content on your blog you must need page navigation. By default thesis theme has the page navigation as previous entries and next entries. In order to add page navigation menu we need a wordpress plugin called wp-pagenavi.

For other than thesis users who having wordpress themes you can just install and activate wp-pagenavi plugin in your blog its working fine. For thesis users after activating wp-pagenavi plugin you should add some code in your custom functions.php file then only it wil work. This below video explains in detail about wp-pagenavi.

This Video Explains about..

How to add page navigation in thesis theme without using open hook plugin?

How to add wp-pagenavi in wordpress themes?

How to style your page navigation menu?

How to add before footer or inside content box?

How to set number of pages in page navigation menu?

It contains css codes for your page navigation menu.

Codes

Css code for page navigation menu (this is optional) you can use it in thesis and other wordpress themes.

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

The below custom function code is for thesis theme. After installed wp-pagenavi in thesis theme it not working you must add the below code in custom_function.php file.

/*paste in custom_functions.php file*/
function pagenavi(){
?>
<div align="left">
<?php if(function_exists('wp_pagenavi')) { wp_pagenavi(); } ?>
<br />
</div>
<?php
}
add_action('thesis_hook_after_content','pagenavi');

you can also add other hooks (thesis_hook_after_content_box or else thesis_hook_before_footer) instead of  thesis_hook_after_content in order to place page navigation menu above footer.

Share your experience in comment section. For more checkout our all Thesis theme tutorials..

{ 27 comments… add one }

Leave a Comment

  • Suresh February 20, 2010, 11:14 AM

    hai vivek,

    I think you are using two hooks in custom function.php file use thesis_hook_after_content_box only.

    otherwise use thesis_hook_before_footer_area because you are using full width frame work. don’t use both hooks..

    Reply
  • Suresh February 21, 2010, 12:27 PM

    hai vivek, your second page navigation menu appears before footer.. check your custom functions.php code. have you added anything before footer?..

    Reply
  • Pascal February 22, 2010, 6:48 AM

    i finished your problem. go and check your site.

    Reply
  • john February 24, 2010, 10:00 PM

    hi – i installed this and it works fine – BUT – is there anyway to exclude the page-navi from homepage? it works fin everywhere else, but on homepage any page clicked goes to a copy of the homapge, or 404′s after page 5.

    Reply
  • Suresh February 25, 2010, 9:16 PM

    hai john..
    First add page navigation in your site then only i can identify your problem and try to solve it.. after adding this tell me..

    Reply
  • Tony M February 25, 2010, 10:09 AM

    I have put this onto a site I did with 42 total pages. I now have these boxes only Page 1 of 42, 1, 2, 3,4, >, 15,30, Last and it drops to next line. The spacing is so weird, is there a way you know to bring the boxes in closer?

    Site used on bobgarontraining.com

    Reply
  • Pascal February 25, 2010, 7:16 PM

    After checking i will inform you.

    Reply
  • Suresh February 26, 2010, 12:34 AM

    hai tony,

    You are using full width frame work do some modification in custom.css code
    The above css code replace this line
    .wp-pagenavi a, .wp-pagenavi a:link { ...}

    with
    .custom #content .wp-pagenavi a.page, .custom #content .wp-pagenavi a:link { ... }
    this code in your site you have missed margin:2px;
    In the custom.css code in each line before the .wp-pagenavi you add .custom #content

    it looks like .custom #content .wp-pagenavi

    then your pagenavi working fine..

    Reply
  • Tony M February 26, 2010, 3:15 AM

    As usual, you guys rock! This is my go to site for everything Thesis. Thank you.

    Reply
  • haxrat April 20, 2010, 5:01 PM

    first thanks for the tips , and my question is how to remove the default navi ,
    that’s the previous entry link and the next entries

    Reply
  • Suresh April 20, 2010, 9:25 PM

    hai haxrat,

    go to thesis options in wordpress admin. select thesis options (in thesis 1.7 site options) .
    Inside thesis options we have ‘display options’ section here expand ‘posts’ options.

    here you have check box for ‘show previous entries and next entries’
    uncheck this box link will removed…

    Reply
  • Bill May 25, 2010, 9:32 PM

    You guys do great work, no doubt. I’ve used your coding for pagenavi, but still having issues. I know it isn’t your code because it wasn’t working even before I turned to you. Any tips would sure help. Thank You…

    Reply
  • Suresh May 26, 2010, 12:28 AM

    hai Bill,

    I saw your site there is no code available for page navi just add the code and then contact..

    Reply
  • Bill May 26, 2010, 3:57 AM

    Well, I don’t know what to say. Just checked both files in bluehost and the code is there – as well as the code for your search box in navbar. Obviously, I’m doing something wrong, but I don’t know what it is?????

    Reply
  • Suresh May 27, 2010, 9:16 PM

    hai bill,

    have you changed your custom sample folder into custom..?
    Because i am not able to check your custom.css file..
    have you added code in custom.css file?..

    Reply
  • Bill May 28, 2010, 12:54 AM

    This is so odd. Here’s what’s in my custom.css (for sure that’s the name) file right out of my bluehost file manager. And, hopefully, as you can see on the site the custom header, multimedia box, sidebar color, etc is up and running…

    ——– 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; }

    .custom #multimedia_box { background: #F5E9FF; }

    .custom #content_box { background: #f5e9ff; }
    .custom #sidebars { margin-top: 0px; background: #000000; }

    .custom .sidebar h3{background-color: #4B088A;

    -moz-border-radius: 5px; padding: 0.1em 0.1em 0.1em 0.5em; font-weight:bold; text-align: center; font-size:1.2em; color:#ffffff;}

    /* DoubleMule Clickable Header v. 1.0
    */

    .custom #header
    {
    background: #f5e9ff;
    padding-top:
    0em;
    padding-right: 0em;
    padding-bottom: 0em;
    padding-left:
    0em;
    border-top: 0em;
    border-right: 0em;
    border-bottom: 0em;
    border-left:
    0em;
    margin-top: 0em;
    margin-right: 0em;
    margin-bottom: 0em;
    margin-left:
    0em;
    }

    .custom #header #logo a
    {
    display:block;
    width:628px;
    height:118px;
    background:url(http://i635.photobucket.com/albums/uu80/panicattackology/chipurlogo052610.jpg)
    center no-repeat;
    outline:none;
    color: #000000;
    text-indent:
    -9999px;
    padding-top: 0em;
    padding-right: 0em;
    padding-bottom:
    0em;
    padding-left: 0em;
    border-top: 0em;
    border-right: 0em;
    border-bottom:
    0em;
    border-left: 0em;
    margin-top: 0em;
    margin-right: 0em;
    margin-bottom:
    0em;
    margin-left: 0em;
    }

    .custom #header #tagline
    {
    color:#000000;
    text-indent:
    -9999px;
    }

    Reply
  • Suresh May 28, 2010, 10:03 AM

    hai Bill,
    send me your wpadmin username and password via contact form.. I will check it.

    Reply
  • Bill May 28, 2010, 1:48 PM

    just saw my custom.css on firebug. don’t know why you can’t see it. no offense, but i’m not real comfortable giving out my admin name and password.

    Reply
  • Suresh May 28, 2010, 4:03 PM

    hai Bill,
    Ok no problem..

    I can see your css code.. But not to see custom_function.php code..
    are you using open hook plugin?
    send your custom function code via pastebin.com..

    once again check wp-page navi plugin options..

    Reply
  • Bill May 28, 2010, 9:12 PM

    need your email for pastebin…

    Reply
  • Suresh May 28, 2010, 10:49 PM

    hai bill,

    Go to pastebin.com paste your custom_function.php code submit it.
    copy the url from the address bar
    send the url via comment..

  • Bill May 29, 2010, 3:22 AM
  • Suresh May 29, 2010, 10:43 AM

    hai Bill,

    I saw your code in pastebin..
    custom navigation menu code line 28 add_action code is not available in your code check our tutorial..

    In wp page navi code In 32 line the function name is not there..
    function pagenavi(){ (This line should come before line 33)
    check our tutorial..

  • Bill May 30, 2010, 9:23 PM

    handled – thank you for your loyal follow up.

  • PM September 6, 2011, 11:22 PM

    Thank You so much for this! Especially your comment about the changes we need to make for a full width framework.

    Works wonderfully so far :-)

    Reply
  • wikibiz November 17, 2011, 7:50 PM

    Thank you 4such as great site.It help me a lot to build my site.i want to add pagination to my site but not working your code actually i am confuse which code i use.please help me.and show me the code ..

    Reply
  • FourBlogger November 20, 2011, 10:04 PM

    If you feel confused, then go for pagenavi plugin. It will easy to use.

    Reply