3

I am using the following code to show next/previous posts in my wordpress theme.

<?php
previous_post_link('<span class="left">&larr; %link</span>');
next_post_link('<span class="right">%link &rarr;</span>'); ?> 

It's working but I want to limit the post title which is displayed in the link to a specific length because too big links don't work because of the space I have. And I want to have the arrow within the link so that it shows link and arrow with the same style. Is that possible aswell?

Thank you!

3 Answers 3

6

Here's a little coding that should implement this for you:

<?php $max_length = 5; // set max character length here

$next = get_next_post()->ID;
$prev = get_previous_post()->ID;

if( $prev ) {
    $title = get_the_title( $prev );
    $link = get_the_permalink( $prev );
    $post_name = mb_strlen( $title ) > $max_length ? mb_substr( $title, 0, $max_length ) . ' ..' : $title;
    ?>
        <span class="left">
            <a href="<?php echo $link; ?>" rel="prev" title="<?php echo $title; ?>">&larr; <?php echo $post_name; ?></a>
        </span>
    <?php
}
if( $next ) {
    $title = get_the_title( $next );
    $link = get_the_permalink( $next );
    $post_name = mb_strlen( $title ) > $max_length ? mb_substr( $title, 0, $max_length ) . ' ..' : $title;
    ?>
        <span class="right">
            <a href="<?php echo $link; ?>" rel="next" title="<?php echo $title; ?>"><?php echo $post_name; ?> &rarr;</a>
        </span>
    <?php
} ?>

Hope that helps in your template.

Edit: small fix so this could work with multibyte characters. (mb_strlen - mb_substr)

3
  • Thank you! Works like a charm. But is there a way to get the two arrows inside the link? That'd look way better I suppose!
    – Benedikt W
    May 23, 2016 at 13:51
  • I was blind, sorry. Got it now! Thanks for your answer!!!
    – Benedikt W
    May 23, 2016 at 13:54
  • Oh. No worries, actually there's one arrow (left) which was outside the link. Edited the answer. Have a good day!
    – Ismail
    May 23, 2016 at 13:56
3

This can be done just using simple css based on max-width and text-overflow properties.

<style>
    /**
     * note that your theme might not use class nav_posts
     * so you might have to adjust to your need
     */

    .nav_posts .title {
        /**
         * This is what is minimum required for the magic
         * First it has to be a block... inline blocks are cool and simple to use,
         * but if your theme used blocks (includes flex) don't upset him and take that line out
         */
        display: inline-block;

        text-overflow: ellipsis;

        /* Required for text-overflow to do anything */
        overflow: hidden;
        white-space: nowrap; /* forces text to fit on one line */

        max-width: 30ex; /* Fit to your needs... */

        /* Then what ever you need to fit in your theme */
        vertical-align: bottom;
    }
</style>

<!--
// Check out your theme (could be in single.php)
// the below php is only to illustrate the case.
// Make your life simple, don't edit the theme or any php, adjust the css
// adding it using wordpress custom css, nothing more, as simple as that :)
-->

<?php

previous_post_link('<span class="nav_posts left">&larr; <span class="title">%link</span></span>');

next_post_link('<span class="nav_posts right"><span class="title">%link</span> &rarr;</span>');

?>
3
  • I used the code of @Samuel Elh but I think this could work too.
    – Benedikt W
    May 23, 2016 at 14:36
  • 1
    I've edited code of @Samuel to use mb_strlen and mb_substr so his code would cope with accents too... you will not have the correction until he validates it... (I'm new to this site and missing points to gain right to comment) May 23, 2016 at 14:41
  • This works great but I had to add vertical-align: bottom; in css for correct vertical alignment of left and right arrows. See stackoverflow.com/a/14870205/249742 Nov 6, 2021 at 15:31
0

Both of these should trickle down to get_adjacent_post_link() function, which passes result through dynamic {$adjacent}_post_link filter (where $adjacent is previous or next).

You should be able to use this filter to make any changes to final output.

2
  • I am new to php, what exactly do I have to do?
    – Benedikt W
    May 23, 2016 at 13:41
  • 1
    I would recommend to start with filters documentation probably. The pure PHP part would not be in scope here, this stack focuses primarily on WP specifics part, some degree of basic PHP proficiency is implied.
    – Rarst
    May 23, 2016 at 13:48

Your Answer

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

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