Create Custom Elementor Widgets in WordPress

Home
Blog
How to Create Custom Elementor Widgets for WordPress

Quick Summary:

In this article, we will provide a step-by-step guide on how to create a custom widget for the Elementor page builder plugin for WordPress. We will show you how to use the Elementor API to build your widget, add custom controls and settings, and display the values of those controls on the frontend. By the end of this article, you will have a working WordPress plugin that you can use to add your custom widget to any page or post on your website.

What is Elementor?

Elementor is a powerful WordPress page builder plugin that provides a visual, drag-and-drop interface for creating beautiful websites without any coding. This makes it an essential tool for those involved in WordPress development, as it simplifies web design with a range of elements, known as widgets, that can be easily customized and arranged to build responsive and interactive pages. By leveraging Elementor, developers can enhance their workflow, allowing them to focus on more complex functionalities while delivering visually appealing sites that meet client expectations.

What is an Elementor Widget?

An Elementor widget is a modular component that you can use to build pages in WordPress using the Elementor editor. Widgets provide various functionalities, such as text editing, image display, forms, buttons, sliders, and more. You can simply drag and drop these widgets onto the page, customizing them to fit your website’s design and functionality requirements.

Default Elementor Widgets

Elementor comes with a variety of built-in widgets that cater to most web development needs. These include elements like headings, images, buttons, forms, and galleries, among others. Each widget can be customized through a set of options that control its appearance, content, and behavior. The default widgets cover the basics, but if you need more advanced or unique features, you can create a custom widget tailored to your specific needs.

Prerequisites

Before diving into the development of a custom Elementor widget, it’s important to have a basic understanding of a few key areas:

WordPress Development: Familiarity with WordPress development, including creating plugins, themes, using hooks and actions, is essential.
PHP and JavaScript: Knowledge of PHP and JavaScript is required to build and customize widgets.
Elementor API: Understanding the Elementor API and its structure will help you navigate the development process more effectively. You can explore the Elementor Developer Documentation to learn more about its APIs and functionalities.

How to Create a Custom Elementor Widget: A Step-by-Step Guide

Creating a custom Elementor widget involves setting up a development environment, understanding the Elementor widget structure, and writing the necessary code to define the widget’s behavior and appearance. Let’s go through each step:

Step 1: Setting Up the Development Environment

To create a custom Elementor widget, you need to set up a proper development environment on your WordPress installation.

Install WordPress: Ensure you have a local or staging WordPress installation to work with.
Install and Activate Elementor: Download and activate the Elementor plugin from the WordPress Plugin Directory.
Create a Child Theme or Custom Plugin: It is recommended to create a child theme or a custom plugin to keep your custom widgets separate from core files, ensuring that your changes remain intact during updates.

Step 2: Understanding Elementor’s Structure

Elementor widgets are organized into components such as controls, renderers, and scripts/styles:

Controls: These are the settings available in the Elementor editor that allow users to customize the widget (e.g., text input, color picker).
Renderers: These handle how the widget content is displayed on the front end of the site.
Scripts and Styles: Any additional scripts or styles required for the widget’s functionality.

Step 3: Creating a Basic Custom Widget

We will create a simple custom widget called “Custom Alert Box” that displays an alert message with customizable text and background color.

1. Create a New Plugin

To keep the custom widget organized, create a new custom plugin:

Go to wp-content/plugins and create a new folder named custom-elementor-widgets.
Inside this folder, create a file named custom-elementor-widgets.php.

Add the following code to the custom-elementor-widgets.php file to define the plugin:

<?php
/**
* Plugin Name: Custom Elementor Widgets
* Description: A plugin to add custom widgets to Elementor.
* Version: 1.0
* Author: Your Name
*/
// Prevent direct access.
if ( ! defined( 'ABSPATH' ) ) {
   exit;
}
// Register the widget.
function register_custom_elementor_widgets( $widgets_manager ) {
   require_once __DIR__ . '/widgets/custom-alert-widget.php';
   $widgets_manager->register( new \Custom_Alert_Widget() );
}
add_action( 'elementor/widgets/register', 'register_custom_elementor_widgets' );

2. Create the Custom Widget Class

Create a new folder named widgets inside the custom-elementor-widgets folder. Then, create a file named custom-alert-widget.php inside the widgets folder.

Add the following code to the custom-alert-widget.php file:

<?php
if ( ! defined( 'ABSPATH' ) ) {
  exit; // Exit if accessed directly.
}
class Custom_Alert_Widget extends \Elementor\Widget_Base {
  public function get_name() {
      return 'custom_alert_widget';
  }
  public function get_title() {
      return __( 'Custom Alert Widget', 'custom-elementor-widgets' );
  }
  public function get_icon() {
      return 'eicon-alert';
  }
  public function get_categories() {
      return [ 'basic' ];
  }
  protected function register_controls() {
      $this->start_controls_section(
          'section_content',
          [
              'label' => __( 'Content', 'custom-elementor-widgets' ),
          ]
      );
      $this->add_control(
          'alert_text',
          [
              'label'   => __( 'Alert Text', 'custom-elementor-widgets' ),
              'type'    => \Elementor\Controls_Manager::TEXT,
              'default' => __( 'This is a custom alert box!', 'custom-elementor-widgets' ),
          ]
      );
      $this->add_control(
          'background_color',
          [
              'label'   => __( 'Background Color', 'custom-elementor-widgets' ),
              'type'    => \Elementor\Controls_Manager::COLOR,
              'default' => '#FF0000',
          ]
      );
      $this->end_controls_section();
  }
  protected function render() {
      $settings = $this->get_settings_for_display();
      echo '<div style="background-color: ' . esc_attr( $settings['background_color'] ) . '; padding: 15px;">';
      echo esc_html( $settings['alert_text'] );
      echo '</div>';
  }
}

3. Register and Render the Widget

In the custom-alert-widget.php file, we have defined several key functions:

get_name(): Specifies a unique name for the widget.
get_title(): Sets the widget’s title as it appears in Elementor.
get_icon(): Defines the icon displayed in the Elementor panel. You can explore more icons from the Elementor Icons Library.
get_categories(): Specifies the category for the widget in Elementor.
register_controls(): Defines the controls available in the Elementor editor, like text input and color picker. Learn more about controls in the Elementor Controls Documentation.
render(): Handles the output rendering on the front end.

Step 4: Previewing Your Custom Widget

After successfully creating your custom widget, navigate to any page or post editor using Elementor. You should see your new “Custom Alert Widget” available in the widget panel under the ‘Basic’ category.

Step 5: Advantages of Custom Elementor Widgets

Creating custom Elementor widgets provides several benefits:

Enhanced Functionality: Add unique features that are not available in the default Elementor widgets.
Greater Control: Customize the widget’s appearance and behavior to match your specific needs.
Reusable Components: Once created, custom widgets can be reused across multiple projects, saving time and effort.
Performance Optimization: Optimize the code for better performance and faster load times.

Conclusion

Creating a custom Elementor widget is an excellent way to extend the functionality of your WordPress site and offer more tailored experiences for your users. This approach is particularly beneficial for a WordPress development company, as it enables you to create unique solutions that stand out in a competitive market. By following the steps outlined above, you can develop your own widgets and gain full control over the design and functionality of your website. For more advanced features and customization, refer to the Elementor Developer Documentation.

Web

WordPress