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
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>',
});
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>
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.
