I have a bit of html code and javascript which produces a scrolling bit of text in a div on a specific Elementor web page. It is for a non-profit organization and I try to keep down the cost and keep plugins to a minimum. Currently I update the site when necessary but am moving towards staff members doing this themselves.
To update the scrolling text I just edit the div content manually but I am looking for a way to make this easier for the site owners.
My thought was that if I created an ACF text field and added that to the wordpress page I could pull that into the html but so far I am failing to do that. I am comfortable with editing functions.php and the site uses several custom queries but the solution to this is evading me.
Here is the relevant bit of code and what I have tried adding – the acf field is called ‘marquee_txt’.
<div>.
<div class=”loop”><div class=”content”> <?php the_field (‘marquee_txt’) ;?> See calendar for details ✦</div></div>
</div>
The acf field is associated with the page and is called marquee_txt. People on this forum are very generous with their help but as someone who only occasionally codes I need to have my hand held and have the code in its entirety .
I guess what I am trying to do is to surface the acf value in the same way that this is possible in an elementor widget using the dynamic data option – but using html/php/ javascript or what ever is necessary.
Any help gratefully received
That’s actually a really good approach — using an ACF text field for the marquee makes it much easier for non-technical users to update the scrolling text without touching any code.
You can try this clean setup:
<div class=”loop”>
<div class=”content”>
<?php
$marquee_text = get_field(‘marquee_txt’);
if( $marquee_text ) {
echo esc_html($marquee_text);
} else {
echo ‘See calendar for details ✦’;
}
?>
</div>
</div>
This way, if someone adds text to the marquee_txt field, it’ll automatically appear inside your scrolling div. If they leave it blank, it’ll show your default message (“See calendar for details ✦”).
You can drop this directly into your Elementor HTML widget (make sure the page uses the correct ACF field group).
This keeps things simple and plugin-free — perfect for a non-profit setup!
Thanks for your help nisasafdar
Unfotunately that solution does not work and I think it might be because Elementor does not all PHP to run in an HTML widget.
As an alternative I tried to create a shortcode in the functions.php file but I am not having success with that either. Here is my code:
// Add Shortcode to use acf field value in scrolling marquee
function marquee_text_shortcode( $atts , $content = null ) {
$marquee_text = get_field(‘marquee_txt’);
return ‘‘ . $marquee_text . ‘‘;
}
add_shortcode( ‘scroll_txt’, ‘marquee_text_shortcode’ );
I have tried using [scroll_txt] in he shortcode widget and in a text box widget but only the name of the shortcode is displayed.
Any other suggestions?
// Add Shortcode to display ACF field value for the scrolling marquee
function marquee_text_shortcode() {
// Get the ID of the current page being viewed
$post_id = get_the_ID();
// Get the ACF field value for THAT specific page/post
$marquee_text = get_field(‘marquee_txt’, $post_id);
// Check if the field has content and return it
if ( $marquee_text ) {
// We use esc_html() to make sure the output is secure
return esc_html($marquee_text);
}
// Optional: Return a default message if the field is empty
return ‘See calendar for details ✦’;
}
add_shortcode( ‘scroll_txt’, ‘marquee_text_shortcode’ );
Thanks for your reply kisanportal
Unfotunately I still get just the name of the shortcode displaying. Here is my code edited as you suggest:
// Add Shortcode to use acf field value in scrolling marquee
function marquee_text_shortcode( $atts , $content = null ) {
$post_id = get_the_ID();
$marquee_text = get_field(‘marquee_txt’,$postID);
// Check if the field has content and return it
if ( $marquee_text ) {
// We use esc_html() to make sure the output is secure
return esc_html($marquee_text);
}
}
add_shortcode( ‘scroll_txt’, ‘marquee_text_shortcode’ );
}
