Create Custom Elementor Element

Elementor creates live design & inline editing, This whole process of writing and designing will be done directly on the page, there is no requirement to press update or preview mode.

We can also create a custom elementor element in the backend.

Insert the following code into the function.php or in the custom plugin.

class ElementorCustomElement {

  private static $instance = null;

  public static function get_instance() {
    if ( ! self::$instance )
      self::$instance = new self;
    return self::$instance;
  }

  public function init(){
    add_action( 'elementor/init', array( $this, 'widgets_registered' ) );
  }

  public function widgets_registered() {

    // We check if the Elementor plugin has been installed and activated.
    if(defined('ELEMENTOR_PATH') && class_exists('Elementor\Widget_Base')){

      // We look for any theme overrides for this custom element.
      // If no theme overrides found we use a default one in this plugin.

      $widget_file = 'plugins/elementor/my-widget.php';
      $template_file = locate_template($widget_file);
      if ( !$template_file || !is_readable( $template_file ) ) {
        $template_file = plugin_dir_path(__FILE__).'my-widget.php';
      }
      if ( $template_file && is_readable( $template_file ) ) {
        require_once $template_file;
      }
    }
    if ( defined( 'ELEMENTOR_PATH' ) && class_exists( 'Elementor\Widget_Base' ) ) {
      // get our own widgets up and running:
      // copied from widgets-manager.php

      if ( class_exists( 'Elementor\Plugin' ) ) {
        if ( is_callable( 'Elementor\Plugin', 'instance' ) ) {
          $elementor = Elementor\Plugin::instance();
          if ( isset( $elementor->widgets_manager ) ) {
            if ( method_exists( $elementor->widgets_manager, 'register_widget_type' ) ) {

              $widget_file   = 'plugins/elementor/my-widget.php';
              $template_file = locate_template( $widget_file );
              if ( $template_file && is_readable( $template_file ) ) {
                require_once $template_file;
                Elementor\Plugin::instance()->widgets_manager->register_widget_type( new Elementor\Widget_My_Custom_Elementor_Thing() );

              }
            }
          }
        }
      }
    }
  }
}

ElementorCustomElement::get_instance()->init();

Now we create the custom Elementor widget. We will put this into the my-widget.php file in the theme folder ‘wp-content/themes/my-theme/plugins/elementor/my-widget.php‘.

<?php
namespace Elementor;

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

class Widget_My_Custom_Elementor_Thing extends Widget_Base {

  public function get_name() {
    return 'my-custom-element';
  }

  public function get_title() {
    return __( 'Learn More >', 'elementor-custom-element' );
  }

  public function get_icon() {
    return 'fa fa-mouse-pointer';
  }

  protected function _register_controls() {

    $this->start_controls_section(
      'btn_section',
      [
        'label' => esc_html__( 'Learn More >', 'elementor-custom-element' ),
      ]
    );
    

    $this->add_control(
      'btn_text',
      [
        'label' => __( 'Text', 'elementor-custom-element' ),
        'type' => Controls_Manager::TEXT,
        'default' => '',
        'title' => __( 'Enter Button Text', 'elementor-custom-element' ),
      ]
    );
    
    $this->add_control(
      'btn_url',
      [
        'label' => __( 'Link', 'elementor-custom-element' ),
        'type' => Controls_Manager::URL,
        'dynamic' => [
          'active' => true,
        ],
        'placeholder' => __( 'https://your-link.com', 'elementor-custom-element' ),
        'default' => [
          'url' => '#',
        ],
      ]
    );

    $this->add_control(
      'btn_icon',
      [
        'label' => __( 'Icon', 'elementor-custom-element' ),
        'type' => Controls_Manager::ICONS,
        'default' => '',
      ]
    );
    
    $this->add_control(
      'btn_icon_color',
      [
        'label' => __( 'Icon Color', 'elementor-custom-element' ),
        'type' => Controls_Manager::COLOR,
        'default' => '#54595F',
      ]
    );
    
    $this->add_control(
      'btn_hover_icon_color',
      [
        'label' => __( 'Icon Hover Color', 'elementor-custom-element' ),
        'type' => Controls_Manager::COLOR,
        'default' => '#B12B2B',
      ]
    );
    
    $this->add_control(
      'btn_text_color',
      [
        'label' => __( 'Text Color', 'elementor-custom-element' ),
        'type' => Controls_Manager::COLOR,
        'default' => '#54595F',
      ]
    );

    $this->add_control(
      'bg_color',
      [
        'label' => __( 'Background Color', 'elementor-custom-element' ),
        'type' => Controls_Manager::COLOR,
        'default' => '#6EC1E4',
      ]
    );
    
    $this->add_control(
      'btn_hover_text_color',
      [
        'label' => __( 'Text Hover Color', 'elementor-custom-element' ),
        'type' => Controls_Manager::COLOR,
        'default' => '#B12B2B',
      ]
    );

    $this->add_control(
      'bg_hover_color',
      [
        'label' => __( 'Background Hover Color', 'elementor-custom-element' ),
        'type' => Controls_Manager::COLOR,
        'default' => '#61CE70',
      ]
    );
    
    $this->add_control(
      'btn_class',
      [
        'label' => __( 'Class', 'elementor-custom-element' ),
        'type' => Controls_Manager::TEXT,
        'default' => '',
        'title' => __( 'Enter Button Class', 'elementor-custom-element' ),
      ]
    );
    
    $this->add_control(
      'btn_id',
      [
        'label' => __( 'ID', 'elementor-custom-element' ),
        'type' => Controls_Manager::TEXT,
        'default' => '',
        'title' => __( 'Enter Button ID', 'elementor-custom-element' ),
      ]
    );
    
    $this->end_controls_section();

  }

  protected function render( $instance = [] ) {

    // get our input from the widget settings.
    $settings = $this->get_settings_for_display();
    //~ print_r($settings);
    $btn_text = ! empty( $settings['btn_text'] ) ? $settings['btn_text'] : 'Learn More';
    $btn_url = ! empty( $settings['btn_url'] ) ? $settings['btn_url'] : '#';
    $btn_icon = $settings['btn_icon'];
    
    ?>

    <a href="<?php echo esc_attr( $btn_url['url'] ); ?>" class="learn_more <?php echo esc_attr( $settings['btn_class'] ); ?>" id="<?php echo esc_attr( $settings['btn_id'] ); ?>">
      <span><?php echo esc_html( $btn_text ); ?></span>
      <?php 
      if(!empty($btn_icon['value'])) {
        if($btn_icon['library']=="svg") {
        ?>
          <img src="<?php echo esc_attr( $btn_icon['value']['url'] ); ?>" style="height:16px;" />
        <?php } else { ?>
          <i class="<?php echo esc_attr( $btn_icon['value'] ); ?>" aria-hidden="true"></i>
        <?php 
        } 
      } 
      ?>
    </a>
    <style>
      a.learn_more {
        display: table-row;
      }
      a.learn_more span {
        padding: 5px 25px;
        font-size: 16px;
        display: table-cell;
        color: <?php echo esc_attr( $settings['btn_text_color'] ); ?>;
        background: <?php echo esc_attr( $settings['bg_color'] ); ?>;
      }
      a.learn_more:hover span {
        color: <?php echo esc_attr( $settings['btn_hover_text_color'] ); ?>;
        background: <?php echo esc_attr( $settings['bg_hover_color'] ); ?>;
      }
      a.learn_more i {
        border-left: 1px solid black;
        padding: 12px;
        color: <?php echo esc_attr( $settings['btn_icon_color'] ); ?>;
        background: <?php echo esc_attr( $settings['bg_color'] ); ?>;
        display: table-cell;
      }
      a.learn_more img {
        border-left: 1px solid black;
        padding: 12px;
        background: <?php echo esc_attr( $settings['bg_color'] ); ?>;
        display: table-cell;
      }
      a.learn_more:hover i {
        color: <?php echo esc_attr( $settings['btn_hover_icon_color'] ); ?>;
        background: <?php echo esc_attr( $settings['bg_hover_color'] ); ?>;
      }
      a.learn_more:hover img {
        color: <?php echo esc_attr( $settings['btn_hover_icon_color'] ); ?>;
        background: <?php echo esc_attr( $settings['bg_hover_color'] ); ?>;
      }
    </style>
    <?php

  }

  protected function content_template() {}

  public function render_plain_content( $instance = [] ) {}

}

Each widget required to set a few primary settings like a name that the widget will be identified by in the code, a title that will be used as the widget label, and an icon. We have extra settings like the widget controls which are generally the fields where the user selects his custom data and the render script that generates the final output will be as per the user’s data from the widget controls.

Here we have created a custom button elementor element with the different controls like name, URL, icon, colors, hover colors, class, id, etc.

Our custom element is here. Now drag it to the editing space.

We can design the button colors, text, URL, icon, class, and id from the left panel.