How to substring element inside html - php

Question

I need to shorten the title in the previous and next buttons in a WP theme.
Here's the code:
<?php
/* ----------------------------------------------------------------------------------
Display navigation to next/previous pages when applicable.
---------------------------------------------------------------------------------- */
if ( ! function_exists( 'thinkup_input_nav' ) ) :
function thinkup_input_nav( $nav_id ) {
global $wp_query, $post;
// Don't print empty markup on single pages if there's nowhere to navigate.
if ( is_single() ) {
$previous = ( is_attachment() ) ? get_post( $post->post_parent ) : get_adjacent_post( false, '', true );
$next = get_adjacent_post( false, '', false );
if ( ! $next && ! $previous )
return;
}
// Don't print empty markup in archives if there's only one page.
if ( $wp_query->max_num_pages < 2 && ( is_home() || is_archive() || is_search() ) )
return;
?>
<nav role="navigation" id="<?php echo $nav_id; ?>">
<?php if ( is_single() ) : ?>
<?php previous_post_link( '<div class="nav-previous">%link</div>', '<span class="meta-icon"><i class="icon-angle-left icon-large"></i></span><span class="meta-nav">%title</span>' ); ?>
<?php next_post_link( '<div class="nav-next">%link</div>', '<span class="meta-nav">%title</span><span class="meta-icon"><i class="icon-angle-right icon-large"></i></span>' ); ?>
<?php elseif ( $wp_query->max_num_pages > 1 && ( is_home() || is_archive() || is_search() ) ) : // navigation links for home, archive, and search pages ?>
<?php if ( get_next_posts_link() ) : ?>
<div class="nav-previous"><?php next_posts_link( __( 'Older posts', 'lan-thinkupthemes') ); ?></div>
<?php endif; ?>
<?php if ( get_previous_posts_link() ) : ?>
<div class="nav-next"><?php previous_posts_link( __( 'Newer posts', 'lan-thinkupthemes') ); ?></div>
<?php endif; ?>
<?php endif; ?>
</nav><!-- #<?php echo $nav_id; ?> -->
<?php
}
endif;
/* ----------------------------------------------------------------------------------
Display navigation to next/previous image when applicable.
---------------------------------------------------------------------------------- */
if ( ! function_exists( 'thinkup_input_imagesnav' ) ) :
function thinkup_input_imagesnav() {
global $wp_query, $post;
?>
<nav role="navigation" id="nav-below">
<div class="nav-previous"><?php previous_image_link( 'false', '<div class="nav-previous"><span class="meta-icon"><i class="icon-angle-left icon-large"></i></span><span class="meta-nav">' . __( 'Previous', 'lan-thinkupthemes') . ' </span></div>' ); ?></div>
<div class="nav-next"><?php next_image_link( 'false', '<span class="meta-nav">' . __( 'Next', 'lan-thinkupthemes') . '</span><span class="meta-icon"><i class="icon-angle-right icon-large"></i></span>' ); ?></div>
</nav><!-- #image-navigation -->
<?php
}
endif;
/* Display comments at bottom of post, page and project pages. */
function thinkup_input_allowcomments() {
if ( comments_open() || '0' != get_comments_number() )
comments_template( '/comments.php', true );
}
/* ----------------------------------------------------------------------------------
Returns true if a blog has more than 1 category.
---------------------------------------------------------------------------------- */
function thinkup_input_categorizedblog() {
if ( false === ( $all_the_cool_cats = get_transient( 'all_the_cool_cats' ) ) ) {
// Create an array of all the categories that are attached to posts
$all_the_cool_cats = get_categories( array(
'hide_empty' => 1,
) );
// Count the number of categories that are attached to the posts
$all_the_cool_cats = count( $all_the_cool_cats );
set_transient( 'all_the_cool_cats', $all_the_cool_cats );
}
if ( '1' != $all_the_cool_cats ) {
return true;
} else {
return false;
}
}
/* Flush out the transients used in thinkup_input_categorizedblog. */
function thinkup_input_transient_flusher() {
delete_transient( 'all_the_cool_cats' );
}
add_action( 'edit_category', 'thinkup_input_transient_flusher' );
add_action( 'save_post', 'thinkup_input_transient_flusher' );
What I tried was to add substring to this line:
<?php previous_post_link( '<div class="nav-previous">%link</div>', '<span class="meta-icon"><i class="icon-angle-left icon-large"></i></span><span class="meta-nav">%title</span>' ); ?>
to:
<?php previous_post_link( '<div class="nav-previous">%link</div>', '<span class="meta-icon"><i class="icon-angle-left icon-large"></i></span><span class="meta-nav"><?php echo substr(%title,0,10)?></span>' ); ?>
but upon reloading the page it displayed an empty text instead.
What am I doing wrong?

Answer 1

You can override the previous_post_link() function in your functions.php file of your theme as like this :
function previous_post_link($format='« %link', $link='%title', $in_same_cat = false, $excluded_categories = '',$limit = -1) {
if ( is_attachment() )
$post = & get_post($GLOBALS['post']->post_parent);
else
$post = get_previous_post($in_same_cat, $excluded_categories);
if ( !$post )
return;
$title = apply_filters('the_title', $post->post_title, $post);
if ($limit>-1) {$title = substr($title,0,$limit).'…';}
$string = '<a href="'.get_permalink($post->ID).'">';
$link = str_replace('%title', $title, $link);
$link = $pre . $string . $link . '</a>';
$format = str_replace('%link', $link, $format);
echo $format;
And then you can call the function with the additional argument to define your desired trim length:
<li><?php previous_post_link('%link','&laquo %title',FALSE,'',20); ?></li>
Hope it helps you.
Taken from https://wordpress.org/support/topic/using-substr-to-limit-characters-in-post-title