How to add css style to WordPress’s Next Post Link and Previous Post Link

There is no direct way to apply css class to the WordPress’s Next Post and Previous Post links generated by previous_post_link() and next_post_link() functions. But there is a work around that can be used to apply css class to these links for the purpose of styling.

We will use functions.php for this purpose. We will add filters to filter the links and add our css class, as described below.

//functions.php
 add_filter('next_posts_link_attributes','add_link_css_class');
 add_filter('previous_posts_link_attributes','add_link_css_class');
 function add_link_css_class() {
 return 'class="my-class"';
 }

Now we can add any css style to this class in the style.css file, as follows:

/*style.css*/
 .my-class {
 border: 1px solid #CFCFCF;
 color: #404040;
 font-family: Arial,Verdana,Helvetica,sans-serif;
 font-size: 10px;
}

That’s it we have applied CSS to WordPress’s Next Post and Previous Post links generated by previous_post_link() and next_post_link() functions