There is a time in every WordPress developer’s life when they must, on occasion, wear a suit and tie. They also may have to create Elementor posts or pages programmatically. Both are unfortunate situations, and while I can offer solutions to both, today we are going to focus just on the programming bit and leave your decision between tweed or corduroy up to you.
Pro-Tip: Elbow patches on a blazer will improve your TTIS (time to imposter syndrome) by at least 15 minutes, as the crow flies, during a corporate sales meeting or interview.
Why Would We Ever Need To Programmatically Make Elementor pages!? Doesn’t this defeat the purpose of using a page builder?!
No. It’s actually kind of awesome.
At Solid Digital we recently had a situation where a client wanted Elementor based pages automatically generated when a WooCommerce product was created. Imagine you need 3 custom Elementor pages created for each new instance of a product. These pages take in custom data supplied by different “vendors” for adding their own look and feel for how the products are displayed. Think custom fonts for headers, custom colors for text and buttons, etc. The client also wanted these pages to remain editable with Elementor.
The Set-Up
Our designers were tasked with creating award-winning and crowd-pleasing designs for 3 different page templates that we saved as templates using the “Save as Template” functionality. These page templates were built from smaller section templates to create breathtaking user experiences with fully optimized SEO content. To read more about the different templates within Elementor, take a look at our deep dive into Elementor Templates.
The Execution
We now have 3 Elementor page layout templates that we will use to create dynamically generated pages. Let’s grab a template to make a page. Elementor templates are stored with a post type of “elementor_library.” We can use this information and the template’s name to retrieve it:
<?php
// Query WP to get a handle on the template were going to copy
$query = new WP_Query([
'post_type' => 'elementor_library',
'name' => 'my_template_name',
'posts_per_page' => 1
]);
// No need to set up The Loop - we just want one post
$template = $query->found_posts ? $query->posts[0] : false;
We now have the template we want to use in-memory; next, we need to create our page by copying the content of the template into a new page.
<?php
$page = array(
'post_type' => 'page',
'post_title' => 'My Dynamic Page Title',
'post_name' => 'My Dynamic Page Title',
// Copy the content from the template
'post_content' => $template->post_content,
'post_status' => 'publish',
'post_author' => get_current_user_id(),
);
If we were to visit the new page at this point, it wouldn’t look like an Elementor page.
Once we have a post/page ID, we can set the metadata (this is where most of the magic happens) to flag this page as being managed by Elementor. There are multiple key metadata values that have to be set correctly either as hardcoded values or as copies from the values of the original template.
<?php
// Set the WordPress template to use
update_post_meta($pageId, '_wp_page_template', 'elementor_canvas');
// Make sure you don’t have to click on “Edit With Elementor”
// the first time you access the page
update_post_meta($pageId, '_elementor_edit_mode', 'builder');
// There are a few other parameters needed to make the page work
update_post_meta($pageId, '_elementor_template_type', 'wp-page');
update_post_meta($pageId, '_elementor_version', ELEMENTOR_VERSION);
update_post_meta($pageId, '_elementor_pro_version', ELEMENTOR_PRO_VERSION);
update_post_meta($pageId, '_elementor_css', '');
// Fetch the Elementor settings, data, assets, and controls from
// the template, so they can be copied to the new page
$settings = get_post_meta($template->ID, '_elementor_page_settings', true);
$data = json_decode(get_post_meta($template->ID, '_elementor_data', true), true);
$assets = get_post_meta($template->ID, '_elementor_page_assets', true);
$controls = get_post_meta($template->ID, '_elementor_controls_usage', true);
// Copy the Elementor setting, data, assets, and controls into
// the new page
update_post_meta($pageId, '_elementor_page_settings', $settings);
update_post_meta($pageId, '_elementor_data', $data);
update_post_meta($pageId, '_elementor_page_assets', $assets);
update_post_meta($pageId, '_elementor_controls_usage', $controls);
The most difficult part is making sure to update all the required meta fields.
The new page will now look the same as the template, and when visiting the page from the front end, you’ll be able to immediately edit it with Elementor.
Remember, it’s not about how good the page builder makes the page look, it’s about how good you look when you don’t have to use the page builder at all to create new pages.
