Custom elementor widgets with programming

In this guide, we explain how to build a custom widget for the Elementor page builder in WordPress.

We will walk through the complete process step by step.

As a result, you can extend Elementor with your own functionality.

What You Will Learn

First, you will learn how to use the Elementor API. Next, you will add controls and settings to the widget.

Then, you will display dynamic data on the frontend. By the end, you will have a working plugin for pages and posts.

Step 1. Creating your own Elementor widget

To create a widget for the page builder plugin for WordPress, you will need to use the Elementor API.

Here is a step-by-step guide on how to do this:

• Install the plugin on your WordPress website if you haven’t already.
• Create a new directory in the wp-content/plugins directory on your WordPress site, and give it a name that describes your widget (e.g. webkul-elementor-widget).

• This code defines the basic information about your plugin, such as its name, description, and author.
• Next, create a new directory called  ‘webkul-elementor-widget‘  inside your plugin’s directory, and create a new file called webkul-elementor-widget.php inside it.

Step 2. Create a widget

class Webkul_Elementor_Widget extends \Elementor\Widget_Base {

		/**
		 * Returns the name of the widget.
		 *
		 * Used to generate the translation of the widget name.
		 */
		public function get_name() {
			return 'webkul_add_content';
		}

		/**
		 * * Return the title of the page.
		 *
		 * @return string
		 */
		public function get_title() {
			return esc_html__( 'Add Content', 'webkul' );
		}

		/**
		 * @return string
		 * @param void
		 */
		public function get_icon() {
			return 'eicon-code';
		}

		/**
		 * @return array
		 * @param void
		 */
		public function get_categories() {
			return array( 'general' );
		}

		/**
		 * Return the keywords of the widget.
		 */
		public function get_keywords() {
			return array( 'webkul', 'content', 'description' );
		}

		/**
		 * Register widget controls.
		 *
		 * Adds different input fields to allow the user to change and customize the widget settings.
		 */
		protected function register_controls() {

			$this->start_controls_section(
				'content_section',
				array(
					'label' => esc_html__( 'Content', 'webkul' ),
					'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
				)
			);

			$this->add_control(
				'text',
				array(
					'label'   => esc_html__( 'Text', 'webkul' ),
					'type'    => \Elementor\Controls_Manager::TEXT,
					'default' => esc_html__( 'Lorem Ipsum...', 'webkul' ),
				)
			);

			$this->end_controls_section();
		}

		/**
		 * * Render the widget content.
		 */
		public function render() {
			$settings = $this->get_settings_for_display();
			echo '<p>' . esc_html( $settings['text'] ) . '</p>';
		}
	}

Step 3. Load the widget only after Elementor is ready

/**
 * Load widget only after Elementor is ready
 */
add_action(
	'plugins_loaded',
	function () {

		if ( ! did_action( 'elementor/loaded' ) ) {
			return;
		}

		add_action( 'elementor/widgets/register', __NAMESPACE__ . '\register_custom_widget' );
	}
);

Final Output

Full Code

<?php
/**
 * Plugin Name: Webkul Custom Elementor Widget
 * Plugin URI: https://www.webkul.com
 * Description: Create a custom Elementor widget using programming.
 * Author: Webkul
 * Author URI: https://www.webkul.com
 * Version: 1.0.0
 * Text Domain: webkul
 */

namespace Webkul\Elementor;

if ( ! defined( 'ABSPATH' ) ) {
	exit;
}


/**
 * Load widget only after Elementor is ready
 */
add_action(
	'plugins_loaded',
	function () {

		if ( ! did_action( 'elementor/loaded' ) ) {
			return;
		}

		add_action( 'elementor/widgets/register', __NAMESPACE__ . '\register_custom_widget' );
	}
);

/**
 * Register widget
 */
function register_custom_widget( $widgets_manager ) {

	// class Webkul_Elementor_Widget.
	class Webkul_Elementor_Widget extends \Elementor\Widget_Base {

		/**
		 * Returns the name of the widget.
		 *
		 * Used to generate the translation of the widget name.
		 */
		public function get_name() {
			return 'webkul_add_content';
		}

		/**
		 * * Return the title of the page.
		 *
		 * @return string
		 */
		public function get_title() {
			return esc_html__( 'Add Content', 'webkul' );
		}

		/**
		 * @return string
		 * @param void
		 */
		public function get_icon() {
			return 'eicon-code';
		}

		/**
		 * @return array
		 * @param void
		 */
		public function get_categories() {
			return array( 'general' );
		}

		/**
		 * Return the keywords of the widget.
		 */
		public function get_keywords() {
			return array( 'webkul', 'content', 'description' );
		}

		/**
		 * Register widget controls.
		 *
		 * Adds different input fields to allow the user to change and customize the widget settings.
		 */
		protected function register_controls() {

			$this->start_controls_section(
				'content_section',
				array(
					'label' => esc_html__( 'Content', 'webkul' ),
					'tab'   => \Elementor\Controls_Manager::TAB_CONTENT,
				)
			);

			$this->add_control(
				'text',
				array(
					'label'   => esc_html__( 'Text', 'webkul' ),
					'type'    => \Elementor\Controls_Manager::TEXT,
					'default' => esc_html__( 'Lorem Ipsum...', 'webkul' ),
				)
			);

			$this->end_controls_section();
		}

		/**
		 * * Render the widget content.
		 */
		public function render() {
			$settings = $this->get_settings_for_display();
			echo '<p>' . esc_html( $settings['text'] ) . '</p>';
		}
	}

	$widgets_manager->register( new Webkul_Elementor_Widget() );
}

For more details, you can follow the document. See the blog, click here