Thesis Theme : Setup Pagination on Home Page

In this tutorial, we will see How to Setup Pagination on the Home Page of your Blog or Website running on the Thesis Theme for WordPress.  This will replace the regular “Previous Entries” link that appears at the bottom of your Content Area, just below the Teasers (if you are using them).

What are we trying to create?




Install the WP Navigation Plugin

To setup pagination on your WordPress Blog, we need to install the WP-Navigation Plug-in.

You can download the Plug-in from its Home Page -http://www.lesterchan.net/wordpress/readme/wp-pagenavi.html

Follow the instructions on the Plug-in page for installation.  Note there are different versions of the plug-in, for various WordPress versions. Choose the right one based on your WordPress install.

Default settings and options for the plug-in is sufficient to get started. If you need further changes, options are available under Settings – PageNavi in your WordPress Admin Dashboard

Proceed further only if the plug-in is successfully installed and activated.

Add code to custom_functions.php

Add the following code to custom_functions.php file.  You can find this file in the following path – /custom/custom_functions.php

/* Pagination */
function my_thesis_pagination() {
  echo "
"; wp_pagenavi(); echo "
"; } remove_action('thesis_hook_after_content','thesis_post_navigation'); add_action('thesis_hook_after_content', 'my_thesis_pagination');

Add styles to custom.css

Add the following code to custom.css file.  You can find this file in the following path – /custom/custom.css

/* Page Navigation */
.custom .full_width #content_box .wp-pagenavi .page {
  margin: 2px;
  padding: 2px 4px;
}

Further Styling up the Pagination Bar

With the default installation, your pagination bar looks something like this.

thesispagination

If you like to try your hand at CSS, then the pagination bar can be further styled by making changes to the following file:

/wp-content/plugins/wp-pagenavi/pagenavi-css.css

Get in touch with me, if you need any help in styling the pagination bar.

Hope you found this simple tutorial useful.  Share it on social media using the tools given below, so that more Thesis folks might use it!

If you link this entry, please share it
We Recommend
Make your Wordpress Site doubly awesome, we recommend the usage of Genesis Framework based Child Themes that are SEO Rich, Customizable and Highly Reliable. Click here to know more

Comments

  1. Nash says:

    Any possibility of getting you to help integrate this with Thesis?I love the pagination used here

    http://www.dirty.ru/

  2. Hi Nash,

    I can definitely help you. Do you need the same pagination style or some more CSS changes? You can also send me an email – ashwin dot chandrasekaran at gmail dot com

    Regards,
    Ashwin

  3. NYC People Project says:

    Many thanks. Just set up blog and only have 1 page of posts so far, but with a test it appears to work. thanks for sharing your knowledge!

  4. nycpeopleproject says:

    Many thanks. Just set up blog and only have 1 page of posts so far, but with a test it appears to work. thanks for sharing your knowledge!

  5. Great to hear that… Let me know if you need any help =)

  6. Avinash d'Souza says:

    Well, I really like the look of the one at dirty.ru but that's asking you for too much trouble.

    Can you help with this? http://mis-algoritmos.com/2007/03/16/some-style…

    It's the Black-Red Style and the css code is even given.

    It's not that I don't like the pagination by Chan it's just that I currently use it myself and now I'm looking for a visual change in my pagination…

  7. Pooja Arora says:

    hey ashwin, how can i get the pagenavigation similar to http://www.asnio.com ( page navigation is numbers on home page and for internal pages it will be previous entries and next entries link, can you please help me in getting the style for same ?

  8. Try this in place of the one given in the post… (let me know if some HTML is garbled – I can send by mail)

    /* Pagination */
    function my_thesis_pagination() {
    if (is_home()) {
    echo “

    ”;
    wp_pagenavi();
    echo “
    ”;
    } else {
    thesis_post_navigation();
    }
    }
    remove_action('thesis_hook_after_content','thesis_post_navigation');
    add_action('thesis_hook_after_content', 'my_thesis_pagination');
  9. Pooja Arora says:

    Hey Ashwin, i mean how to make change in CSS , so i will get the exact look like asnio.com for page navigation style on home page ?

  10. I may not be able to offer immediate help but I have it in my list of “to do” activities

    Thanks
    Ashwin

  11. I will mark it for my weekend…. You can expect a reply then

    Thanks
    Ashwin

  12. Pooja Arora says:

    thanks a lot, Ashwin……………will wait for u r reply

  13. Hi Pooja,

    I have shared a file (pagenavi-css.css) with you at – http://www.mediafire.com/?qiefygjz0zq

    First download this file. Now inside your WordPress installation navigate to /wp-content/plugins/wp-pagenavi

    Here there will be a file named – pagenavi-css.css Take a backup of this file and replace it with the file you just downloaded.

    Reload your page and you should get the style like Asnio.com

    Let me know how it works!

    Cheers…

  14. Hi Avinash,

    I have shared a file (pagenavi-css.css) with you at – http://www.mediafire.com/?qznjzywzzgw

    First download this file. Now inside your WordPress installation navigate to /wp-content/plugins/wp-pagenavi

    Here there will be a file named – pagenavi-css.css Take a backup of this file and replace it with the file you just downloaded.

    This should give you the Black-Red Style (i tried to get the closest possible!). You can see the preview on my test site in this image – http://www.mediafire.com/imageview.php?quickkey…

    Let me know how it works!! Keep visiting often

  15. Did my response help you?

  16. Did my response help you?

  17. Everett says:

    Great plugin! Thanks! Here it is implemented on my site with some custom css:

    http://www.prodrumreviews.com

    Thanks again!

  18. Thanks Everett! I looked at your site and it is awesome.
    Great going.

  19. jhony says:

    hi can you tell me how to get rid of the the column display in the home page and post only excerpts of the recent posts on the homepage in thesis something like http://bankling.com/ if you visit that page you can see there is no two columns for the posts instead there is only excerpts of each post. How can I bring that effect in thesis?

    thanks

  20. naz says:

    nice tuts ashwin.btw, is there any cool pagination design by thesis user ? =D

  21. I like the pagination design at http://www.blogussion.com using Thesis.

  22. I like the pagination design at http://www.blogussion.com using Thesis.

  23. mohdisa says:

    how to make it center?

  24. Not sure – but you can try .custom .full_width #content_box .wp-pagenavi { text-align:center; }

  25. Thomas says:

    Hi Ashwin,

    I tried your code on my site http://www.KanadaSpezialist.com but I got this error message:

    Parse error: syntax error, unexpected '&' in /home/kanadas/public_html/wpkanadaspezialist/wp-content/themes/thesis_151/custom/custom_functions.php on line 55

    Line 55 is:
    echo "

    ";

    Do you know what the problem is?

    Cheers,

    Thomas

  26. Hi Thomas,

    I don't have big clues… but why don't you try this code instead.
    I have just removed the 'echo' because to avoid the trouble of escape characters.

    Let me know if this helps.

    /* Pagination */
    function my_thesis_pagination() { ?>


    wp_pagenavi();
    ?>

    }
    remove_action('thesis_hook_after_content','thesis_post_navigation');
    add_action('thesis_hook_after_content', 'my_thesis_pagination');
  27. Thomas says:

    Hi Ashwin,

    It was a problem to copy the code from our website.

    Now it is working.

    Thanks!

    Cheers,

    Thomas

  28. buzzhunt says:

    @Ashwin your code in the comment worked, whereas the code in the post did not. Thx

  29. Ashwin says:

    Glad it worked :)

  30. Stephen says:

    Hi Ashwin,

    How can I change the font size of the pagination? Please advise.
    Thank you.

    Cheers
    Stephen

  31. Ashwin says:

    Stephen,

    Can you try adding this to the CSS code given in the blog post?

    font-size:12px;

    Replace 12 with what size you need. Let me know if this works!

  32. Greg Keene says:

    How do I limit the number of 'page' boxes?

  33. Ashwin says:

    Greg,

    That's more to do with the plugins, rather than Thesis in itself. I guess a little tweak in the plugin source should do it. However, this will break whenever you do plugin upgrade!

  34. Almeidamarcell says:

    This one is working good! That one in the post is not working ;(

  35. Nick says:

    Actually this plugin is good but for the new user it is not easy to plug..otherwise good theme..thanks for sharing..

  36. Tixy says:

    Hello Ashwin – I am new user and try to use pagination code. However, I got to much spaces betwen pages. Any idea what is wrong? Thanks.

    • Ashwin says:

      Tixy,

      I just checked your site. It appears that the pagination is great. Do you still have any problems?
      Do let me know and I can help you out.

      Thanks.

  37. Tixy says:

    Hello Ashwin, thank you for fast reply!!! I spent some time this morning in searching (after previous comment) and found tutorial: how to add pagination without any plugin and how to change custom_functions.php and custom.css. I deactiviated PageNavi, tried this script and it works fine :) … It seems that adding extra script could be good solution for begenners. Thank you anyway!!!

  38. lovefortech says:

    Hey Ashwin,

    Any idea how to setup this pagination for the archives page?

    Cheers

  39. enursa says:

    Thanks dude. I want try install it on my site.

    Reply

Trackbacks

  1. Ashwin says:

    Setup Pagination in Thesis Theme http://bit.ly/sbSJv #thesiswp #wordpress @diythemes

    Reply
  2. Ashwin says:

    Thesis Theme : Setup Pagination on Home Page http://bit.ly/3ZRnq

    Reply
  3. Shane Pinder says:

    RT @tublogger: Setup Pagination in Thesis Theme http://bit.ly/sbSJv #thesiswp #wordpress @diythemes

    Reply
  4. Tweets that mention Thesis Theme : Setup Pagination on Home Page | Thoughts Unlimited -- Topsy.com says:

    [...] This post was mentioned on Twitter by Shane Pinder and Ashwin. Ashwin said: Setup Pagination in Thesis Theme http://bit.ly/sbSJv #thesiswp #wordpress @diythemes [...]

    Reply
  5. WordPress wptop50.de says:

    By @-shanepinder RT @tublogger: Setup Pagination in Thesis Theme http://bit.ly/sbSJv #thesiswp #-WordPress @diythemes

    Reply
  6. Ashwin says:

    Thesis Theme : Setup Pagination on Home Page http://bit.ly/sbSJv #thesiswp #wordpress

    Reply
  7. Thesis Theme - Setup Pagination on Home Page — Thesis Press Visual Guides says:

    [...] Watch the Video… [...]

    Reply
  8. Ashwin says:

    Thesis Theme : Setup Pagination on Home Page http://bit.ly/ApAWN #thesiswp #wordpress

    Reply
  9. Roseli A. Bakar says:

    Thesis Theme : Setup Pagination on Home Page – http://bit.ly/ApAWN by @@thotsunlimited

    Reply
  10. ThesisTheme.net says:

    RT @thotsunlimited: Thesis Theme : Setup Pagination on Home Page http://bit.ly/ApAWN #thesiswp #wordpress

    Reply
  11. BlogInterface.net says:

    RT @thesisthemenet: RT @thotsunlimited: Thesis Theme : Setup Pagination on Home Page http://bit.ly/ApAWN #thesiswp #wordpress

    Reply
  12. Phân trang trong TheSiS says:

    [...] thuât này Hư Trúc dựa theo hướng dẫn của Ashwin và đã thêm vào code phân trang (không dùng plugin [...]

    Reply
  13. Gerald Scott says:

    Thesis Theme : Setup Pagination on Home Page http://bit.ly/bL1WTe

    Reply

Speak Your Mind

*