Custom Elementor Widget
—
### **Steps to Create a Custom Elementor Widget**
1. **Create a Custom Plugin** (or use an existing one).
2. **Define the Widget Class**.
3. **Register Controls to Include the Headline Typography**.
4. **Render the Widget Output**.
5. **Enqueue Elementor’s Styles**.
—
### **Code for a Custom Elementor Widget**
Save this file in your custom plugin directory under `widgets/custom-headline-widget.php`:
<?php
if (!defined('ABSPATH')) exit; // Exit if accessed directly
class Custom_Headline_Widget extends ElementorWidget_Base {
public function get_name() {
return 'custom_headline_widget';
}
public function get_title() {
return __('Custom Headline Widget', 'plugin-name');
}
public function get_icon() {
return 'eicon-t-letter';
}
public function get_categories() {
return ['general'];
}
protected function _register_controls() {
$this->start_controls_section(
'content_section',
[
'label' => __('Content', 'plugin-name'),
'tab' => ElementorControls_Manager::TAB_CONTENT,
]
);
$this->add_control(
'headline_text',
[
'label' => __('Headline Text', 'plugin-name'),
'type' => ElementorControls_Manager::TEXT,
'default' => __('Custom Headline', 'plugin-name'),
'placeholder' => __('Enter headline text', 'plugin-name'),
]
);
$this->end_controls_section();
// Typography Controls from Headline Widget
$this->start_controls_section(
'style_section',
[
'label' => __('Style', 'plugin-name'),
'tab' => ElementorControls_Manager::TAB_STYLE,
]
);
$this->add_group_control(
ElementorGroup_Control_Typography::get_type(),
[
'name' => 'typography',
'label' => __('Typography', 'plugin-name'),
'selector' => '{{WRAPPER}} .custom-headline',
]
);
$this->add_control(
'text_color',
[
'label' => __('Text Color', 'plugin-name'),
'type' => ElementorControls_Manager::COLOR,
'selectors' => [
'{{WRAPPER}} .custom-headline' => 'color: {{VALUE}};',
],
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
?>
<h2 class="custom-headline"><?php echo esc_html($settings['headline_text']); ?></h2>
<?php
}
}
ElementorPlugin::instance()->widgets_manager->register_widget_type(new Custom_Headline_Widget());—
### **Register the Widget**
If you don’t already have a custom Elementor extension plugin, create one:
1. In `wp-content/plugins/`, create a folder: `custom-elementor-widgets`.
2. Inside this folder, create a file: `custom-elementor-widgets.php` and add:
<?php
/**
* Plugin Name: Custom Elementor Widgets
* Description: Adds a custom Elementor widget.
* Version: 1.0
* Author: Your Name
*/
if (!defined('ABSPATH')) exit; // Exit if accessed directly
function register_custom_headline_widget() {
require_once plugin_dir_path(__FILE__) . 'widgets/custom-headline-widget.php';
}
add_action('elementor/widgets/widgets_registered', 'register_custom_headline_widget');3. **Activate the Plugin** in WordPress.
4. The **Custom Headline Widget** will appear in Elementor.
—
### **How it Works**
– The **Typography settings** from Elementor's default **Headline Widget** are used.
– The widget supports:
– **Typography settings** (size, weight, line height, letter spacing, etc.).
– **Text Color**.
– It renders a **headline (`h2`)** with Elementor’s styling.
Let me know if you need modifications! 🚀