How To Create A New Element

To create any element for Switchers Free and Switchers Pro, we are following as closely as possible :

~ the Elementor free and pro plugin itself, before WebPack & BabelJS compiling

~ the practices laid out in the Elementor documentation

Note that the instructions here aren’t meant to be a complete tutorial on how to create an Element. It is presumed you have good knowledge of PHP and JavaScript, and can read and understand code examples well.

The Elementor Free and Pro code #

That’s the core source of how new elements should be coded. There are a few exceptions that will be mentioned, but for the most part, we want to replicate their coding strategy and practices.

We can see their pre production code easily on their Github, in:

~ the elementor/includes/widgets/ folder for the php of elements

~ the assets/dev/js/frontend/handlers/  folder for JS

Easier is to just search for the relevant element by clicking on Go To File.

Examples #

So if we need a carousel, we check how theirs is coded. Same goes for all elements.

In particular, we always use a Class for the JavaScript, and we extend the Base (for every element except sliders) and the SwiperBase (for slider elements).

Base example:

export default class SwitchersAccordion extends elementorModules.frontend.handlers.Base {
getDefaultSettings() {

SwiperBase example:

export default class SwitchersProCarousel extends elementorModules.frontend.handlers.SwiperBase {
getDefaultSettings() {

We use Swiper.JS for all interactive carousels and sliders.

The Elementor Documentation #

The elements #

You can refer to the Elementor documentation, or directly to their code, for how to create and setup new elements.

The controls #

You can refer to the Elementor documentation, or directly to their code, for the Controls and how they work.

Controls are the UI elements that’s allows the user to change the settings of our custom elements. Here is the Elementor documentation for them.

Let’sWP has some good tutorials on them as well:

Control Conditions in Elementor Extensions

Use Selectors in Elementor Widgets to Control CSS

Useful links #

Add JavaScript to Widgets

Adding to the document settings

Preparing the php file #

At the start of the file, you will need to import everything we require from Elementor. If you get a ‘can’t find’ error, it’s because the particular control you are adding isn’t imported.

<?php

use Elementor\Widget_Base;
use Elementor\Plugin;
use Elementor\Controls_Stack;
use Elementor\Controls_Manager;
use Elementor\Element_Base;
use Elementor\Utils;
use Elementor\Core\Kits\Documents\Tabs\Global_Colors;
use Elementor\Group_Control_Background;
use Elementor\Group_Control_Box_Shadow;
use Elementor\Group_Control_Css_Filter;
use Elementor\Group_Control_Image_Size;
use Elementor\Group_Control_Border;
use Elementor\Group_Control_Typography;
use Elementor\Group_Control_Text_Shadow;
use Elementor\Control_Media;

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

class Image_Carousel_Element extends Widget_Base {

...etc

Enqueuing the JS and CSS #

That’s something we can’t do the way Elementor does, because they don’t. They just bundle everything together, which isn’t good for optimization.

For some elements, we won’t need both a JS and CSS file, but only one of them.

For custom Elements #

The proper way is directly in the element’s PHP file, right at the start of the class:

export
class Switchers_Free_Toggler extends Widget_Base {

public function __construct($data = [], $args = null) {
parent::__construct($data, $args);
wp_register_script( 'sp-toggler', SWITCHERS_PRO_PLUGIN_URL . 'files/dist/js/sp-toggler.min.js', [ 'elementor-frontend' ], '1.0.0', true );
wp_register_style( 'sp-toggler', SWITCHERS_PRO_PLUGIN_URL . 'files/dist/css/sp-toggler.min.css');
}
public function get_script_depends() {
return [ 'sp-toggler' ];
}

public function get_style_depends() {
return [ 'sp-toggler' ];
}

...etc, rest of related code here

For extensions #

See How to Create an Extension.

Useful controls keys #

Prevent a specific control from being part of copy pasting styles:

‘style_transfer’ => false

General instructions #

Here are a few general principles we are trying to achieve in our elements and extensions:

Giving the user choices. #

This means whenever possible, we:

1. Add the controls for styling options the user might want.
2. Code in the functionality in the JS for what the user might want.
3. Make as many settings as possible responsive

Internationalization ready #

We use esc_html__( ‘Padding’, ‘plugin-name’ ), for all user facing strings so that it’s ready to be translated.