Create Custom Pagination for HomePage – Thesis WordPress Theme

by Dan

thesis-tricks-wordpress

If you are a user of Thesis WordPress Theme,then you might aware the advantage of using Thesis theme,It gives Extra flexibility to design your website as you like,By default the Thesis themes comes with many good features but the one I doesn’t like or want to change is the pagination for Homepage,especially for the websites with lot of contents.

So here is a Thesis WordPress theme tweak in which we are going to change the pagination of the home page.

By Default the thesis theme pagination have links to previous Entries and Next Entries,

default-thesis-paginationNow we are going to change this to something like below,Isn’t that cool,Lets get started

new-thesis-pagination

1. You need to download and install WordPress plugin called WP-PageNavi,You can search in plugin directory or download from here.After installing the plugin go to Settings << Pagenavi

Make sure that the option Use pagenavi-css.css is checked and leave other settings as default and save your changes.

wp-page-navi

2. Now go to Dashboard << Thesis << Custom file Editor  and Edit custom_functions.php file

add the following code at the end of the file

/* Pagination */
 function my_thesis_pagination() {
 echo '<div>';
 wp_pagenavi();
 echo '</div>';
 }
 remove_action('thesis_hook_after_content','thesis_post_navigation');
 add_action('thesis_hook_after_content', 'my_thesis_pagination');

Now you have successfully changed the Homepage navigation but you need to style the pagination to suit your blog,So how to do that ???

3. You need to edit the file wp-content/plugins/wp-pagenavi/pagenavi-css.css

alternatively to edit from your Dashboard got to Dashboard << Plugins << Editor.  Now you need to select the plugin Wp-Pagenavi from the selection box which is located at the right top of the current page.Select the pagenavi-css.css to edit from right sidebar

pagenavi-css-editor

Now replace the current code with the following CSS code.

/*
Default style for WP-PageNavi plugin

http://wordpress.org/extend/plugins/wp-pagenavi/
*/

.wp-pagenavi {
    clear: both;
}

.wp-pagenavi a, .wp-pagenavi span {
    padding: 5px; margin-right: 10px;
    font-size: 15px; color: #03719c; text-decoration: none;
    border: 3px solid #ccc; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px;
    }
.wp-pagenavi a:hover, .wp-pagenavi span.current {
    background: #03719c;
    color: #fff;
    border: 3px solid #AFAFAF;
    }
.wp-pagenavi span.current { font-weight: bold; }

Thats it,You are done now.If you are using caching plugins like WP SuperCache or w3 Total Cache then delete your cache and reload  the home page.

If you are not satisfied with the pagination design you change it in above css code to suit your blog.

Related Posts