Using Elementor Template shortcode [elementor-template id="xxx"] in php file not displaying properly on front-end

[r-interactive]

Prerequisites

• I have searched for similar issues in open and closed tickets and cannot find a duplicate.
• I have troubleshooted my issue, and it still exists against the latest stable version of Elementor.

Description

Hi,
I am using the Elementor Templates to create a loop item template. It generates a shortcode and I have inserted it into my wp query code.

Below is my code:

$args = array(
	'post_type'              => array( 'timeline' ),
	'posts_per_page'         => -1,
	'meta_key'          => 'timeline_slide_year',
    'orderby'           => 'meta_value_num',
    'order'             => 'ASC',
);


$timelineSlideQuery = new WP_Query( $args );


if ( $timelineSlideQuery->have_posts() ) {
	while ( $timelineSlideQuery->have_posts() ) {
		$timelineSlideQuery->the_post();
		echo do_shortcode('[elementor-template id="448"]');
	}
}


wp_reset_postdata();

It sort of works.
It displays the post title + post content, but it's missing the custom styles.
From the Elementor editor, I have added a background image to the contain and changed the color of the text, but it's not showing those customizations on the front-end.

Elementor Editor template screenshot:

Front-end screenshot:

Why isn't it showing the custom styles modified in Elementor editor on the front-end?

Steps to reproduce

1. Create a loop item template from Elementor Templates
2. Add the post title + post content widget to the template and do a bit of customizing to some elements. Such as changing the color of the text. Save it.
3. In a php file (I am using the header.php for testing) from the theme folder, add in this code:

$args = array(
	'post_type'              => array( 'timeline' ),
	'posts_per_page'         => -1,
	'meta_key'          => 'timeline_slide_year',
    'orderby'           => 'meta_value_num',
    'order'             => 'ASC',
);


$timelineSlideQuery = new WP_Query( $args );


if ( $timelineSlideQuery->have_posts() ) {
	while ( $timelineSlideQuery->have_posts() ) {
		$timelineSlideQuery->the_post();
		
	}
}


wp_reset_postdata();

3. Fetch the generated shortcode from Elementor Templates, such as [elementor-template id="448"]
4. Paste the line of code below into the php wp query, right after '$timelineSlideQuery->the_post();'

echo do_shortcode('[elementor-template id="448"]');

full code:

$args = array(
	'post_type'              => array( 'timeline' ),
	'posts_per_page'         => -1,
	'meta_key'          => 'timeline_slide_year',
    'orderby'           => 'meta_value_num',
    'order'             => 'ASC',
);

$timelineSlideQuery = new WP_Query( $args );

if ( $timelineSlideQuery->have_posts() ) {
	while ( $timelineSlideQuery->have_posts() ) {
		$timelineSlideQuery->the_post();
		echo do_shortcode('[elementor-template id="448"]');
	}
}

wp_reset_postdata();

5. View it on the front-end. It's displaying the post title and content, but missing the custom styles.

Expected behavior

The expected behavior - The output in the front-end should look like the template that was created from the Elementor editor, but it isn't.

Isolating the problem

• This bug happens when only the Elementor (and Elementor Pro) plugins are active.
• This bug happens with the Hello Elementor theme active.
• I can reproduce this bug consistently by following the steps I described above.

Elementor System Info

Click to reveal

== Server Environment ==
	Operating System: Linux
	Software: LiteSpeed
	MySQL version: MariaDB Server v10.5.24
	PHP Version: 7.4.33
	PHP Memory Limit: 512M
	PHP Max Input Vars: 1000
	PHP Max Post Size: 64M
	GD Installed: No
	ZIP Installed: Yes
	Write Permissions: All right
	Elementor Library: Connected

== WordPress Environment ==
	Version: 6.5.3
	Site URL: https://sc.thedev.ca/roseelementor2
	Home URL: https://sc.thedev.ca/roseelementor2
	WP Multisite: No
	Max Upload Size: 64 MB
	Memory limit: 40M
	Max Memory limit: 512M
	Permalink Structure: /%postname%/
	Language: en
	Timezone: 0
	Debug Mode: Inactive

== Theme ==
	Name: Hello Elementor
	Version: 3.0.1
	Author: Elementor Team
	Child Theme: No

== User ==
	Role: administrator
	WP Profile lang: en
	User Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36

== Active Plugins ==
	Advanced Custom Fields PRO
		Version: 6.2.10
		Author: WP Engine

	Better Search Replace
		Version: 1.4.6
		Author: WP Engine

	Disable Gutenberg
		Version: 3.1.1
		Author: Jeff Starr

	Easy Auto SKU Generator for WooCommerce
		Version: 1.2.0
		Author: Dan Zakirov

	Elementor
		Version: 3.21.5
		Author: Elementor.com

	Elementor Pro
		Version: 3.21.2
		Author: Elementor.com

	Temporary Login
		Version: 1.1.0
		Author: Elementor.com

	Toolset Views
		Version: 3.6.14
		Author: OnTheGoSystems

	WooCommerce
		Version: 8.9.0
		Author: Automattic

	WooCommerce PayPal Payments
		Version: 2.7.0
		Author: WooCommerce

	WP Mail SMTP
		Version: 4.0.1
		Author: WP Mail SMTP


== Must-Use Plugins ==
	WooCommerce Modifications by Spruce Creative
		Version: 
		Author: 

	WordPress automation by WPCloud
		Version: 
		Author: 


== Elements Usage ==
	
	footer : 1
		container : 6
		heading : 4
		icon-list : 2
		image-box : 1
		nav-menu : 1
		social-icons : 1
		text-editor : 1
	header : 1
		container : 3
		nav-menu : 1
		theme-site-logo : 1
	product : 1
		container : 5
		template : 2
		woocommerce-notices : 1
		woocommerce-product-add-to-cart : 1
		woocommerce-product-content : 1
		woocommerce-product-images : 1
		woocommerce-product-meta : 1
		woocommerce-product-price : 1
		woocommerce-product-title : 1
	section : 6
		container : 8
		heading : 3
		image : 1
		text-editor : 1
		theme-post-excerpt : 1
		theme-post-featured-image : 1
		theme-post-title : 1
		woocommerce-menu-cart : 1
		woocommerce-product-related : 1
		woocommerce-products : 2
	wp-page : 5
		button : 1
		container : 6
		heading : 1
		icon-list : 1
		price-list : 1
		spacer : 1
		text-editor : 9
		woocommerce-cart : 1
		woocommerce-checkout-page : 1
		woocommerce-products : 1
		woocommerce-purchase-summary : 1
	search-results : 1
		archive-posts : 1
		container : 1
		heading : 1
		theme-archive-title : 1
	product-archive : 2
		container : 4
		heading : 3
		loop-grid : 1
		spacer : 2
		template : 2
		theme-archive-title : 1
		wc-archive-products : 1
		woocommerce-products : 1
	loop-item : 5
		container : 7
		heading : 1
		spacer : 2
		theme-post-content : 1
		theme-post-excerpt : 1
		theme-post-featured-image : 3
		theme-post-title : 5
		woocommerce-product-add-to-cart : 1
		woocommerce-product-price : 1


== Settings ==
	
	cpt_support: post, page
	allow_tracking: yes
	font_display: swap


== Features ==
	Custom Fonts: 0
	Custom Icons: 0

== Integrations ==
	
	woocommerce: Active


== Elementor Experiments ==
	Improved Asset Loading: Active by default
	Improved CSS Loading: Active by default
	Inline Font Icons: Active by default
	Additional Custom Breakpoints: Active by default
	admin_menu_rearrangement: Inactive by default
	Flexbox Container: Active by default
	Upgrade Swiper Library: Active by default
	Grid Container: Active
	Nested Elements Performance: Inactive by default
	Optimized Control Loading: Inactive by default
	Default to New Theme Builder: Active by default
	Hello Theme Header & Footer: Active by default
	Elementor Home Screen: Active by default
	Editor Top Bar: Active
	Build with AI: Active by default
	Landing Pages: Active
	Nested Elements: Active
	Lazy Load Background Images: Active
	Pages Panel: Inactive by default
	Display Conditions: Active
	Form Submissions: Active by default
	Menu: Active
	Taxonomy Filter: Active


== Log ==
	
Log: showing 20 of 362024-04-25 23:18:52 [info] elementor::elementor_updater Started 
2024-04-25 23:18:52 [info] Elementor/Upgrades - _on_each_version Start  
2024-04-25 23:18:52 [info] Elementor/Upgrades - _on_each_version Finished 
2024-04-25 23:18:52 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '3.21.2',
  'to' => '3.21.3',
)]
2024-04-25 23:18:52 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor',
  'from' => '3.21.2',
  'to' => '3.21.3',
)]
2024-04-30 20:10:38 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor',
  'from' => '3.21.3',
  'to' => '3.21.4',
)]
2024-04-30 20:10:40 [info] elementor::elementor_updater Started 
2024-04-30 20:10:40 [info] Elementor/Upgrades - _on_each_version Start  
2024-04-30 20:10:40 [info] Elementor/Upgrades - _on_each_version Finished 
2024-04-30 20:10:40 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '3.21.3',
  'to' => '3.21.4',
)]
2024-05-03 18:49:34 [info] elementor-pro::elementor_pro_updater Started 
2024-05-03 18:49:34 [info] Elementor Pro/Upgrades - _on_each_version Start  
2024-05-03 18:49:34 [info] Elementor Pro/Upgrades - _on_each_version Finished 
2024-05-03 18:49:34 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor Pro',
  'from' => '3.21.1',
  'to' => '3.21.2',
)]
2024-05-03 18:49:34 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor Pro',
  'from' => '3.21.1',
  'to' => '3.21.2',
)]
2024-05-10 07:00:28 [info] Elementor data updater process has been queued. [array (
  'plugin' => 'Elementor',
  'from' => '3.21.4',
  'to' => '3.21.5',
)]
2024-05-10 07:00:37 [info] elementor::elementor_updater Started 
2024-05-10 07:00:37 [info] Elementor/Upgrades - _on_each_version Start  
2024-05-10 07:00:38 [info] Elementor/Upgrades - _on_each_version Finished 
2024-05-10 07:00:38 [info] Elementor data updater process has been completed. [array (
  'plugin' => 'Elementor',
  'from' => '3.21.4',
  'to' => '3.21.5',
)]

PHP: showing 4 of 4PHP: 2024-04-18 23:04:28 [warning X 64][../wp-content/plugins/elementor/includes/frontend.php::303] array_merge(): Expected parameter 1 to be an array, null given [array (
  'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2024-04-19 02:26:17 [notice X 5][../wp-content/plugins/elementor-pro/core/app/modules/site-editor/data/endpoints/templates.php::150] Undefined index: condition_type [array (
  'trace' => '
#0: ../wp-content/plugins/elementor-pro/core/app/modules/site-editor/data/endpoints/templates.php(150): Elementor\Core\Logger\Manager -> rest_error_handler()
#1: ElementorPro\Core\App\Modules\SiteEditor\Data\Endpoints\Templates -> normalize_template_json_item()
#2: ../wp-content/plugins/elementor-pro/core/app/modules/site-editor/data/endpoints/templates.php(120): class type array_map()
#3: ../wp-content/plugins/elementor-pro/core/app/modules/site-editor/data/endpoints/templates.php(59): ElementorPro\Core\App\Modules\SiteEditor\Data\Endpoints\Templates -> normalize_templates_json()
#4: ../wp-content/plugins/elementor/data/base/endpoint.php(158): ElementorPro\Core\App\Modules\SiteEditor\Data\Endpoints\Templates -> get_items()
',
)]
PHP: 2024-05-17 16:33:14 [notice X 4][../wp-content/plugins/elementor/includes/managers/image.php::113] Trying to access array offset on value of type bool [array (
  'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]
PHP: 2024-05-17 16:41:28 [notice X 1][../wp-content/plugins/elementor-pro/modules/dynamic-tags/acf/tags/acf-text.php::33] Undefined offset: 1 [array (
  'trace' => '
#0: Elementor\Core\Logger\Manager -> shutdown()
',
)]

JS: showing 2 of 2JS: 2024-05-17 16:33:09 [error X 3][../wp-admin/load-scripts.php?c=1&loadchunk_0=jquery-core,jquery-migrate,utils,wp-polyfill-inert,regenerator-runtime,wp-polyfill,wp-hooks&ver=6.4.4:2:28760] Cannot read properties of undefined (reading 'value') 
JS: 2024-05-17 17:04:56 [error X 1][../wp-content/plugins/elementor/assets/lib/backbone/backbone.marionette.min.js?ver=2.4.5.e1:24:19952] View (cid: "view73") has already been destroyed and cannot be used. 



== Elementor - Compatibility Tag ==
	
	Elementor Pro: Compatible

== Elementor Pro - Compatibility Tag ==

Agreement

• I agree that my issue may be closed without action if it doesn't meet all the requirements.