Hide or show read more button based on character limit

PHP
1

Hi… I am using a simple function in Wordpress and it works fine. But I have a problem, I want the button to be shown according to the character limit. For example, if it is less than 100 characters, I want the button to be hidden.

add_filter( 'excerpt_more', '__return_empty_string', 21 );

function wpse_134143_excerpt_more_link( $excerpt ) {
    $excerpt .= sprintf( 
            '... <a href="%s">%s</a>.',
            esc_url( get_permalink() ),
            __( 'Read more' )
    );
    return $excerpt;
}
add_filter( 'the_excerpt', 'wpse_134143_excerpt_more_link', 21 );

Actually I tried the CSS trick but unfortunately it does not work stably across screen sizes. So I understand that PHP or JS should be used, because the button should be hidden or shown based on the character limit, not the line height.

How can I do this? Any help or ideas would be greatly appreciated, thank you.

2

WP functions are foreign to me, but does the native strlen() function help?

if(strlen($excerpt) > 99){
    // Show the button
}
4

I shall give you a hint.

with colors, and a little rearranging, even:
if the length of it is more than 100…
add the link.
(This is how Sam gave you the code Sam did. Translated your words into code directly. It’s something to take note of - if you can state the problem clearly enough, probably you can translate directly to code, or close to it.)

If it’s not more than 100, you dont add the link, and just return the original text.

1 Like
5

Thanks… The ideas brought something else to my mind. I decided to check the Wordpress reference repository and created a quick but working code. https://developer.wordpress.org/reference/functions/the_excerpt/

This is actually the most accurate definition for WordPress, unlike the code above.

functions.php


function excerpt_readmore($more) {
    return '.. <a href="'. get_permalink($post->ID) . '" class="readmore">' . 'Read more' . '</a>';
}
add_filter('excerpt_more', 'excerpt_readmore');

Then we check the limit again

add_filter('excerpt_length', 'my_excerpt_length');

function my_excerpt_length($length) {

return 300; } // LIMIT

It works magically without using JS. It could be improved, including text cutting features. However, for now the button will be hidden if it does not exceed the number of characters. Of course, it should be noted that the code is only supported by the Wordpress core and is a complementary function.

Note, if the content area is limited in height, the button will never appear on mobile. The important thing is that the character limit and the content height area match. You should pay attention to this in CSS. The “max-height” or height definitions can be removed if they are not needed for another definition, since they are already character limited, it does not seem necessary for this scenario.

6

I didn’t try it, but this idea brought something else to my mind and I solved the problem.

7

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.