This thread is resolved. Here is a description of the problem and solution.
Problem: I would like to display a JavaScript widget on the single post page for my custom post type. Each post will have a unique script tag, so I would like to store that in a custom field. I have created a post template with Elementor for this custom post type, and I would like to inject the script from the custom field into the single post template.
Solution: You can use a custom shortcode to generate the script tag, then place that custom shortcode in your Elementor template.
function ts_show_widget( $atts ) {
global $post;
$field_slug = 'unique-string'; // replace this with the slug of your custom field
$atts = shortcode_atts([
'postid' => isset($post->ID) ? $post->ID : 0
], $atts);
$field = types_render_field($field_slug, array( 'item'=>$atts['postid'], 'output'=>'raw'));
$script = "<script>console.log('Unique string: " . $field . "');</script>"; // update your script here
return $script;
}
add_shortcode( 'ts-show-widget', 'ts_show_widget' );
This is the technical support forum for Toolset - a suite of plugins for developing WordPress sites without writing PHP.
Everyone can read this forum, but only Toolset clients can post in it. Toolset support works 6 days per week, 19 hours per day.
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
| 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | 8:00 – 12:00 | - | - |
| 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | 13:00 – 17:00 | - | - |
Supporter timezone: America/New_York (GMT-04:00)
This topic contains 8 replies, has 2 voices.
Last updated by patrickM-3 5 years, 2 months ago.
Assisted by: Christian Cox.
Thank You Christian. I've added the following script to the child theme functions.php file:
function location_widget( $atts ) {
global $post;
$field_slug = 'lighthouse-widget-code'; // slug of Toolset custom field
$atts = shortcode_atts([
'postid' => isset($post->ID) ? $post->ID : 0
], $atts);
$field = types_render_field($field_slug, array( 'item'=>$atts['postid'], 'output'=>'raw'));
$script = "<script>" . $field . "</script>";
return $script;
}
add_shortcode( 'location-widget', 'location_widget' );
I've added the following to an Elementor Pro text editor element:
<div id="review-widget-container" style="width: 220px;"></div> [location-widget]
As you can see on this page: hidden link the widget is rendering the content twice. The list of reviews is duplicated and, because of CSS, the header is not repeated. If you inspect the source where this widget is, you will see that the javascript is appearing twice.
Any idea how I did this?
It looks like the JavaScript code is included in this page twice. If you open the browser console and search for "review-widget-container" you can see three occurrences. There should only be two - once in the container div and another in the script itself. The second instance is included in a section with a comment about OceanWP JS, so I assume this means there is a theme option that allows you to insert arbitrary script code, or it's been added to a child theme's functions.php file. Remove it from there if you want to include it in a custom field instead.
