[Resolved] Implement "Read more …" in WYSIWYG fields on front-end template

[Author]

Posts

[davidW-32]

I have several custom WYSIWYG fields with long formatted text as content. Since toolset is ignoring the wordpress more tag, I am wondering how I can add a "read more" button after an excerpt of the content on the front-end template. The button should then show the hidden content directly in the same field (not open another URL).
This post seems to be quite similar to what I need, but unfortunately the documentation of the solution is not accessible any more ("hidden link"): https://toolset.com/forums/topic/implement-read-more-on-wysiwyg-field-with-inline-expansion/
Setup: WP 6.0, Astra theme, WP block editor.
Thank you for your assistance!

[Waqar Supporter Languages: English (English ) Timezone: Asia/Karachi (GMT+05:00)]

Hi,

Thank you for contacting us and I'd be happy to assist.

The read-more functionality you're looking for is not available out of the box. It will require some custom code.

Here is the link to the guide that Shane shared in the other ticket:
hidden link

You can use the instructions and code from that guide, through a custom shortcode, like this:

add_shortcode('WYSIWYG_field', 'WYSIWYG_field_func');
function WYSIWYG_field_func($atts) {
	$field = $atts['field'];
	$chars = $atts['chars'];
	$ellipsestext = $atts['ellipsestext'];
	$moretext = $atts['moretext'];
	$lesstext = $atts['lesstext'];
	$field_content = strip_tags( types_render_field($field, array('output' => 'raw')) );

	if(!empty($field_content)) {
		$field = str_replace('-', '', $field);
		ob_start();
		echo '<div class="more'.$field.'">';
		echo $field_content;
		echo '</div>';
		?>
		<script type="text/javascript">
			jQuery(document).ready(function($) {
				var showChar<?php echo $field; ?> = <?php echo $chars; ?>;
				var ellipsestext<?php echo $field; ?> = '<?php echo $ellipsestext; ?>';
				var moretext<?php echo $field; ?> = '<?php echo $moretext; ?>';
				var lesstext<?php echo $field; ?> = '<?php echo $lesstext; ?>';
				$('.more<?php echo $field; ?>').each(function() {
					var content<?php echo $field; ?> = $(this).html();
					if(content<?php echo $field; ?>.length > showChar<?php echo $field; ?>) {
						var c<?php echo $field; ?> = content<?php echo $field; ?>.substr(0, showChar<?php echo $field; ?>);
						var h<?php echo $field; ?> = content<?php echo $field; ?>.substr(showChar<?php echo $field; ?>-1, content<?php echo $field; ?>.length - showChar<?php echo $field; ?>);
						var html<?php echo $field; ?> = c<?php echo $field; ?> + '<span class="moreellipses<?php echo $field; ?>">' + ellipsestext<?php echo $field; ?>+ '&nbsp;</span><span class="morecontent<?php echo $field; ?>"><span style="display: none;">' + h<?php echo $field; ?> + '</span>&nbsp;&nbsp;<a href="" class="morelink<?php echo $field; ?>">' + moretext<?php echo $field; ?> + '</a></span>';
						$(this).html(html<?php echo $field; ?>);
					}
				});
				$(".morelink<?php echo $field; ?>").click(function(){
					if($(this).hasClass("<?php echo $lesstext; ?>")) {
						$(this).removeClass("<?php echo $lesstext; ?>");
						$(this).html(moretext<?php echo $field; ?>);
					} else {
						$(this).addClass("<?php echo $lesstext; ?>");
						$(this).html(lesstext<?php echo $field; ?>);
					}
					$(this).parent().prev().toggle();
					$(this).prev().toggle();
					return false;
				});
			});
		</script>
		<?php
		return ob_get_clean();	
	}
}

The above code snippet can be included through either Toolset's custom code feature ( ref: https://toolset.com/documentation/adding-custom-code/using-toolset-to-add-custom-code/ ) or through the active theme's "functions.php" file.

Once, this custom shortcode has been added, you can use it in your content like this:

[WYSIWYG_field field="field-slug" chars="55" ellipsestext="...." moretext="more" lesstext="less"]

Note: You'll replace "field-slug" with the actual slug of your WYSIWYG custom field and can adjust the other attribute values, as needed.

I hope this helps and for more personalized assistance around custom code, you can also consider hiring a professional from our list of recommended contractors:
https://toolset.com/contractors/

regards,
Waqar

[davidW-32]

My issue is resolved now. Thank you!

Though I could not apply your solutions since I do not have the needed html/js/css programming skills.
I opted for another solution: For each field where I need it, I created an additional WYSIWYG custom field so that I could split the content (e.g. "Description" and "Description (read more)". Then I added the first field as "normal" single field block on the template and the second field as Stackable Accordion (v2) field with a "read more ..." title so that the second field can be expanded by the website visitor. That is exactly the solution I needed. Thanks for your help anyway, I am sure that more skilled people will benefit from it.