Your Handbook on Professional Blogging and Wordpress

Thesis Theme : Setup Pagination on Home Page

by Ashwin

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.

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!

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 79 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
http://twitter.com/scottcom/status/24191167363 Gerald Scott

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