WP-CommentNavi
Replaces the plain ← Older Comments | Newer Comments → links with numbered page links.
Example: Page 1 of 20: [1] 2 3 4 ... Last
It is the comment-thread counterpart of WP-PageNavi, and the two are deliberately built the same way, down to the names of the filters that change the class names.
The plugin icon is by Freepik from Flaticon.
Features
- Numbered page links instead of two prev/next links
- A drop-down list style, for threads with a great many pages
- Every piece of the navigation’s text is configurable, including inline SVG arrows
- Larger page numbers — 10, 20, 30 — for jumping across a long thread
- Ten filters for the element class names, one for the finished markup
- One stylesheet that serves both left-to-right and right-to-left locales, restyled with two CSS custom properties
Donations
I spent most of my free time creating, updating, maintaining and supporting these plugins, if you really love my plugins and could spare me a couple of bucks, I will really appreciate it. If not feel free to use it without any obligations.
Usage
The template tag reads figures that WordPress only populates inside comments_template(), so it belongs in comments.php and produces nothing anywhere else.
It also accepts an array of arguments:
<?php
wp_commentnavi(
array(
'wrapper_tag' => 'nav',
'wrapper_class' => 'my-comment-nav',
'options' => array( 'num_pages' => 3 ),
)
);
?>
Pass 'echo' => false to get the markup back as a string instead of printing it.
Changing the CSS
The navigation inherits its font and its colours from your theme, and the two colours it does set are CSS custom properties, so the usual way to restyle it is to set those in your theme’s style.css:
:root {
--wp-commentnavi-border-color: #d0d0d0;
--wp-commentnavi-border-color-current: #c0392b;
}
If you need to change more than that, copy css/wp-commentnavi.css out of the plugin directory into your theme’s directory as wp-commentnavi.css and edit it there. Your changes then survive plugin updates, and a copy in a child theme wins over one in the parent theme.
Alternatively, set Use wp-commentnavi.css to No on the settings screen and write the styles yourself.
Changing Class Names
These filters change the class names assigned to the navigation elements:
wp_commentnavi_class_pageswp_commentnavi_class_firstwp_commentnavi_class_previouscommentslinkwp_commentnavi_class_extendwp_commentnavi_class_smallerwp_commentnavi_class_pagewp_commentnavi_class_currentwp_commentnavi_class_largerwp_commentnavi_class_nextcommentslinkwp_commentnavi_class_last
Other Filters
wp_commentnavi— the complete markup, before it is printedwp_commentnavi_allowed_html— the tags allowed inside the navigation text settingswp_commentnavi_capability— the capability required to reach the settings screen,manage_optionsby default
add_filter( 'wp_commentnavi_capability', function ( $capability, $context ) {
return 'edit_pages';
}, 10, 2 );