Custom elementor widgets with programming

In this blog, 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.

When creating an Extension for Elementor you should implement all the WordPress coding standards and best practices. In addition, you should follow its standards and best practices.
The extensions should implement object-oriented programming. It should have a main class and extra classes for smaller parts like custom Elementor Widgets or any other components.

The main plugin class should have basic information about the extensions, to check basic requirements and load the required files to activate the plugin functionality.

Step 1. Creating your own Elementor widget

To create a widget for the Elementor 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 Elementor 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 includes inside your plugin’s directory, and create a new file called class-webkul-elementor-widget.php inside it.
• Add the following code to the class-webkul-elementor-widget.php file:
• Include file in function.php file.

Step 2. Create a widget

<?php
/**
 * Elementor Widget.
 */

/**
 * Create a widget class and extend elementor widget class.
 */
class Webkul_Elementor_Widget  extends Elementor\Widget_Base {

	/**
	 * Widget name
	 *
	 * @return void
	 */
	public function get_name() {
		return 'Add content';
	}

	/**
	 * Widget title.
	 *
	 * @return void
	 */
	public function get_title() {
		return esc_html__( 'Add content', 'webkul' );
	}

	/**
	 * widget icon(more icon: https://elementor.github.io/elementor-icons/ )
	 *
	 * @return void
	 */
	public function get_icon() {
		return 'eicon-code';
	}

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

	/**
	 * Widget search keywords
	 *
	 * @return void
	 */
	public function get_keywords() {
		return array( 'Webkul', 'Add content', 'content', 'description' );
	}


	/**
	 * Show output
	 *
	 * @return void
	 */
	public function render() {
		echo '<p>';
		echo "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. ";
		echo '</p>';
	}
}

Step 3. Register widget

/**
 * Register widget.
 */
add_action( 'elementor/widgets/register', 'Register_custom_widget' );

function Register_custom_widget( $widgets_manager ) {
	include plugin_dir_path( __FILE__ ) . 'widget/class-Webkul-Elementor-widget.php';
	$widgets_manager->register( new Webkul_Elementor_Widget() );
}

Final Output

Full Code

<?php
/**
 * Plugin Name: Webkul custom elementor widget
 * Plugin URI: http://www.webkul.com
 * Description: create a own custom elementor wight with help of programming.
 * Author: Webkul
 * Author URI: http://www.webkul.com
 * Version: 1.0.0
 *
 * Domain Path: /languages/
**/

/**
 * Create a widget class and extend elementor widget class.
 */
class Webkul_Elementor_Widget  extends Elementor\Widget_Base {

    /**
     * Widget name
     *
     * @return void
     */
    public function get_name() {
        return 'Add content';
    }

    /**
     * Widget title.
     *
     * @return void
     */
    public function get_title() {
        return esc_html__( 'Add content', 'webkul' );
    }

    /**
     * widget icon(more icon: https://elementor.github.io/elementor-icons/ )
     *
     * @return void
     */
    public function get_icon() {
        return 'eicon-code';
    }

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

    /**
     * Widget search keywords
     *
     * @return void
     */
    public function get_keywords() {
        return array( 'Webkul', 'Add content', 'content', 'description' );
    }


    /**
     * Show output
     *
     * @return void
     */
    public function render() {
        echo '<p>';
        echo "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.";
        echo '</p>';
    }
}


/**
 * Register widget.
 */
add_action( 'elementor/widgets/register', 'Register_custom_widget' );

function Register_custom_widget( $widgets_manager ) {
    include plugin_dir_path( __FILE__ ) . 'widget/class-Webkul-Elementor-widget.php';
    $widgets_manager->register( new Webkul_Elementor_Widget() );
}

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