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_pages
wp_commentnavi_class_first
wp_commentnavi_class_previouscommentslink
wp_commentnavi_class_extend
wp_commentnavi_class_smaller
wp_commentnavi_class_page
wp_commentnavi_class_current
wp_commentnavi_class_larger
wp_commentnavi_class_nextcommentslink
wp_commentnavi_class_last

Other Filters

wp_commentnavi — the complete markup, before it is printed
wp_commentnavi_allowed_html — the tags allowed inside the navigation text settings
wp_commentnavi_capability — the capability required to reach the settings screen, manage_options by default

add_filter( 'wp_commentnavi_capability', function ( $capability, $context ) {
    return 'edit_pages';
}, 10, 2 );

WP-CommentNavi