How to add CSS Class to previous_post_link or get previous/next post link URL

Question

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

Answer 1

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; ?>
</a>

Answer 2

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');

Answer 3

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 } 

Answer 4

Just a little addition the problem with the hook below is that they are in plural forms and your question implies "you want to style them in singular form".

posts_link_attributes() {
    return 'class="styled-button"';
}

add_filter('next_posts_link_attributes', 'posts_link_attributes');
add_filter('previous_posts_link_attributes', 'posts_link_attributes');

Although they work perfectly but, these are the links that are displayed at the bottom of the post listings, not the ones at the bottom of individual posts. Logic says we should be able to duplicate this code with the singular forms (“next_post_link” and “previous_post_link”) and it will work. Unfortunately that’s not the case.

Well since the filters for the singular next and previous links are applied differently see this

The code below should work for singular links. Put them in your function.php file

function post_link_attributes($output) {
    $code = 'class="styled-button"';
    return str_replace('<a href=', '<a '.$code.' href=', $output);
}

add_filter('next_post_link', 'post_link_attributes');
add_filter('previous_post_link', 'post_link_attributes');

The above code is tested and works. However you can workaround this with out using the function.php is to class an LI around each link:

    <!--BEGIN: Page Nav-->
    <?php if ( $wp_query->max_num_pages > 1 ) : // if there's more than one page turn on pagination ?>

        <nav id="page-nav">
            <h1 class="hide">Page Navigation</h1>
            <ul class="clear-fix">
                <li class="prev-link"><?php next_posts_link('« Previous Page') ?></li>
                <li class="next-link"><?php previous_posts_link('Next Page »') ?></li>
            </ul>
        </nav>

    <?php endif; ?>
    <!--END: Page Nav-->

This code is not tested and notice the plurality.

Answer 5

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 ); ?> ...
</a>
<?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 ); ?> ...
</a>
<?php } ?>

Answer 6

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 )
return;
?>
<nav>
<div class="plinks">
<?php next_post_link( '%link', _x( 'Previous', 'Pevious link', 'themename' ) ); ?>
<?php previous_post_link( '%link', _x( 'Next', 'Next link', 'themename' ) ); ?>
</div>
</nav>
<?php
}
endif;

then in your css file just write a new class for

.plinks a{
display:inline-block;
margin:1em 4px;
font-size:1em;
font-weight:500;
border:0;
padding:8px 1em;
color:#fff;
background:#000;
}
.plinks a:hover{
opacity:0.8;
}

Call it into any of your theme template pages using

<?php themename_post_nav(); ?>

Answer 7

This code will check if the $previous_post_obj and $next_post_obj variables are empty before generating the "previous" and "next" buttons, respectively. If either variable is empty, the corresponding button will not be displayed.

<div>
  <?php $previous_post_obj = get_adjacent_post( '', '', true );
  if ( ! empty( $previous_post_obj ) ) {
    $previous_post_ID = isset( $previous_post_obj->ID ) ? $previous_post_obj->ID : '';
    $previous_post_link = get_permalink( $previous_post_ID ); ?>
    <a href="<?php echo $previous_post_link; ?>" rel="prev" class="prev">
      <span>previous</span>
    </a>
  <?php } ?>
  <?php $next_post_obj = get_adjacent_post( '', '', false );
  if ( ! empty( $next_post_obj ) ) {
    $next_post_ID = isset( $next_post_obj->ID ) ? $next_post_obj->ID : '';
    $next_post_link = get_permalink( $next_post_ID ); ?>
    <a href="<?php echo $next_post_link; ?>" rel="next" class="next">
      <span>next</span>
    </a>
  <?php } ?>
</div>