Get Definitive Thesis Theme Video Tutorials for FREE! Click here for details

Thesis Theme : Setup Pagination on Home Page

by Ashwin

in Thesis Theme,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!

  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  
  •  

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 174 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.

  • Greg Keene
    How do I limit the number of 'page' boxes?
  • 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!
  • Stephen
    Hi Ashwin,

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

    Cheers
    Stephen
  • 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!
  • buzzhunt
    @Ashwin your code in the comment worked, whereas the code in the post did not. Thx
  • Ashwin
    Glad it worked :)
  • Thomas
    Hi Ashwin,

    I tried your code on my site 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
  • Ashwin
    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');
  • Thomas
    Hi Ashwin,

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

    Now it is working.

    Thanks!

    Cheers,

    Thomas
blog comments powered by Disqus

Previous post:

Next post: