WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

How can I add a CSS Class to the previous_post_link output or just get the URL and create the HTML markup myself

share|improve this question
up vote 5 down vote accepted

You can use the more native function that is "below" the previous_/next_post_link();:

# get_adjacent_post( $in_same_cat = false, $excluded_categories = '', $previous = true )
$next_post_obj  = get_adjacent_post( '', '', false );
$next_post_ID   = isset( $next_post_obj->ID ) ? $next_post_obj->ID : '';
$next_post_link     = get_permalink( $next_post_ID );
$next_post_title    = '»'; // equals "»"
<a href="<?php echo $next_post_link; ?>" rel="next" class="pagination pagination-link pagination-next">
    <?php echo $next_post_title; ?>
share|improve this answer
The link to your github source is broken. Could you update it please? – pixeline Jun 27 '13 at 20:00
@pixeline The plugin isn't available anymore. It was simply too much work to keep it up to date for something I offer for free aside from a dozen plugins. – kaiser Jun 27 '13 at 22:40

There are filters for previous_post_link and next_post_link functions which works in a different way from previous_posts_link_attributes and next_posts_link_attributes, I am not sure why this is not documented on the wordpress website.

function posts_link_next_class($format){
     $format = str_replace('href=', 'class="next clean-gray" href=', $format);
     return $format;
add_filter('next_post_link', 'posts_link_next_class');

function posts_link_prev_class($format) {
     $format = str_replace('href=', 'class="prev clean-gray" href=', $format);
     return $format;
add_filter('previous_post_link', 'posts_link_prev_class');
share|improve this answer
This is the best option as it replaces the $format variable before it goes into the echo adjacent_post_link() statement. – eteich Jun 28 '13 at 16:15

You could put an element around the function call and style it that way. Like this:

<div class="previous_post_link"><?php previous_post_link('%link'); ?></div>

then control the link in the css.

.previous_post_link a { some styles here } 
share|improve this answer

Try to following way--

<?php $prv_post = get_previous_post();
$next_post = get_next_post(); 
<?php if(!empty($prv_post)) { ?>
<a href="<?php echo get_permalink($prv_post->ID ); ?>" class="prev" rel="prev">
<span class="meta-nav"><?php _e('Previous Post', 'awe') ?></span>
<span class="nav-icon"><i class="fa fa-angle-double-left"></i></span>
<?php echo get_the_title($prv_post->ID ); ?> ...
<?php } ?>

<?php if(!empty($next_post)) { ?>
<a href="<?php echo get_permalink($next_post->ID ); ?>" class="next" rel="next">
<span class="meta-nav"><?php _e('Next Post', 'awe') ?></span>
<span class="nav-icon"><i class="fa fa-angle-double-right"></i></span>
<?php echo get_the_title($next_post->ID ); ?> ...
<?php } ?>
share|improve this answer
Why are you using echo get_*, while there are related functions which echo its output by default, like the_title() – Pieter Goosen Jun 20 '15 at 9:28
echo return value. yes you are right if you are in single.php not need echo get_* but if you make a function then echo get_* needed.. Hope you understand. – Jahirul Islam Mamun Jun 20 '15 at 9:31

All very good thought the simplest way I found was to add a div in the functions.php file that wraps the links. I named mine class="plinks"

if ( ! function_exists( 'themename_post_nav' ) ) :
function themename_post_nav() {
global $post;
$previous = ( is_attachment() ) ? get_post( $post->post_parent ) : get_adjacent_post( false, '', true );
$next     = get_adjacent_post( false, '', false );
if ( ! $next && ! $previous )
<div class="plinks">
<?php next_post_link( '%link', _x( 'Previous', 'Pevious link', 'themename' ) ); ?>
<?php previous_post_link( '%link', _x( 'Next', 'Next link', 'themename' ) ); ?>

then in your css file just write a new class for

.plinks a{
margin:1em 4px;
padding:8px 1em;
.plinks a:hover{

Call it into any of your theme template pages using

<?php themename_post_nav(); ?>
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.