WordPress Alternatives for Better Nearby Posts
Ok, grashoppers. We’re going to show you 2.5 ways to shorten the title in Next and Previous posts within WordPress. From the most robust solution using PHP to simplest quick fix using CSS, all code shown here has been tested. Any PHP code sourced from WordPress support forums has been fully tested and cleaned-up (e.g., spacing, variables names, and comments) to conform to PHP Coding Standards.
The Backstory
The first thing you’ll notice is that the official WP docs (i.e., THE Codex) makes no mention on how to do this officially. Nevertheless, this is a fix we have been putting off since February 2014. And since our founder is interviewing with tech companies in the Bay Area, now is as good as a time as any to finally fix this nagging design issue!
The PHP Solution
1. Basic PHP Solution
The below is a verbose PHP example and is easy to understand. It’s been heavily tested, documented, and uses self-documenting variable names.
/**
* Shortens title used in next and previous post links.
*
* Replaces the '%title' argument used in the 2nd argument of these WordPress functions:
* previous_post_link() and next_post_link()
*
* Sample usage with and without optional argument:
* previous_post_link( %link, shorten_next_prev_title( 'prev', 25 ) );
* next_post_link( %link, shorten_next_prev_title( 'next' ) );
*
* @since 1.0.0 (Aug 9, 2015 build date)
*
* @see get_next_post() and get_previous_post()
* @link http://codesport.io/coding/previous-and-next-post-titles/
*
* @param string $direction Use 'next' or 'prev'. If != 'next' hard defaults to 'prev'
* @param integer $my_title_length Optional. Number of characters in title. Defaults to 33
* @return string A shortened title.
*/
function shorten_next_prev_title( $direction, $my_title_length = 33 ) {
if ( $direction == 'next' ) {
$my_post = get_next_post();
} else {
$my_post = get_previous_post();
}
if ( !empty( $my_post ) ) {
$my_post_title = $my_post->post_title;
if ( strlen( $my_post_title ) > $my_title_length ) {
$shortened_my_post_title = substr( $my_post_title, 0, $my_title_length ) . '…';
} else {
$shortened_my_post_title = $my_post_title;
}
}
return $shortened_my_post_title;
}//shorten_next_prev_title()
Hat Tip: asiles from WordPress support forum
2. “Grown-up” PHP Solution Using Filters
Under Review: Use with Caution
Since this final example requires additional mods on how you place your arrow (ie., previous, next) symbols we have not finished testing it. Also, before posting it here, we want to clean-up the original code (adding the DocBlock and PHP coding Standards). We’ll tackle this if time permits.
In the meantime, the original proposed fix is here.
CSS Quick fix
This is not a complete solution as any trailing arrows in the next_post_link() call will be cut off. Using the pseudo tag .nav-next:after {content:'→'} doesn’t worked because it’s chopped off at the right. Nevertheless, it’s a quick and dirty solution if you’re short on time.
.nav-previous, .nav-next {
white-space: nowrap;
width: 300px;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
Hat Tip: Andrew in the WordPress Support Forum