Thesis Theme : Setup Pagination on Home Page

by Ashwin on September 20, 2009

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!

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

Similar and Related Posts

Tagged as: thesis theme, thesis tips, Wordpress

Article by Ashwin Chandrasekaran

Founder of Thoughts Unlimited. Loves Technology, Mobile Web, Blogging and Internet Marketing. Runs another Blog on Web Business and Internet Marketing at Power Web Business

Ashwin has written 77 awesome articles.

If you like this post, you can follow Thoughts Unlimited on Twitter.

Subscribe to Thoughts Unlimited feed via RSS to receive instant updates.

  • http://twitter.com/tublogger/status/4124560303 Ashwin

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

  • http://twitter.com/tublogger/status/4124690949 Ashwin

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

  • http://twitter.com/shanepinder/status/4125246609 Shane Pinder

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

  • http://topsy.com/tb/bit.ly/3ZRnq Tweets that mention Thesis Theme : Setup Pagination on Home Page | Thoughts Unlimited — Topsy.com

    [...] 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 [...]

  • http://twitter.com/wordpress_top50/status/4125339747 WordPress wptop50.de

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

  • http://twitter.com/tublogger/status/4164159707 Ashwin

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

  • http://thesispress.com/how-to-setup-pagination-on-home-page Thesis Theme – Setup Pagination on Home Page — Thesis Press Visual Guides

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

  • Nash

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

    http://www.dirty.ru/

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    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

  • http://www.nycpeopleproject.com/ NYC People Project

    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!

  • nycpeopleproject

    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!

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

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

  • http://twitter.com/avinashdsouza Avinash d'Souza

    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…

  • http://www.tweetmedaily.com/ Pooja Arora

    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 ?

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    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');
  • http://www.tweetmedaily.com/ Pooja Arora

    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 ?

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

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

    Thanks
    Ashwin

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

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

    Thanks
    Ashwin

  • http://www.tweetmedaily.com/ Pooja Arora

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

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    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…

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    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

  • http://twitter.com/thotsunlimited/status/4996457322 Ashwin

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

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    Did my response help you?

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    Did my response help you?

  • http://twitter.com/ezyblogger/status/5013367480 Roseli A. Bakar

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

  • http://twitter.com/thesisthemenet/status/5002900742 ThesisTheme.net

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

  • http://twitter.com/bloginterface/status/5003434651 BlogInterface.net

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

  • http://www.prodrumreviews.com/ Everett

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

    http://www.prodrumreviews.com

    Thanks again!

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

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

  • jhony

    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

  • http://www.aenaz.com/ naz

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

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

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

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

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

  • http://hutruc.com/thesis/phan-trang-trong-thesis.html Phân trang trong TheSiS

    [...] 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 [...]

  • http://blog.mohdisa.com/ mohdisa

    how to make it center?

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

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

  • http://www.commissioningcoach.com/ Thomas

    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

  • https://thoughtsunlimited.net/blog Ashwin / Thoughts Unlimited

    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');
  • http://www.kanadaspezialist.com Thomas

    Hi Ashwin,

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

    Now it is working.

    Thanks!

    Cheers,

    Thomas

  • http://www.buzzhunt.co.uk buzzhunt

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

  • http://www.powerwebbusiness.com/ Ashwin

    Glad it worked :)

  • Stephen

    Hi Ashwin,

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

    Cheers
    Stephen

  • http://www.powerwebbusiness.com/ Ashwin

    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!

  • http://myblog.livingfinanciallyfreeministries.com Greg Keene

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

  • http://www.powerwebbusiness.com/ Ashwin

    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!

  • Almeidamarcell

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

  • http://www.directorysubmissionservices.net Nick

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

  • http://www.powerwebbusiness.com/ Ashwin

    Yes I agree Nick! But once setup, this is really good :)

blog comments powered by Disqus

Previous post: Why should you try Readtwit?

Next post: