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 –
/* 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 –
/* 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:
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!
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
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!
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 =)
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…
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 ?
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');
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
I will mark it for my weekend…. You can expect a reply then
Thanks
Ashwin
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…
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?
Did my response help you?
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.
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
nice tuts ashwin.btw, is there any cool pagination design by thesis user ? =D
I like the pagination design at http://www.blogussion.com using Thesis.
I like the pagination design at http://www.blogussion.com using Thesis.
how to make it center?
Not sure – but you can try .custom .full_width #content_box .wp-pagenavi { text-align:center; }
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
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');
Hi Ashwin,
It was a problem to copy the code from our website.
Now it is working.
Thanks!
Cheers,
Thomas
@Ashwin your code in the comment worked, whereas the code in the post did not. Thx
Glad it worked
Hi Ashwin,
How can I change the font size of the pagination? Please advise.
Thank you.
Cheers
Stephen
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!
How do I limit the number of 'page' boxes?
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!
This one is working good! That one in the post is not working ;(
Actually this plugin is good but for the new user it is not easy to plug..otherwise good theme..thanks for sharing..
Yes I agree Nick! But once setup, this is really good
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.
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.
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!!!
Great! Happy to know that you got the problem solved. Good times with Thesis
Hey Ashwin,
Any idea how to setup this pagination for the archives page?
Cheers
Thanks dude. I want try install it on my site.
Trackbacks
Setup Pagination in Thesis Theme http://bit.ly/sbSJv #thesiswp #wordpress @diythemes
Thesis Theme : Setup Pagination on Home Page http://bit.ly/3ZRnq
RT @tublogger: Setup Pagination in Thesis Theme http://bit.ly/sbSJv #thesiswp #wordpress @diythemes
[...] 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 [...]
By @-shanepinder RT @tublogger: Setup Pagination in Thesis Theme http://bit.ly/sbSJv #thesiswp #-WordPress @diythemes
Thesis Theme : Setup Pagination on Home Page http://bit.ly/sbSJv #thesiswp #wordpress
[...] Watch the Video… [...]
Thesis Theme : Setup Pagination on Home Page http://bit.ly/ApAWN #thesiswp #wordpress
Thesis Theme : Setup Pagination on Home Page – http://bit.ly/ApAWN by @@thotsunlimited
RT @thotsunlimited: Thesis Theme : Setup Pagination on Home Page http://bit.ly/ApAWN #thesiswp #wordpress
RT @thesisthemenet: RT @thotsunlimited: Thesis Theme : Setup Pagination on Home Page http://bit.ly/ApAWN #thesiswp #wordpress
[...] 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 [...]
Thesis Theme : Setup Pagination on Home Page http://bit.ly/bL1WTe