Adding Classes To previous_posts_link() And next_posts_link() In WordPress

By default, WordPress’s previous_posts_link() and next_posts_link() functions generate simple anchor tags without any CSS classes. This limits your ability to style these pagination links easily. The quick fix is to add custom classes to these links, enabling better control over their appearance and behavior.

Quick Fix

Use the updated versions of previous_posts_link() and next_posts_link() that accept an additional argument for classes.
Add a filter in your functions.php or a small plugin to inject classes into the generated markup.
Test the changes on your archive or blog pages to confirm the classes are applied.

Why This Happens

WordPress’s core functions previous_posts_link() and next_posts_link() were originally designed to output simple pagination links without class attributes. While modern WordPress versions allow some customization, these functions do not natively accept a class parameter. As a result, developers must use filters or custom wrappers to add classes for styling purposes.

When To Use

You want to style the “Previous” and “Next” pagination links differently from other links.
You are building a custom theme or child theme and need consistent markup.
You want to add JavaScript hooks or accessibility improvements via classes.

Updated Code For Modern WordPress

Since WordPress 5.9, the paginate_links() function and the_posts_pagination() support class arguments more directly, but previous_posts_link() and next_posts_link() do not. To add classes, you can use the get_previous_posts_link and get_next_posts_link filters to modify the output.

How To Add Classes via `functions.php` or a Small Plugin

Add the following code to your theme’s functions.php file or a custom plugin to add classes my-prev-class and my-next-class to the respective links:

/ Add custom class to previous_posts_link
function add_class_to_previous_posts_link( $link ) {
    if ( strpos( $link, 'class=' ) === false ) {
        $link = str_replace( '<a ', '<a class="my-prev-class" ', $link );
    } else {
        $link = str_replace( 'class="', 'class="my-prev-class ', $link );
    }
    return $link;
}
add_filter( 'previous_posts_link', 'add_class_to_previous_posts_link' );

/ Add custom class to next_posts_link
function add_class_to_next_posts_link( $link ) {
    if ( strpos( $link, 'class=' ) === false ) {
        $link = str_replace( '<a ', '<a class="my-next-class" ', $link );
    } else {
        $link = str_replace( 'class="', 'class="my-next-class ', $link );
    }
    return $link;
}
add_filter( 'next_posts_link', 'add_class_to_next_posts_link' );

Step-by-step Test

Open your theme’s functions.php file or create a new plugin file.
Copy and paste the code above into the file.
Save and upload the file to your WordPress installation.
Navigate to a paginated archive page (e.g., blog posts page).
Inspect the “Previous” and “Next” pagination links in your browser’s developer tools.
Confirm the links have the classes my-prev-class and my-next-class respectively.
Apply CSS styles targeting these classes to customize the appearance.

Block Themes & Gutenberg Notes

With the rise of block themes and Gutenberg, pagination is often handled by blocks like the “Query Pagination” block. These blocks provide UI options to add classes directly in the editor. However, if you are using classic PHP templates or custom blocks that rely on previous_posts_link() and next_posts_link(), the above method remains valid.

For block themes, consider using the block editor’s built-in className controls or creating block variations with custom classes. For PHP-based themes, the filter method is the most straightforward approach.

Common Pitfalls

Classes not appearing: Ensure you are editing the correct functions.php file and that no other plugin or theme overrides the pagination output.
Multiple classes conflict: If the link already has classes, the code appends your class rather than replacing it to avoid conflicts.
Cache issues: Clear any caching plugins or server cache after making changes.
Incorrect HTML escaping: Use the filters exactly as shown to avoid breaking HTML output.

FAQ

Question	Answer
Can I add multiple classes to the links?	Yes. Modify the class string in the `str_replace` calls to include multiple classes separated by spaces, e.g., `class="my-prev-class another-class"`.
Will this work with custom pagination plugins?	Only if those plugins use `previous_posts_link()` and `next_posts_link()`. Otherwise, you need to check the plugin’s documentation for adding classes.
Can I add classes directly in the template files?	No. The core functions do not accept a class parameter. You must use filters or custom markup to add classes.
Does this method affect SEO or accessibility?	No. Adding classes does not affect SEO or accessibility negatively. You can even improve accessibility by adding ARIA attributes alongside classes.
Is this compatible with all WordPress versions?	This method works on WordPress 4.7 and later, as the filters `previous_posts_link` and `next_posts_link` have been available since then.

Works on

Apache, Nginx