If you are using Elementor and find that it doesn’t have a specific widget that you need, you can create a custom widget using WordPress development. This allows you to add any functionality or content that is missing from the default Elementor widgets.
To create a custom widget, you can use the register_widget() function provided by WordPress. This function allows you to register a new widget class and make it available in the Elementor editor.
Here’s an example of how you can create a custom widget called “Custom Testimonial Widget” using the register_widget() function:
<?php
/**
* Custom Testimonial Widget
*/
class WPSnippets_Custom_Testimonial_Widget extends ElementorWidget_Base {
/**
* Get widget name.
*
* Retrieve Custom Testimonial Widget name.
*
* @return string Widget name.
*/
public function get_name() {
return 'custom-testimonial-widget';
}
/**
* Get widget title.
*
* Retrieve Custom Testimonial Widget title.
*
* @return string Widget title.
*/
public function get_title() {
return __( 'Custom Testimonial Widget', 'text-domain' );
}
/**
* Get widget icon.
*
* Retrieve Custom Testimonial Widget icon.
*
* @return string Widget icon.
*/
public function get_icon() {
return 'fa fa-quote-right';
}
/**
* Get widget categories.
*
* Retrieve the list of categories the widget belongs to.
*
* @return array Widget categories.
*/
public function get_categories() {
return [ 'general' ];
}
/**
* Render widget output on the frontend.
*
* Written in PHP and used to generate the final HTML.
*
* @param array $args Widget arguments.
* @param array $instance Widget instance.
*/
protected function render( $args, $instance ) {
// Widget frontend output
echo '<div class="testimonial-widget">';
echo '<h3>' . esc_html( $instance['title'] ) . '</h3>';
echo '<p>' . esc_html( $instance['content'] ) . '</p>';
echo '</div>';
}
/**
* Render widget output in the editor.
*
* Written in JS and used to generate the live preview.
*
* @param array $instance Widget instance.
*/
protected function _content_template() {
?>
<div class="testimonial-widget">
<h3>{{{ settings.title }}}</h3>
<p>{{{ settings.content }}}</p>
</div>
<?php
}
}
// Register the custom widget
function wpsnippets_register_custom_testimonial_widget() {
ElementorPlugin::instance()->widgets_manager->register_widget_type( new WPSnippets_Custom_Testimonial_Widget() );
}
add_action( 'elementor/widgets/widgets_registered', 'wpsnippets_register_custom_testimonial_widget' );
In this example, we define a new class WPSnippets_Custom_Testimonial_Widget that extends the ElementorWidget_Base class. This class contains various methods that define the widget’s properties and behavior.
The get_name(), get_title(), get_icon(), and get_categories() methods define the basic information of the widget, such as its name, title, icon, and categories.
The render() method is responsible for generating the widget’s output on the frontend. In this example, it simply outputs a testimonial with a title and content.
The _content_template() method is used to generate the live preview of the widget in the Elementor editor. It defines the HTML structure and placeholders for the widget’s settings.
Finally, we register the custom widget by creating a function wpsnippets_register_custom_testimonial_widget() and hooking it to the elementor/widgets/widgets_registered action. This ensures that the widget is registered and available in the Elementor editor.
Once you have added this code to your theme’s functions.php file or a custom plugin, you should be able to see the “Custom Testimonial Widget” in the Elementor editor’s widget panel. You can then drag and drop it onto your page and customize its settings as needed.
Examples
Example 1: Adding a Custom Elementor Widget
This use case demonstrates how to add a custom widget to Elementor using the elementor/widgets/widgets_registered action hook.
function wpsnippets_add_custom_elementor_widget() {
require_once 'path/to/custom-widget.php';
ElementorPlugin::instance()->widgets_manager->register_widget_type( new Custom_Widget() );
}
add_action( 'elementor/widgets/widgets_registered', 'wpsnippets_add_custom_elementor_widget' );
In this code example, we define a custom Elementor widget by creating a new class Custom_Widget in a separate PHP file. We then use the register_widget_type() method to register our custom widget with Elementor. The elementor/widgets/widgets_registered action hook ensures that our widget is added to the Elementor widgets manager.
Example 2: Modifying an Existing Elementor Widget
This use case demonstrates how to modify an existing Elementor widget by extending the widget class and overriding its methods.
class Custom_Elementor_Widget extends ElementorWidget_Base {
public function get_name() {
return 'custom-elementor-widget';
}
public function get_title() {
return 'Custom Elementor Widget';
}
// Override other methods as needed
}
In this code example, we create a new class Custom_Elementor_Widget that extends the ElementorWidget_Base class. By overriding methods such as get_name() and get_title(), we can customize the widget’s name and title. You can also override other methods to modify the widget’s behavior and output.
Example 3: Removing an Existing Elementor Widget
This use case demonstrates how to remove an existing Elementor widget using the elementor/widgets/widgets_registered action hook.
function wpsnippets_remove_elementor_widget() {
ElementorPlugin::instance()->widgets_manager->unregister_widget_type( 'existing-widget' );
}
add_action( 'elementor/widgets/widgets_registered', 'wpsnippets_remove_elementor_widget' );
In this code example, we use the unregister_widget_type() method to remove an existing Elementor widget with the slug ‘existing-widget’. By hooking into the elementor/widgets/widgets_registered action hook, we ensure that the widget is removed after it has been registered by Elementor.