Thesis Theme : Setup Pagination on Home Page

by Ashwin on September 20, 2009

in Thesis Theme, Thesis Tips, Wordpress

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!

Related posts:

  1. Create a Full-Height Sidebar and Full-Width Navigation Menu in Thesis Theme
  2. Search Box in Navigation Bar of the Thesis Theme
  3. Setup a Header Banner Image for your blog using Thesis Theme
  4. Looks Good Naked Skin – for Thesis 1.6
  5. Control Home Page Post Excerpt Content in Thesis Theme

Tagged as: thesis theme, thesis tips, Wordpress

Stay In The Loop!

 Subscribe to our RSS Feed
 Join on Twitter
 Get Posts via Email

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

    http://www.dirty.ru/
  • 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
  • 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...
  • I will mark it for my weekend.... You can expect a reply then

    Thanks
    Ashwin
  • 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
  • Did my response help you?
  • 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!
  • Great to hear that... Let me know if you need any help =)
  • 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!
  • Pooja Arora
    hey ashwin, how can i get the pagenavigation similar to 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 ?
  • 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');
  • 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 ?
  • I may not be able to offer immediate help but I have it in my list of "to do" activities

    Thanks
    Ashwin
  • Pooja Arora
    thanks a lot, Ashwin...............will wait for u r reply
  • 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...
  • Did my response help you?
  • Everett
    Great plugin! Thanks! Here it is implemented on my site with some custom css:

    http://www.prodrumreviews.com

    Thanks again!
  • 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
  • naz
    nice tuts ashwin.btw, is there any cool pagination design by thesis user ? =D
  • I like the pagination design at www.blogussion.com using Thesis.
blog comments powered by Disqus

Previous post:

Next post: