wpherocoder.com Website

Menu
how to create custom elementor widget

How to Create Custom Elementor Widget

/ Plugins, Tutorials / By

Install the Elementor plugin within the WordPress website.

install elementor plugin

Create a new page within WordPress and name the page Custom Widget.

Click Edit with Elementor from the Custom Widget page.

create a new page called custom widget

I created a new installation of WordPress on my local computer and named it LearningWPThemes.

You can name the new WordPress website whatever you want.

If you are going to create the widget on a hosted WordPress server, you will need to access the File Manager area plugin folder.

CREATE THE PLUGIN

Open the plugins folder in the wp-content of the WordPress website.

Create a new folder and name it wpherocoder-elementor-widgets in the plugin folder.

setting up folder structure

Inside the wpherocoder-elementor-widgets folder create the plugin main file.

Create a new text file and rename it wpherocoder-elementor-widgets.php.

setting up file structure

Open the wpherocoder-elementor-widgets.php file in a text editor application.

Open the file to edit in vs code.


Add the plugin declaration inside the wpherocoder-elementor-widgets.php file.

<?php
/**
* Plugin Name: WPHeroCoder Elementor Widgets
* Description: Elementor custom widgets from WPHeroCoder.
* Plugin URI: https://wpherocoder.com/plugins
* Version: 1.0.0
* Author: WPHEROCODER
* Author URI: https//wpherocoder.com/
* Text Domain: wpherocoder-elementor-widget
*
* Elementor tested up to: 3.5.0
* Elementor Pro tested up to: 3.5.0
*/

Click on save and go to the WordPress plugins area and click refresh and you will see the new plugin added.

Click Activate to (ACTIVATE the Plugin) within WordPress.

activate plugin

The WPHeroCoder Elementor Widgets it active.

Go back to the editor and start adding the code to build the plugin functions.

Add the lines of code to your wpherocoder-elementor-widgets.php file.

// Used for Security
if ( ! defined( ‘ABSPATH’ ) ) {
    // Exit if accessed directly.
    exit;
}
 
/**
 * Register Widget.
 *
 * Include widget file and register widget class.
 *
 * @since 1.0.0
 * @param \Elementor\Widgets_Manager $widgets_manager Elementor widgets manager.
 * @return void
 */
function register_wpherocoder_custom_widgets( $widgets_manager ) {

    require_once( __DIR__ . ‘/widgets/card-widget.php’ ); // include the widget file

    $widgets_manager->register( new \WPHeroCoder_Elementor_Card_Widget() );  // register the widget

}
add_action( ‘elementor/widgets/register’, ‘register_wpherocoder_custom_widgets’ );  // action hook

Here is what we have so far:

register widget

Next, we need to create a new widgets folder within our plugins wpherocoder-elementor-widgets folder.

add widget folder

Click inside the new widgets folder and create a new file and name it card-widget.php file.

You will need to create a txt file and then name it card-widget and change the txt extension to php.

New file called:    card-widget.php

create widget file

Open the card-widget.php in the text editor and add the code to build the functionality of the card widget.

Place the code in the card-widget.php file.

<?php
// Used for Security
if ( ! defined( ‘ABSPATH’ ) ) {
    // Exit if accessed directly.
    exit;
}

/**
 * WPHeroCoder Elementor Card Widget.
 *
 * WPHeroCoder widget that inserts a card with title and description.
 *
 * @since 1.0.0
 */
class WPHeroCoder_Elementor_Card_Widget extends \Elementor\Widget_Base {
    // the class name must be the exact name that is in wpherocoder-elementor-widget.php file.
    //new \WPHeroCoder_Elementor_Card_Widget() on line 34.

    // our widget code goes here.   
}
 

We will keep building the functionality of the card widget.

class WPHeroCoder_Elementor_Card_Widget extends \Elementor\Widget_Base {
    // the class name must be the exact name that is in wpherocoder-elementor-widget.php file.
    //new \WPHeroCoder_Elementor_Card_Widget() on line 34.

    /**
     * Get widget name.
     *
     * Retrieve Card widget name.
     *
     * @since 1.0.0
     * @access public
     * @return string Widget name.
     */
    public function get_name(){
        // id of the Widget
        return ‘card’;
    }

    /**
     * Get widget title.
     *
     * Retrieve Card widget title.
     *
     * @since 1.0.0
     * @access public
     * @return string Widget title.
     */
    public function get_title(){
        // retruns the readable name of the Widget.
        return esc_html__(‘WPHeroCoder Card’, ‘wpherocoder-elementor-widget’);  // Text Domain
    }     
}
 

Here is a sample of what we have so far.

card widget code

The get_title will show the name of the icon widget within Elementor environment toolbox, see the example below.

Open the Custom Widget page and edit with Elementor.

wpherocoder card widget elementor

Next, we will change the icon of the widget.

Here is a whole list of icons that you can use in Elementor.

https://elementor.github.io/elementor-icons/

/**
     * Get widget icon.
     *
     * Retrieve Card widget icon.
     *
     * @since 1.0.0
     * @access public
     * @return string Widget icon.
     */
    public function get_icon(){
        // show the icon that you want displayed in the toolbox of elementor.
        return ‘eicon-header’;  // here is a list of all the icons used for elementor.
        //https://elementor.github.io/elementor-icons/
    }
 

// HELP for your users

If you want to display help from your widget add the following function.

/**
     * Get custom help URL.
     *
     * Retrieve a URL where the user can get more information about the widget.
     *
     * @since 1.0.0
     * @access public
     * @return string Widget help URL.
     */
    public function get_custom_help_url(){
        // display the URL for help files from your website.
        return ‘https://wpherocoder.com/category/elementor-tutorial/’;
    }
 

Here is what was changed in the Elementor toolbox.

create need help in elementor

Next, we are going to create the GET Categories function.

In our example the widget is placed in the general dropdown section.

We could have chosen to put our widget in any of the categories that Elementor offers.

You can find the control under the General tab. (we can place the widget in different categories).

/**
     * Get widget categories.
     *
     * Retrieve the list of categories the Card widget belongs to.
     *
     * @since 1.0.0
     * @access public
     * @return array Widget categories.
     */
    public function get_categories(){
        // the widget will be displayed under the General area of Elementor.
        return [ ‘general’];  // General.  
        //Layout
        //Basic
        //Pro
        //General
        //Site
        //Single
        //WooCommerce
        //WordPress      
    }
 

Next, we are going to create the keyword’s function.

When you type out the keywords in the widget search textbox this function will help users find the widget.

/**
     * Get widget keywords.
     *
     * Retrieve the list of keywords the Card widget belongs to.
     *
     * @since 1.0.0
     * @access public
     * @return array Widget keywords.
     */
    public function get_keywords(){
        // in Elementor in the searching widget textbox when you type any of these search keywords the user can find the widget.
        return [ ‘card’, ‘service’, ‘highlight’, ‘wpherocoder’];  //.          
    }
 
Next, we are going to add the function register_controls to the code.
 
/**
     * Register Card Widget controls.
     *
     * Add input fields to allow the user to customize the widget settings.
     *
     * @since 1.0.0
     * @access protected    
     */
    protected function register_controls(){
        // the control function code will go here.
        $this->start_controls_section(
            ‘content_section’,
            [
                ‘label’ => esc_html__( ‘Content’, ‘wpherocoder-elementor-widget’ ),
                // https://developers.elementor.com/docs/editor-controls/regular-control/
                ‘tab’ => \Elementor\Controls_Manager::TAB_CONTENT,
            ]
        );
       
        // input field control goes here

 

        $this->end_controls_section();
    }
 

Still inside the register_controls we are going to code the add_control function.

We are adding the TEXT control.

$this->add_control(
            ‘card_title’,
            [
                ‘label’ => esc_html__( ‘Card Title’, ‘wpherocoder-elementor-widget’ ),
                ‘type’ => \Elementor\Controls_Manager::TEXT,
                ‘label_block’ => true,
                ‘placeholder’ => esc_html__( ‘Your card title here’, ‘wpherocoder-elementor-widget ‘),
            ]
        );
 
Here is a sample of what we have so far. 
card title code

Here is what is happening in the Elementor widget.

We created the Card Title and input box.

card title widget in elementor

Next, we are going to code the TEXTAREA control of the widget.

// TEXTAREA control
        $this->add_control(
            ‘card_description’,
            [
                ‘label’ => esc_html__( ‘Card Description’, ‘wpherocoder-elementor-widget’ ),
                ‘type’ => \Elementor\Controls_Manager::TEXTAREA,
                ‘label_block’ => true,
                ‘placeholder’ => esc_html__( ‘Your card description here’, ‘wpherocoder-elementor-widget ‘),
            ]
        );
card description code

Here is what is happening in the Elementor widget.

card description widget in elementor

Next, we are going to code the Render part of the widget that will be displayed on the front end of the Custom Widget page.

// Display that widget on the page
    /**
     * Render Card widget output on the frontend.
     *
     * Written in PHP and used to generate the final HTML.
     *
     * @since 1.0.0
     * @access protected
     */
    protected function render() {
        // get the input from the widget settings.
        $settings = $this->get_settings_for_display();

        // get the individual values of the input
        $card_title = $settings[‘card_title’];
        $card_description = $settings[‘card_description’];

        ?>

        <!– Start rendering the output –>
        <div class=”cards”>
            <h3 class=”card_title”><?php echo $card_title; ?></h3>
            <p class=”card__description”><?php echo $card_description; ?></p>
        </div>
        <!– End rendering the output –>

        <?php
    }
 

Open the Custom Widget page to view the widget.

The widget displays the title and description.

custom widget view on frontend

STYLE:

We are going to create the Style tab in the Elementor menu toolbox for our widget.

// style controls
        $this->start_controls_section(
            ‘section_style’,
            [
                ‘label’ => esc_html__( ‘Style’, ‘wpherocoder-elementor-widget’ ),                
                ‘tab’ => \Elementor\Controls_Manager::TAB_STYLE,
            ]
        );

        $this->end_controls_section(); // STYLE

 

Here is what we have so far.

card style code

Here is what it will look like in Elementor.

You should see the Style section.

You won’t see any functionality under the style yet.

We will code that next.

card style widget in elementor

Write the code to add the heading for the style.

// adds the heading
        $this->add_control(
            ‘title_options’,
            [
                ‘label’ => esc_html__( ‘Title Options’, ‘wpherocoder-elementor-widget’ ),
                ‘type’ => \Elementor\Controls_Manager::HEADING,
                ‘separator’ => ‘before’, //border before the heading.
            ]
        );
 

Here is what it will look like in Elementor.

card style title options widget in elementor

Next, we are going to write the code of Color control.

We are going to code the widget giving it a default color of Red (#f00).

// add the color control
        $this->add_control(
            ‘title_color’,
            [
                ‘label’ => esc_html__( ‘Color’, ‘wpherocoder-elementor-widget’ ),
                ‘type’ => \Elementor\Controls_Manager::COLOR,
                // this will force the color red.
                ‘default’ => ‘#f00’,
                ‘selectors’ => [
                    //'{{WRAPPER}} h3′ => ‘color: {{VALUE}}’,
                    ‘{{WRAPPER}} .card_title’ => ‘color: {{VALUE}}’,    // card_title color.                
                ],
            ]
        );
 

Here is what we have so far in the code editor.

card style title color code

Here is what it will look like in Elementor – Remember that we have coded default with Red (#f00) but I changed it to green.

Give it a try, change the color of the control and pick any color. 

card style title color in elementor

Next, we are going to code the title typography section.

// add the title typography
        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                ‘name’ => ‘title_typography’,
                // ‘selector’ => ‘{{WRAPPER}} h3’,
                ‘selector’ => ‘{{WRAPPER}} .card_title’,   // card_title typography.
            ]
        );
 
Here is what we have so far in the code editor.
card style title typograhpy code

Here is what our widget looks like in Elmenetor.

card style title typography in elementor

Now we are going to code the description area of the Elementor widget.

// the description area //

 

        // adds the heading
        $this->add_control(
            ‘description_options’,
            [
                ‘label’ => esc_html__( ‘Description Options’, ‘wpherocoder-elementor-widget’ ),
                ‘type’ => \Elementor\Controls_Manager::HEADING,
                ‘separator’ => ‘before’, //border before the heading.
            ]
        );

 

        // add the color control
        $this->add_control(
            ‘description_color’,
            [
                ‘label’ => esc_html__( ‘Color’, ‘wpherocoder-elementor-widget’ ),
                ‘type’ => \Elementor\Controls_Manager::COLOR,
                // this will force the color red.
                ‘default’ => ‘#f00’,
                ‘selectors’ => [
                    //'{{WRAPPER}} h3′ => ‘color: {{VALUE}}’,
                    ‘{{WRAPPER}} .card_description’ => ‘color: {{VALUE}}’,    // card_description color.                
                ],
            ]
        );

 

        // add the typogrhphy for description
        $this->add_group_control(
            \Elementor\Group_Control_Typography::get_type(),
            [
                ‘name’ => ‘description_typography’,
                // ‘selector’ => ‘{{WRAPPER}} h3’,
                ‘selector’ => ‘{{WRAPPER}} .card_description’,   // card_description typography.
            ]
        );
 
Here is what we have so far in code editor.
description area code

Here is what it will look like in Elementor.

Remember that we have coded default with Red (#f00) but I changed it to blue by changing the color picker.

final card widget in elementor

Next view the Custom Widget page and you can see the output on the front end.

Conclusion

Hopefully now you have a good understanding of how widgets are built in Elementor.