If you want to stand out from the competitors in today’s digital world, you must be able to customize the appearance of your website. With the help of an incredible feature, users of Elementor, one of the most well-known page builders, may construct their websites directly on the screen, realizing their visions. But the true brilliance is in its widgets.
The foundation of Elementor is the widgets that enable you to easily integrate different components and capabilities into your website. Elementor is notable for its exceptional adaptability. Although Elementor provides a wide range of pre-made widgets, its ability to build custom widgets is what performs the magic. This degree of personalization guarantees that your website matches your own aesthetic and satisfies all of your particular needs. You may freely design a genuinely unique online presence with Elementor that embodies your brand and connects with your target market.
Introduction to Elementor Widgets
With the help of Elementor widgets, one can quickly and easily add all the necessary page-building components to their website, including a navigation menu, button, picture box, and many more adaptable elements. Without the widgets, the Elementor page builder is not complete. Users have an abundance of alternatives to improve the look and feel of their websites with the use of Elementor widgets.
Create Elementor widgets – Step-by-step Guide
Although Elementor comes with a bundle of widgets, sometimes it happens that you are unlikely to get all the required widgets in these addons. This is where the need for Elementor custom widgets arises to fulfill your needs. Now that we understand the fundamentals, it’s time to dig in and do some work. To develop your first Elementor widget, let’s move!
Make sure you have all the prerequisites in place before you start building custom Elementor widgets. Here are a few important prerequisites to think about:
1) Knowledge of PHP: Since PHP is used to generate Elementor widgets, you’ll need to be well-versed in PHP programming fundamentals.
2) Knowledge of WordPress Development: You’ll need to have a firm grasp of WordPress development concepts, including how to make custom post types, taxonomies, and hooks.
3) Installed Elementor Plugin
4) Development Environment: Create a staging area or local development environment where you can securely test your widget code.
Elementor Widget Structure
Let’s first do a deep dive into the basics of Elementor widget creation. Creating a custom Elementor widget is similar to creating WordPress custom widgets.
- Widget Class – The first step is to extend the element or Widget Base Class – \Elementor\Widget_Base in order to create a widget
- Widget Methods – After this, you need to add the required methods like titles, functions, categories, etc. for that widget.
There are many more methods in the \Elementor\Widget_Base class, but in broader terms, it is classified into 5 main groups of data methods, categories, dependencies, controls, and rendering.
- Widgets Data Methods – Data methods consist of methods that return data like title, category, script dependency, icon etc. of widget. Some of the common functions of data methods are listed below:-
a) get_title() –
This returns the custom widget title to be displayed in Elementor Editor.
b) get_name() – This returns the custom widget title to be displayed in Elementor Editor.
c) get_icon() – This returns the custom widget icon to be displayed in Elementor Editor. We can use Elementor icons or any other image embedded through CSS.
d) get_categories() – Display the category of the widget.
e) get_script_depends() – If the widget depends on any specific Javascript, then we can include that through this method.
f) render() – This is the main method or the heart of the widget, which displays the output or final result of our widget, or the logic of functionality that resides in it.
g) get_keyword() – You can set widget keywords and filter the widget list using the get_keywords() method.
2) Widgets Categories – Elementor widgets have mostly some default categories like Basic, Pro, WooCommerce, WordPress, General, Site etc which we can assign to our widget.
But one can also create custom categories for the widgets if needed using the elementor/elements/categories_registered action like this-
function add_custom_category_to_custom_widget($elements_manager){
//We can define the category using add_category here with custom icon too.
}
▲
This we can then display in the custom widget by get_categories() method as defined in above Data methods.
3) Widget Dependencies – This is basically used to define the dependencies of custom script and style on widget. We need to include the script, style in Elementor and then using get_style_depends() and get_script_depends() we can call that css/js . We need to return our handle in function like this-
}
▲
4) Widget Controls –
Widget controls are the fields or settings that users can work with to alter the way a widget looks or behaves. Users can input text, photos, colours, figures, and other forms of data, or they can choose alternatives from dropdown menus using these controls.
While crafting custom widgets, one can define the customization options that users will have for a widget when they register it in Elementor by creating the widget controls. This entails defining the kind of control (text field, image selection, color picker, etc.), establishing default values, defining validation guidelines, and giving the user guidance in the form of labels or descriptions for each control.
These are essential for giving users flexibility and customization choices while utilizing Elementor widgets.
5) Widget Rendering – Rendering the output of the widget is the last step. The process of rendering includes creating the HTML content that will show up in the Elementor editor preview and on the front end.
Elementor has two primary rendering functions: render() and content_template(). These methods use render(), which uses PHP for frontend output, and content_template(), which uses JavaScript for editor preview, to produce the final result using the data collected from the widget controls.
Working with the data that the widget controls return is called rendering. This data can be used in a variety of ways using Elementor, such as printing it straight into the template, applying it to CSS rules, giving elements classes, and more.
EXAMPLE-
Let’s take a simple practical example in order to understand the above concepts. Here we need to create a widget that will “Image with Caption” that will let us add any image with a caption in Elementor. We will add it to the general category. Here are the steps for creating Custom Widget-
Step 1 – Create a plugin named “Elementor Custom Widget Demo.”.
Step 2 – Add the main file, elementor-custom-widget-demo.php
Steps 3- Create a widgets folder and add a file named as custom-widget-demo.php in this folder
So the hierarchy will be like this-
Elementor Custom Widget Demo
-widgets ->custom-widget-demo.php
-elementor-custom-widget-demo.phpp
Code for main plugin file elementor-custom-widget-demo.php
To check the code , Open the fold from here!
<?php
/**
* Plugin Name: Elementor Custom Widget Demo
* Description: Create custom Elementor widget
* Plugin URI: https://your-domain.com
* Author: your-domain.com
* Version: 1.1.1
* Author URI: https://your-domain.com
*
*/
if ( ! defined( ‘ABSPATH’ ) ) {
exit; // Exit if accessed directly.
}
function register_custom_demo_widget( $widgets_manager ) {
require_once( __DIR__ . ‘/widgets/custom-widget-demo.php’ );
$widgets_manager->register( new \Elementor_Custom_Demo_Widget() );
}
add_action( ‘elementor/widgets/register’, ‘register_custom_demo_widget’ );
?>
▲
This is the main plugin file where we will register the widget using the Elementor action.
Code of custom-widget-demo.php
To check the code, Open the fold from here!
| <?php if ( ! defined( ‘ABSPATH’ ) ) { exit; // Exit if accessed directly. } /** * Elementor Custom Demo Widget. */ class Elementor_Custom_Demo_Widget extends \Elementor\Widget_Base { // Define the widget name and title using get_name() and get_title() public function get_name() { return ‘image-with-caption-widget’; } public function get_title() { return __(‘Image with Caption’, ‘text-domain’); } // Define the widget icon public function get_icon() { return ‘eicon-image’; } // Define the widget categories public function get_categories() { return [‘general’]; } // Define the widget controls and settings protected function _register_controls() { $this->start_controls_section( ‘image_section’, [ ‘label’ => __(‘Image’, ‘text-domain’), ‘tab’ => \Elementor\Controls_Manager::TAB_CONTENT, ] ); $this->add_control( ‘image’, [ ‘label’ => __(‘Choose Image’, ‘text-domain’), ‘type’ => \Elementor\Controls_Manager::MEDIA, ‘default’ => [ ‘url’ => \Elementor\Utils::get_placeholder_image_src(), ], ] ); $this->add_control( ‘caption’, [ ‘label’ => __(‘Caption’, ‘text-domain’), ‘type’ => \Elementor\Controls_Manager::TEXT, ‘default’ => __(‘Image Caption’, ‘text-domain’), ‘placeholder’ => __(‘Enter your caption here’, ‘text-domain’), ] ); $this->end_controls_section(); } // Render the widget output using render() protected function render() { $settings = $this->get_settings_for_display(); echo ‘<div class=”image-with-caption-widget”>’; echo ‘<img src=”‘ . esc_url($settings[‘image’][‘url’]) . ‘” alt=”‘ . esc_attr($settings[‘caption’]) . ‘” />’; echo ‘<p>’ . esc_html($settings[‘caption’]) . ‘</p>’; echo ‘</div>’; } } |
▲
This is the main file in which we will extend the widget base class and define the title, icon, name, and functionality of the widget.
Output –
This will display the widget “Image with Caption” like below.
Conclusion
To sum up, building a custom Elementor widget is a fulfilling process that enables you to customize website parts to meet your particular requirements and expand the capabilities of Elementor. We’ve gone over all the necessary steps in making a widget in this tutorial, from grasping the fundamentals of Elementor widget building to adding sophisticated functionality.
You ought to be able to design your own Elementor widget by now, including defining the widget class, setting up the controls and settings, and generating the result. Now that you know this, you’re ready to go on your own widget-building journey.
