How To Use WP-PageNavi And WP-CommentNavi Plugins

I’ve been looking ways to paginate my main page posts list, singles, pages and comments, I couldn’t find any answers until I studied about the plugins from  Lester Chan-GamerZ , among those, WP-PageNavi and WP-CommentNavi, I finally found the way to use them for paginate my pages, posts and comments. This is the way I use them with Mono-lab themes: Flat and PianoBlack.

If we’re using WordPress 3.4.2, most of these pagination php are already embedded in the system and called out somewhere in our themes, all we need is to find where to place these plugins codes. For blog main page posts pagination, we need to have excerpts turned on and working. The theme files that need to implement with WP-PageNavi codes are: index.php, archive.php and search.php.

For Single Post pagination, by using “next-page” while editing, the theme files that need to implement with WP-PageNavi are: single.php and page.php.

MAIN PAGE POSTS LIST PAGINATION WITH EXCERPTS

main

Well, we need to install the plugin WP-PageNavi first, activate it and modify some settings if we want, I only modify “<<” and “>>” with “<< Previous” and “Next >>”

     main

Save “settings” and open “index.php”, “archive.php” and “search.php” to search and replace codes with pagenavi codes. We need to search for “pager” and we should find these lines in these files. The if options ‘pager’ is for paginate when we have many posts with excerpts on the same page (which number of posts is set in settings-reading).

pager      pager

In PianoBlack theme, the main page pagination was used with “navigation.php”, we need to remove the include statement, your theme may not have this “navigation.php”.

Now we should have main page with post listed with WP-PageNavi plugin. I modified the pagenavi-css.css in the plugins/wp-pagenavi/ with some borders and background.

.wp-pagenavi {
clear: both;
margin-bottom:40px;
margin-top:30px;
}

.wp-pagenavi a, .wp-pagenavi span {
text-decoration: none;
border: 1px solid #333;
padding: 10px 15px;
-moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;
background:#101010;
}

.wp-pagenavi a:hover, .wp-pagenavi span.current {
border-color: #000;
}

.wp-pagenavi span.current {
font-weight: bold;
}

WP-PAGENAVI WITH LONG SINGLE POST – PAGE PAGINATION

If we have long posts with many “next-page” inserts, we want to display with WP-PAGENAVI, all we need to do is to replace all ‘<?php wp_link_pages(); ?>’ with ‘<?php wp_pagenavi( array( ‘type’ => ‘multipart’ ) ); ?>’ in “single.php” and “page.php” of your themes.

<?php wp_pagenavi( array( ‘type’ => ‘multipart’ ) ); ?>

links    

Now, we should have both Main page posts list and long single post-page paginated with WP-PageNavi plugin.

single     main posts list with pagenavi

WP-COMMENTNAVI FOR COMMENT.PHP

Again, install WP-CommentNavi plugin, activate, and go to settings – commentnavi – to modify anything you like.

settings     commentnavi

Now, open “comments.php” of your theme and search for ‘pager’ again, for this to work, we have to turn on the option in “discussion”

discussion     comments

Dependent upon how your comments.php in your theme is written, you should be able to find ‘pager’ and ‘paginate_comment_link()’, delete this line and place the commentnavi codes below the comment_pager

links     commentnavi

In PianoBlack theme, I had to delete the ‘}}’ after delete “paginate_comment_link” and added the commentnavi codes.

<?php if(function_exists(‘wp_commentnavi’)) { wp_commentnavi(); } ?>

Now we should have comments paginated with WP-CommentNavi plugin

commentnavi

I did modify the commentnavi-css.css in the plugins/wp-commentnavi/

.wp-commentnavi a, .wp-commentnavi a:link {
padding: 10px 15px;
margin: 2px;
text-decoration: none;
border: 1px solid #ff9966;
color: #120000;
background-color: #ffddbb;    -moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;
}
.wp-commentnavi a:visited {
padding: 10px 15px;
margin: 2px;
text-decoration: none;
border: 1px solid #ffddbb;
color: #120000;
background-color: #ff9966;
}
.wp-commentnavi a:hover {
border: 1px solid #800517;
color: #800517;
background-color: #ffddbb;
}
.wp-commentnavi a:active {
padding:10px 15px;
margin: 2px;
text-decoration: none;
border: 1px solid #ff9966;
color: #800517;
background-color: #ffddbb;
}
.wp-commentnavi span.pages {
padding: 10px 15px;
margin: 2px;
color: #800517;
border: 1px solid #ff9966;
background-color: #ffddbb;-moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;
}
.wp-commentnavi span.current {
padding: 10px 15px;
margin: 2px;
font-weight: bold;
/*    border: 1px solid #000000;*/
color: #800517;
background-color: #ffddbb;-moz-border-radius:3px; -khtml-border-radius:3px; -webkit-border-radius:3px; border-radius:3px;
}
.wp-commentnavi span.extend {
padding: 10px 15px;
margin: 2px;
border: 1px solid #ff9966;
color: #120000;
background-color: #ffddbb;
}
.wp-commentnavi-all-comments-link {
}

I’ve been searching for many days to get these things to work and none of them really show much of anything. Hope these will work on your theme as they work on mine. I have tested these plugins with list category posts with pagination and they don’t work together, the pageviews came out wrong. My next one is to get category post list to paginate. If you see any problems, please let me know so we can figure it out together.

Cheers,

Leave a Reply

Your email address will not be published. Required fields are marked *