![How to Create Custom Elementor Widget in WordPress How to Create Custom Elementor Widget in Wordpress](https://technology.hitdeals.in/wp-content/uploads/2023/07/how-to-create-custom-elementor-widget-in-wordpress.webp)
How to Create Custom Elementor Widget in WordPress
Creating a custom Elementor widget in WordPress involves using PHP to define the widget’s functionality and controls, and using HTML/CSS for the widget’s frontend output. Here’s a step-by-step guide to creating a basic custom Elementor widget:
Step 1: Set Up Your Plugin File Structure
Create a new folder for your custom Elementor widget plugin in the WordPress plugins directory. Inside the folder, create the main plugin file (e.g., custom-elementor-widget.php
). This file will contain the plugin metadata and initialization code.
Step 2: Define the Plugin Metadata
Open custom-elementor-widget.php
and add the plugin metadata. At a minimum, it should include the plugin name, version, author, and description:
<?php
/*
Plugin Name: Custom Elementor Widget
Version: 1.0
Author: Your Name
Description: A custom Elementor widget.
*/
Step 3: Enqueue the Elementor Widget Script and Style
In the same custom-elementor-widget.php
file, enqueue the necessary JavaScript and CSS files for your custom Elementor widget:
<?php
function custom_elementor_widget_enqueue_assets() {
// Register the Elementor widget script
wp_register_script(
'custom-elementor-widget',
plugin_dir_url(__FILE__) . 'js/custom-elementor-widget.js',
array('jquery', 'elementor-frontend'),
'1.0',
true
);
// Enqueue the Elementor widget script
wp_enqueue_script('custom-elementor-widget');
// Enqueue the Elementor widget CSS
wp_enqueue_style(
'custom-elementor-widget-style',
plugin_dir_url(__FILE__) . 'css/custom-elementor-widget.css'
);
}
add_action('elementor/frontend/after_register_scripts', 'custom_elementor_widget_enqueue_assets');
Step 4: Create the Elementor Widget Class
In the same custom-elementor-widget.php
file, define your custom Elementor widget class:
<?php
class Custom_Elementor_Widget extends \Elementor\Widget_Base {
public function get_name() {
return 'custom-elementor-widget'; // Replace with your widget name
}
public function get_title() {
return __('Custom Elementor Widget', 'custom-elementor-widget'); // Replace with your widget title
}
public function get_icon() {
return 'fa fa-star'; // Replace with an appropriate Font Awesome icon
}
public function get_categories() {
return ['general']; // Replace with the desired category for your widget
}
protected function _register_controls() {
// Define your widget controls here
$this->start_controls_section(
'section_content',
[
'label' => __('Content', 'custom-elementor-widget'),
]
);
$this->add_control(
'title',
[
'label' => __('Title', 'custom-elementor-widget'),
'type' => \Elementor\Controls_Manager::TEXT,
'default' => __('Custom Widget Title', 'custom-elementor-widget'),
]
);
// Add more controls as needed
$this->end_controls_section();
}
protected function render() {
// Widget frontend output
$settings = $this->get_settings_for_display();
$title = $settings['title'];
echo '<div class="custom-elementor-widget">';
echo '<h3>' . esc_html($title) . '</h3>';
// Add more HTML/CSS for your widget frontend
echo '</div>';
}
protected function _content_template() {
// Render the widget content in the editor for a live preview
?>
<div class="custom-elementor-widget">
<h3>{{{ settings.title }}}</h3>
<!-- Add more HTML/CSS for your widget frontend in the editor -->
</div>
<?php
}
}
// Register the Elementor widget class
function custom_elementor_widget_init() {
\Elementor\Plugin::instance()->widgets_manager->register_widget_type(new Custom_Elementor_Widget());
}
add_action('elementor/widgets/widgets_registered', 'custom_elementor_widget_init');
Step 5: Create the JavaScript File for the Widget
Create a new folder named js
in your plugin directory, and inside it, create a file named custom-elementor-widget.js
. This file will contain any JavaScript functionality for your widget.
jQuery(document).ready(function($) {
// Add any JavaScript code for your widget here
});
Step 6: Create the CSS File for the Widget
Create a new folder named css
in your plugin directory, and inside it, create a file named custom-elementor-widget.css
. This file will contain the CSS styles for your widget.
/* Add any CSS styles for your widget here */
.custom-elementor-widget {
/* Widget styles */
}
Step 7: Customize Your Widget
In the Custom_Elementor_Widget
class, you can customize the widget’s controls (settings), frontend output, and live preview (in the _content_template()
method). Modify the HTML and CSS within the render()
method to match your desired frontend output.
Step 8: Activate Your Plugin
Activate your custom Elementor widget plugin in the WordPress admin panel (Plugins > Installed Plugins).
Now, when you edit a page with Elementor, you should find your custom widget in the Elementor widget list under the “General” category. You can then drag and drop it onto your page, customize its settings, and see the live preview in the Elementor editor.
Remember to replace all placeholders (e.g., custom-elementor-widget
) with your own specific names and customize the widget according to your needs. This example shows a basic custom Elementor widget, but you can extend it with more controls, functionalities, and styles as required.