Comment Navigation Appears Twice After Moving Comment Form

Hi there,

This is GP’s standard comments markup, not your PHP. comments.php outputs .comment-navigation both before (#comment-nav-above) and after (#comment-nav-below) .comment-list. Normally the list sits between them so you don’t notice, but this rule in your CSS:

.comments-title, .comment-list, .comment-navigation {
    order: 1 !important;
}

…gives all four elements (title, list, and both navs) the same order, so they collapse together.

Replace that single rule with:

.comments-title {
    order: 1 !important;
}
#comment-nav-above {
    order: 2 !important;
}
.comment-list {
    order: 3 !important;
}
#comment-nav-below {
    order: 4 !important;
}

Everything else in your CSS can stay as-is. Let me know how it looks.

Glad to hear it.

Since GP’s comments.php outputs the prev/next navigation inline (rather than via a hooked function), the cleanest way to swap it for numbered pagination is to copy comments.php into your child theme and edit the two nav blocks.

Copy wp-content/themes/generatepress/comments.php to wp-content/themes/your-child-theme/comments.php, then in both <nav> blocks (#comment-nav-above and #comment-nav-below):

1. Add comment-pagination to the class list:

<nav id="comment-nav-above" class="comment-navigation comment-pagination" role="navigation">

2. Replace the two .nav-previous / .nav-next divs with paginate_comments_links():

<?php
echo paginate_comments_links( array(
    'echo'      => false,
    'prev_text' => __( '&larr; Previous', 'generatepress' ),
    'next_text' => __( 'Next &rarr;', 'generatepress' ),
    'type'      => 'list',
) );
?>

That outputs a <ul class="page-numbers"> with <li> items for each page, plus next/previous links. Then add this to Customizer → Additional CSS to style it:

.comment-pagination .page-numbers {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    list-style: none;
    margin: 20px 0;
    padding: 0;
}
.comment-pagination .page-numbers li {
    margin: 0;
}
.comment-pagination .page-numbers a,
.comment-pagination .page-numbers span {
    display: inline-block;
    padding: 8px 14px;
    border: 1px solid #444;
    border-radius: 4px;
    text-decoration: none;
    line-height: 1;
    color: inherit;
    transition: background 0.15s ease, color 0.15s ease;
}
.comment-pagination .page-numbers a:hover {
    background: #444;
    color: #fff;
}
.comment-pagination .page-numbers .current {
    background: #7e22ce;
    color: #fff;
    border-color: #7e22ce;
}
.comment-pagination .page-numbers .dots {
    border: none;
    padding: 8px 4px;
}

To summarize, the child theme version of the comments.php file would look like this:

<?php
/**
 * The template for displaying Comments.
 *
 * @package GeneratePress (modified for numbered comment pagination)
 */
if ( ! defined( 'ABSPATH' ) ) {
    exit;
}

if ( post_password_required() ) {
    return;
}

/**
 * generate_before_comments hook.
 */
do_action( 'generate_before_comments' );
?>
<div id="comments">
    <?php
    do_action( 'generate_inside_comments' );

    if ( have_comments() ) :
        $comments_number = get_comments_number();
        $comments_title = apply_filters(
            'generate_comment_form_title',
            sprintf(
                esc_html(
                    /* translators: 1: number of comments, 2: post title */
                    _nx(
                        '%1$s thought on &ldquo;%2$s&rdquo;',
                        '%1$s thoughts on &ldquo;%2$s&rdquo;',
                        $comments_number,
                        'comments title',
                        'generatepress'
                    )
                ),
                number_format_i18n( $comments_number ),
                get_the_title()
            )
        );

        // phpcs:ignore -- Title escaped in output.
        echo apply_filters(
            'generate_comments_title_output',
            sprintf(
                '<h2 class="comments-title">%s</h2>',
                esc_html( $comments_title )
            ),
            $comments_title,
            $comments_number
        );

        do_action( 'generate_below_comments_title' );

        if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) :
            ?>
            <nav id="comment-nav-above" class="comment-navigation comment-pagination" role="navigation">
                <h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'generatepress' ); ?></h2>
                <?php
                echo paginate_comments_links( array(
                    'echo'      => false,
                    'prev_text' => __( '&larr; Previous', 'generatepress' ),
                    'next_text' => __( 'Next &rarr;', 'generatepress' ),
                    'type'      => 'list',
                ) );
                ?>
            </nav><!-- #comment-nav-above -->
        <?php endif; ?>

        <ol class="comment-list">
            <?php
            wp_list_comments(
                array(
                    'callback' => 'generate_comment',
                )
            );
            ?>
        </ol><!-- .comment-list -->

        <?php
        if ( get_comment_pages_count() > 1 && get_option( 'page_comments' ) ) :
            ?>
            <nav id="comment-nav-below" class="comment-navigation comment-pagination" role="navigation">
                <h2 class="screen-reader-text"><?php esc_html_e( 'Comment navigation', 'generatepress' ); ?></h2>
                <?php
                echo paginate_comments_links( array(
                    'echo'      => false,
                    'prev_text' => __( '&larr; Previous', 'generatepress' ),
                    'next_text' => __( 'Next &rarr;', 'generatepress' ),
                    'type'      => 'list',
                ) );
                ?>
            </nav><!-- #comment-nav-below -->
            <?php
        endif;
    endif;

    // phpcs:ignore WordPress.PHP.StrictComparisons.LooseComparison
    if ( ! comments_open() && '0' != get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) :
        ?>
        <p class="no-comments"><?php esc_html_e( 'Comments are closed.', 'generatepress' ); ?></p>
        <?php
    endif;

    comment_form();
    ?>
</div><!-- #comments -->