Solvedelementor Include custom templates in Elementor template library (Not My template)

Prerequisites

  • I have searched for similar features requests in both open and closed tickets and cannot find a duplicate.
  • The feature is still missing in the latest stable version of Elementor ( Elementor Pro. )

What problem is your feature request going to solve? Please describe.
Allow developers to include their custom templates/blocks in Elementor Template Library.

I know there are many issue about the custom library like #454 and #3127.. But those issue are about improving My templates. Mine is not about My templates, it's about to append templates to Elementor built-in library.

Describe the solution you'd like
My solution is very simple, just extending the data of the library. The idea here is adding custom template data to Elementor library data, host those templates on developer's server, and then allow template data can be download from there. By doing that, developers can include their custom template by a plugin or theme.

  • Library data is loaded from remote http://my.elementor.com/api/v1/info and save to elementor_remote_info_library key. We can alter this data by one of following:

    • Developer update that key manually, no change in Elementor source required. Get that option key, unserialize, add custom data, serialize, then save it again.
    • Add a filter to get_info_data function to allow developer include their custom data when Elementor update library or when user syncs the library manually.
  • Currently, Elementor downloads template from http://my.elementor.com/api/v1/templates/%d only. To support templates hosted on developer's server, we can add a filter to function get_template_content allows developer to hook in there and add their custom logic to retrieve template data from their server. IMO, only a filter on $url is needed. The developer job is providing an API that return similar response as Elementor API does.

34 Answers

βœ”οΈAccepted Answer

@dinhtungdu Sure, feel free to use this idea! If you want, you can give me credit by mentioning my name with a link pointing to the URL displayed on my GitHub profile :-)

@sf-steve Well, since you can override the whole list of templates with the hook I've shared, you could technically fetch templates from your own source using wp_remote_get. You just need to make sure the data returned has the same format as the one used by the default source. To see how the default data is formatted, open the console in Chrome, click on the "Sync Library" button, and inspect the request (see attached screenshot for an example)

data

This is not the only way to do it though, but this is clearly the easiest way.

By the way it's already possible to replace the default remote source with your own, and it has been possible for many years. I've once replaced the default source with my own on a WP multisite environment, all templates were saved on the main site (with blog ID = 1), and all subsites were able to fetch the list of saved templates from the main site instead of fetching them from the default source.

I might eventually release a plugin that allows anyone to replace the default remote source with their own source if I have enough time, but meanwhile, for those who want to get started, you can do the following:

add_action( 'elementor/init', 'register_custom_remote_source' );

/**
 * Basically Replace Default Remote source with a custom one.
 */
function register_custom_remote_source() {
	// Deregister the default remote source first. Not sure that this is particularly needed but better be safe than sorry.
	\Elementor\Plugin::instance()->templates_manager->unregister_source( 'remote' );

	// Then include your own source which will have the "remote" id.
	\Elementor\Plugin::instance()->templates_manager->register_source( 'Elementor\TemplateLibrary\Custom_Remote_Source' );
}

Then, you must create a class for your custom source. You can see how the current sources are built by taking a look at the remote.php, local.php and base.php files found in the /elementor/includes/template-library/sources/ directory. The simplest would probably be to copy the whole Source_Remote class, changing its name for Custom_Remote_Source, and then edit the methods of the class so it works as you want. For my multisite solution, my custom source is a mix of modified methods found in remote.php and local.php files.

Your custom source should be defined this way (this is not a complete example, and it's not tested!):

<?php
namespace Elementor\TemplateLibrary;

use Elementor\Api;
use Elementor\Plugin;

if ( ! defined( 'ABSPATH' ) ) {
	exit; // Exit if accessed directly.
}

/**
 * Elementor template library remote source.
 *
 * Elementor template library remote source handler class is responsible for
 * handling remote templates from Elementor.com servers.
 *
 * @since 1.0.0
 */
class Custom_Remote_Source extends Source_Base {

	/**
	 * Get remote template ID.
	 *
	 * Retrieve the remote template ID.
	 *
	 * @since 1.0.0
	 * @access public
	 *
	 * @return string The remote template ID.
	 */
	public function get_id() {
		return 'remote'; // IMPORTANT: don't change this value.
	}

	/**
	 * Get remote template title.
	 *
	 * Retrieve the remote template title.
	 *
	 * @since 1.0.0
	 * @access public
	 *
	 * @return string The remote template title.
	 */
	public function get_title() {
		return __( 'Remote', 'elementor' ); // You can change this value if you want
	}

	/**
	 * Register remote template data.
	 *
	 * Used to register custom template data like a post type, a taxonomy or any
	 * other data.
	 *
	 * @since 1.0.0
	 * @access public
	 */
	public function register_data() {
		// Anything in this method will be executed on every page load.
	}

	/**
	 * Get remote templates.
	 *
	 * Retrieve remote templates from Elementor.com servers.
	 *
	 * @since 1.0.0
	 * @access public
	 *
	 * @param array $args Optional. Filter templates list based on a set of
	 *                    arguments. Default is an empty array.
	 *
	 * @return array Remote templates.
	 */
	public function get_items( $args = [] ) {
		// This is where you will fetch the data from your custom source!
		// Compare this method in the 'remote.php' and 'local.php' files so you can 
		// see what can be done here. You can fetch anything from an 
		// external source, or even build your own WP Query.
		$templates = array();

		// Populate the $templates var with anything you want here.

		return $templates;
	}

	/**
	 * Get remote template.
	 *
	 * Retrieve a single remote template from a custom source.
	 *
	 * @since 1.0.0
	 * @access public
	 *
	 * @param int $template_id The template ID.
	 *
	 * @return array Remote template.
	 */
	public function get_item( $template_id ) {
		// This is where you must make sure the data from a specific template is processed correctly
		// based on your custom remote source. Make sure to fill the values expected in the array!

		$data = [
			'template_id' => $template_id,
			'source' => $this->get_id(),
			'type' => 'block', // value expected: block, page, popup...
			'title' => 'NAME OF THE TEMPLATE',
			'thumbnail' => 'YOUR THUMBNAIL URL',
			'date' => 'THE DATE',
			'human_date' => date_i18n( get_option( 'date_format' ), 'THE DATE' ),
			'author' => 'AUTHOR NAME',
			'hasPageSettings' => false, // expect true or false based on your needs
			'tags' => array(),
			'export_link' => $this->get_export_link( $template_id ), 
			'url' => 'YOUR TEMPLATE URL',
		];
		return $data;
	}

	/**
	 * Get remote template data.
	 *
	 * Retrieve the data of a single remote template from a custom source.
	 *
	 * @since 1.5.0
	 * @access public
	 *
	 * @param array  $args    Custom template arguments.
	 * @param string $context Optional. The context. Default is `display`.
	 *
	 * @return array Remote Template data.
	 */
	public function get_data( array $args, $context = 'display' ) {
		// You should take a look at the local.php and remote.php files to see what must be done here.

		return $data;
	}
}

Now, you have everything you need to override the default remote source ;-)

Other Answers:

Can we have some detail about your idea?

@dinhtungdu @juanpasolano @simopetrelli @stevecove @ihsansahab @tomasvanrijsse @pulla

There is no need to wait, we can already do what you're asking for since a while. You simply need to do it differently. Here's an example for filtering all pro templates from the list. But basically, you could append new templates the same way.

Simply add the following in your functions.php file (or build a plugin with it if needed) and edit it as needed:

add_action( 'pre_update_option_elementor_remote_info_library', 'hide_pro_templates', 10, 3 );

    /**
     * Hide pro templates from the list of available templates.
     *
     * @param  array  $value  The new, unserialized option value.
     * @return array  $value  The filtered value, with Elementor Pro templates excluded.
     */
function hide_pro_templates( $value ) {
	if ( ! empty( $value['templates'] ) ) {
		// CHANGE THE LIST OF TEMPLATES HERE
		$normal_templates = wp_list_filter( $value['templates'], array( 'is_pro' => '1' ), 'NOT' );
		if ( ! empty( $normal_templates ) ) {
			$value['templates'] = $normal_templates;
		}
	}
	return $value;
}

Like I said, in this example, I'm removing the pro templates from the library, but it's just so you can see what can be done. Simply use var_dump( $value ) to see how the data is displayed, and add your custom templates by modifying the value of $value['templates'].

In order to see the changes in the library, you might need to refresh it by pressing on the refresh button, since the array is edited when updating the 'elementor_remote_info_library' option (which is updated when refreshing the templates).

This would be great, especially if it allowed us as theme Devs to filter out the existing prebuilt templates. It's one of the main hurdles we have (along with being able to create custom widgets with drop zones aka custom sections) in bringing elementor into our larger projects.

Related Issues:

27
elementor Accordion - setting for all closed at start
Yeah not seeing a fix in 1.8.x but here's some code you should be able to copy/paste without modding...
19
elementor πŸ“£ Elementor v3.1 Beta 4 Release πŸ“£
As most of the users has been hungry for performance and custom breakpoint improvement ...
15
elementor data-tab link anchor to tabs
Here is my function as I could not wait :) For anyone who needs it :) Hey ...
15
elementor Add Filters and Hooks to Search Form Widget
@pako69 If you need to force Elementor's search to only use a specific post type lets say product fo...
14
elementor Popup - Close when you click on a button
@JoeDarko Currently this feature is not supported but we will look into it in the future if we see a...
14
elementor Improve performance: Reduce DOM elements
If you have concrete suggestions for reducing the number of DOM elements - we are open to hearing it...
13
elementor How to hide some Elementor Pro widgets from the frontend editor?
@norewp - thank you The following is sample code for removing everything (for now > I suppose in the...
12
elementor Include custom templates in Elementor template library (Not My template)
@dinhtungdu Sure feel free to use this idea! If you want Prerequisites I have searched for similar f...
12
elementor Triggering a popup by using a class or custom JS code
@bkjproductions (and for anyone else looking for a JS only solution) you can use: In the example abo...
9
elementor "Edit with Elementor" sub menu item in admin bar not showing on WordPress 5.6
This works for me.. add to your site CSS: #wp-admin-bar-elementor_edit_page:hover > div { display: b...
9
elementor Elementor 1.9 - Beta Release (RC3 Updated)
v1.9 Beta Version RC3 We just released a new beta version please update your version to v1.9.0 RC3 ...
8
elementor My templates -> Display Conditions: support polylang for localisation
@ziogaschr Elementor can't guess which multilingual 3rd party plugin you are using and we don't want...
8
elementor ACF relationship field as Posts source
This was such a pain in the ass Thank you for finally solving this I'm confused as to why this isn't...
6
elementor Elementor v2.9 Beta 5 (RC3) Release πŸ“£
We just released a new beta version please update your version to v2.9 Beta 2 =========== Beta 5 UPD...
6
elementor πŸ“£ Elementor v3.2 Beta 4 Release πŸ“£
The following snippet was recommended to remove eicons: Please confirm this is still applicable for ...
6
elementor Elementor Popup doesnt run with Contact Form 7
Hello @hazelnutz77 Here is a tidier and more versatile piece of code: Add this to your functions.php...
5
elementor πŸš€ Elementor v3.4 Beta 5 Release πŸš€
@fabianenzensperger - thanks for your feedback We are aware about the UI problem with the global fon...
5
elementor Animated Headline Do Not Loop?
Not the most graceful solution but you can do this with some CSS How can i make the animated headlin...
4
elementor "javascript:history.back()" bug since last update
Hi @Code711 Thanks for your input We removed the option to add JavaScript to the URL to avoid potent...
4
elementor BUG: Tabs Widget content enlarges from top left corner when switching tab (after latest updates)
So here is how I temporarily solved this issue a bit hackish solution but it works: It helped in my ...
4
elementor Add "Child Pages of Parent" To "Posts" Widget
@stevenmonson This can be easily done using Custom Query Filter ex: It would be so nice if the Posts...
4
elementor limit DATE fields in Elementor Forms
I just figured this out and I thought it would be useful for everyone because I haven't managed to f...
4
elementor Elementor Pro Bug: The Cards Skin displays only one Badge
@ramiy Not a bug this is the way it works Now as a feature request this should be possible with #444...
4
elementor Pop up menu closing on clicking link
@ErwinvanDeutekom You can use JS to catch a click on a link in your popup and trigger a close action...
3
elementor Elementor Pro Forms MailChimp Conditional Opt-in Field
I needed this functionality too I couldn't (quickly) find usable hooks in Elementor ...
3
elementor Elementor seems to break swiperJS (5.3.0) breakpoint settings (swiper navigation not working)
With Elementor Version 2.9.1 the situation improved but is not fixed completely ...
3
elementor Shape divider above content after updating Elementor.
Hello It's not an Elementor update issue We have the same on 3.0 and 2.9 The problem is only on Chro...
3
elementor How do I change the Date Format in Forms?
You can follow the solution given here: #3605 (comment) minus the translation part ...
192
theme ui Syntax error: pragma and pragmaFrag cannot be set when runtime is automatic.
Just adding here in case anyone sees this error message after upgrading a project to create-react-ap...
94
server Upgrade fails with - Column name "oc_flow_operations.entity" is "NotNull", but has empty string or null as default
I just got this error while upgrading from 17.0.10 to 18.0.10 Also with me the column entity did not...
44
server Thunderbird 60.x unable to use caldav/carddav
By disabling the newly introduced parameter network.cookie.same-site.enabled the problem can be solv...
41
server Redirect loop login / Renewing session token failed
Hello I had a similar issue regarding the redirect mine was related to url overwrite protocol option...
37
bulma [Feature] SASS division without slash
I've just created a fix/divide branch Will merge and release today. This is about Bulma ...
29
materialize Changes for v1.0.0
There are some more issues I would consider to be included in v1.0.0 I think we should consider to r...
27
ant design landing ValidationError: Invalid options object. Less Loader has been initialized using an options object that does not match the API schema.
temporary way to fix this problem:ant-design/ant-design#23624 😒 remove less-loader@6.0.6 and instal...
26
bulma Importing Bulma in Create React App
For posterity's sake When importing Bulma in Create React App if you do this: You'll receive this er...
26
server Security and config warnings
Finally got this sorted as well How to use GitHub Please use the πŸ‘ reaction to show that you are af...
23
server Syntax error or access violation: 1118 Row size too large
Changing the ROW_FORMAT to DYNAMIC did not solve the issue Steps to reproduce Run Nextcloud 16.0.0 f...
21
materialize Can't select options or scroll in select input on mobile
I found the solution! With the meta viewport like this work fine for me <meta name=viewport content=...
18
materialize [1.0.0.alpha1] Side nav doesn't work with turbolinks 5
seem like instance still alive when turbolinks:load page it works if we destroy the existing instanc...
18
server [Nextcloud 15] Nextcloud clients cannot log in after upgrading from 15.0.0 to 15.0.2
nextcloud/android#3430 TL;DR: try adding this to your config.php: 'overwriteprotocol' => 'https', ...
18
server [Updater] Could not find resource js/config.js to load
Same issue on Nextcloud 20 PHP 7.4.3 MYSQL 8 APACHE2 Web server error logs How to use GitHub Please ...
18
blueprint First-class support for @import'ing blueprint scss files
@Ciantic It does work with the generated .css files you have to use the Webpack alias resolution ~ c...
17
materialize different colors for different toasts
In Updated Version It's something like: I would like to show the toast like Saved Successfully Pleas...
16
materialize Can't check RadioButtons or Checkbox inside input-fields div
The best solution is to not wrap the checkboxes in the .input-field class Another solution is to add...
16
server Failed Code Integrity because of EXTRA_FILE after Update from 16.0.1 to 16.0.2
Okay so for everyone getting this two things: Delete the cypress.json and the cypress folder in the ...
16
server OSX calendar sync fails (via caldav)
@dhowe I managed to get it working on High Sierra if I select the advanced profile when adding a new...
16
theme ui integrating theme-ui with storybook in a gatsby project
I managed to fix this with the below main.js storybook config As @hasparus says you can force storyb...
13
MaterialDesignInXamlToolkit Could not load file or assembly 'MaterialDesignColors, Culture=neutral' or one of its dependencies
For folks still encountering this issue: this post by Carlos Anderson explains what's going on: Ther...
12
materialize Error with Meteor 1.6-rc7 and node-sass 4.5.2
Not resolved for me I also did a fresh install of Meteor 1.6.0.1 and meteor add materialize:material...