How can I limit the length of the previous/next posts in my Wordpress Theme?

Question

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!

Answer 1

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)

Answer 2

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

?>

Answer 3

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.