10

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

7 Answers 7

10

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>
2
  • The link to your github source is broken. Could you update it please?
    – pixeline
    Jun 27, 2013 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, 2013 at 22:40
20

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');
1
  • This is the best option as it replaces the $format variable before it goes into the echo adjacent_post_link() statement.
    – eteich
    Jun 28, 2013 at 16:15
7

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 } 
1
  • This might work with standard CSS but with bootstrap, this is going to be harder.
    – Dexter
    Feb 25, 2022 at 10:21
2

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.

0

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 } ?>
2
  • Why are you using echo get_*, while there are related functions which echo its output by default, like the_title() Jun 20, 2015 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. Jun 20, 2015 at 9:31
0

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(); ?>
0

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>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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