Parameter for pagination posts_pagination

Question

I created a pagination with the_posts_pagination() function

Right now it looks like this and it works fine:

Previous 1 2 3 4 Next

When I am on the 1st page, the "prev" button disappears or "next" if I am on the last page.

How to ensure that the "prev" or "next" button does not disappear, but that they are not clickable?

Answer 1

To achieve the behavior you're describing—keeping the "prev" or "next" buttons visible but not clickable when you're on the first or last page—you can use a combination of CSS and conditionally modifying the pagination links.

Here's an example of how you can achieve this in WordPress:

1. First, add the following CSS to your theme's stylesheet or in-line styles:

.pagination-disabled {
    pointer-events: none;
    opacity: 0.5; /* You can adjust the opacity to visually indicate that the button is not clickable */
}

This CSS class (pagination-disabled) will be used to make the links appear disabled when you don't want them to be clickable.

2. Next, you can modify the pagination links in your theme's functions.php file. Here's an example:

function custom_pagination() {
    $pagination = the_posts_pagination(array(
        'prev_text' => __('Previous', 'textdomain'),
        'next_text' => __('Next', 'textdomain'),
        'screen_reader_text' => __(' ', 'textdomain'),
    ));

    // Add custom class to the prev/next links on the first and last page
    if (strpos($pagination, 'prev page-numbers') !== false) {
        $pagination = str_replace('prev page-numbers', 'prev page-numbers pagination-disabled', $pagination);
    }

    if (strpos($pagination, 'next page-numbers') !== false) {
        $pagination = str_replace('next page-numbers', 'next page-numbers pagination-disabled', $pagination);
    }

    echo $pagination;
}

// Replace the default pagination function with your custom function
remove_action('the_post_navigation', 'the_posts_pagination');
add_action('the_post_navigation', 'custom_pagination');

This code defines a custom_pagination function that modifies the output of the_posts_pagination. It adds the pagination-disabled class to the "prev" and "next" links when you're on the first or last page, making them visually appear disabled.

Note: Be sure to replace 'textdomain' with the actual text domain used in your theme.

By using this approach, the "prev" and "next" buttons will always be visible, but when they are not clickable, they will have a visual indication that they are disabled. Adjust the styling and classes as needed for your specific theme design.