"Read more" in ACF text or wysiwyg field

• ratatat

• January 27, 2015 at 2:15 am

I haven’t seen this question before.

Is it be possible to implement a “read more” tag within a text field or a wysiwyg field in ACF? If so, how?

Within the normal WP loop, I can access the read_more tag via the_content() or the_excerpt(). I need to be able to implement such function in a template I am working with ACF exclusively. And I don’t manage to do that so far.

Any ideas how to achieve this?

• LingoSam

• January 28, 2015 at 8:08 pm

Elliot has pointed me in this direction before for a similar issue.
If you pass the custom field through the_content filter, it should then kick in.

Here is the example provided to me before:

$value = get_field('wysiwyg_field_name');
echo apply_filters('the_content', $value);

• ratatat

• February 10, 2015 at 6:44 am

Actually, I managed to solve this problem in another way. I post here the solution in case somebody else is interested in the answer:

1) I created a Wysiwyg Editor field.
2) Added the field normally in my php file.
3) In the post editor, I used the normal wordpress “more” tag, which automatically inserts the shortcode <!–more–> inside my content and creates two paragraphs automatically, one before and one after the shortcode.
4) In my Jquery file, I wrote this code:

       $('p').html(function(_, text) {
        return text.replace('<!--more-->', '<a href="#" class="read_more">read more</a>' );
      });

That’s it, basically. With that link and that class I can manipulate the link as I want.

• Matthias Honert

• December 14, 2017 at 1:48 am

I found this smart solution for functions.php:

function showBeforeMore($fullText){
    if(@strpos($fullText, '<!--more-->')){
        $morePos = strpos($fullText, '<!--more-->');
        print substr($fullText,0,$morePos);
        print "<span class=\"read-more\"><a href=\"". get_permalink() . "\" class=\"read-more-link\">Read More</a></span>";
    } else {
        print $fullText;
    }
}

<?php showBeforeMore(get_field('YOUR-FIELD-NAME')); ?>

my goal for Wysiwyg Editor with <!–more–> was to integrate a toggle read-more/less-button:

function readmore($fullText){
	if(@strpos($fullText, '<!--more-->')){
		$morePos  = strpos($fullText, '<!--more-->');
		$fullText = preg_replace('/<!--(.|\s)*?-->/', '', $fullText);
		print substr($fullText,0,$morePos);
		print "<div class=\"read-more-content hide\">". substr($fullText,$morePos,-1) . "</div>";
		print "<a class=\"ui lined small button read-more\">Read More</a>";
	} else {
		print $fullText;
	}
}

• albin

• January 8, 2021 at 6:09 pm

Hello Everyone, I was facing the same issue, trying to include a read-more button on a textarea field, I tried to switch it to wysiwyg and then create the read more, but it created unwanted p tag. I use javascript-plugin oriented solution instead and not a PHP/Wordpress oriented solution.

i’m using this Readmore.js plugin
https://github.com/jedfoster/Readmore.js/tree/version-3.0

Which we can configure with 2 steps:
1 – adding specific class to the the field we want to add the read more (textearea in my case)
2 – write the script for the readmore-js to work

// My selector where my textarea field is included
const readMoreParagraphs = document.querySelectorAll('.item-texte');

new Readmore( readMoreParagraphs, {
    speed: 200,
    collapseHeight: 20,
    lessLink: '<a href="#" class="read-more">Read less</a>',
    heightMargin: 16,
    moreLink: '<a href="#" class="read-more">Read more</a>',
});

• MacGraphic

• May 26, 2021 at 1:34 am

A non-JS option:
Just swap out ‘company_detail’ for the name of your WYSIWYG field.
And set/alter the length of the excerpt by changing the ’32’

<p>
	<?php
		$raw_content 		= get_field( 'company_detail' );
		$trimmed_content	= wp_trim_words( $raw_content, '32' );
		$clean_excerpt		= apply_filters( 'the_excerpt', $trimmed_content );
		echo esc_attr( $clean_excerpt );
	?>
</p>

• Eagerbob

• July 20, 2022 at 10:58 am

A non-JS option:
Just swap out ‘company_detail’ for the name of your WYSIWYG field.
And set/alter the length of the excerpt by changing the ’32’

Nice and easy solution. Thanks for posting this.