plugin development - How to Insert Elementor Elements with CSS and JS into a Custom Post Type Using wp_insert_post()?

Closed. This question is off-topic. It is not currently accepting answers.

---

Your question should be specific to WordPress. Generic PHP/JS/SQL/HTML/CSS questions might be better asked at Stack Overflow or another appropriate Stack Exchange network site. Third-party plugins and themes are off-topic for this site; they are better asked about at their developers' support routes.

Closed 9 days ago.

Improve this question

I am building an e-commerce website to sell online invitation templates. After purchasing a template, customers need to edit the template they've bought. To facilitate this, I created a custom post type called edit-invitation.

Here’s the process I’ve implemented so far:

I wrote a function that:

• Triggers when an order status changes to "completed."
• Generates a unique slug for each invitation template using the product name and a hash derived from the order key.
• Retrieves the Elementor content from the purchased product and inserts it into a new custom post of type edit-invitation.

Here's the code for my function:

function rudr_complete_for_status($order_id) {
    $order = wc_get_order($order_id);
    $order_key = $order->get_order_key();
    $order_key_part = substr($order_key, 9);

    foreach ($order->get_items() as $item_id => $item) {
        $product = $item->get_product();

        if ($product) {
            $product_id = $product->get_id();
            $formatted_product_name = strtolower(str_replace(' ', '-', $product->get_name()));
            $combined_string = $formatted_product_name . '-' . $order_key_part;
            $hashed_string = hash('sha256', $combined_string);

            // Retrieve Elementor content
            $post_content = \Elementor\Plugin::$instance->frontend->get_builder_content($product_id);

            // Insert new custom post with Elementor content
            wp_insert_post(array(
                'post_type'    => 'edit-invitation',
                'post_title'   => '#' . $order->get_id() . ' - ' . $order->get_billing_first_name() . ' ' . $order->get_billing_last_name() . ' - ' . $hashed_string,
                'post_name'    => $hashed_string,
                'post_content' => $post_content,
                'post_status'  => 'publish'
            ));
        }
    }
}
add_action('woocommerce_order_status_completed', 'rudr_complete_for_status');

The issue: The HTML elements from Elementor are successfully added to the edit-invitation posts. However, the corresponding CSS and JavaScript files are not included, so the content doesn’t render as expected.

I want to include the Elementor CSS and JavaScript files so that the content is displayed correctly. How can I achieve this?

Here is my single-edit-invitation.php file:

<?php 

class ccg002_singleEditInvitationTemplate {
    static function ei_single_template($single_template_edit_invitation) {
        global $post;

        if ($post->post_type === 'edit-invitation') {
            // Load header
            wp_head();

            if (class_exists('Elementor\Plugin')) {
                echo \Elementor\Plugin::instance()->frontend->get_builder_content_for_display(the_content(), true);
            }

            // Load footer
                wp_footer();
    
                // Stop the default WordPress template rendering
                exit();
            }
    
            return $single_template_edit_invitation;
        }
    }
    
    ?>

Does anyone know how to include all necessary Elementor assets (CSS and JS) for these custom posts? Any help or suggestions are much appreciated!