Add dynamic code using Elementor shortcode widget and custom PHP

Add dynamic code using Elementor shortcode widget and custom PHP

Short Intro:

This article will show you how to add dynamic code to your templates using the Elementor Shortcode widget and custom PHP code.

Problem:

As of May 2024, using the Elementor and JetEngine widgets to display dynamic data containing javascript codes does not work. The widgets remove the codes from the dynamic data so it does not display properly on the front end.

Solution:

You will need to use custom PHP code to create a shortcode which you can use with Elementor Shortcode widget.

 

Step 1: Add meta field for custom code

Add a Textarea meta field for the custom code in your custom post type. You can use any name/ID for this meta field. "booking widget" meta field name is used for this example.

 

Step 2: Add custom PHP code

In Appearance > Theme File Editor > functions.php, add this code:

add_shortcode("booking_widget_shortcode", function(){
return get_post_meta(get_the_ID(), 'booking widget', true);
});

Note: Double-check that the quotation marks (" and ') are correct. The text inside between the quotation marks will turn red if it's right.

 

Step 3: Add code in meta field

Add the code to the "booking widget" meta field.

 

Step 4: Add shortcode in template

In your template, add an Elementor Shortcode. Use the name of from the PHP code for the Shortcode widget.

 

Example:

Port massage > Treatments
https://abc10631.sg-host.com/behandelingen/prenatale-massage-copy-2/

Contact details

More solutions

by ilias

You're using JetFormBuilder and want to make sure users are at least 18 years old based on their birthday input.

by ilias

Roweij Spices wanted to have a filter that can choose number of products display per pagination

by ilias

This article will show you how to add an image to invoice and slip PDF template in PDF Invoice & Packing Slips for Woocommerce plugin