Home Forums General Issues "Read more" in ACF text or wysiwyg field


"Read more" in ACF text or wysiwyg field

  • 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?

  • 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);
  • 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.

  • 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;
  • 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

    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>',
  • 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’

    		$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 );
  • 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.

Viewing 7 posts - 1 through 7 (of 7 total)

The topic ‘"Read more" in ACF text or wysiwyg field’ is closed to new replies.