In order to create a custom Elementor widget you will need to get your hands dirty with some code, luckily for you, I have provided all the code needed so you can easily copy and paste it into your project and start tweaking it to your needs.
First of all create and add the following code to your files:
1. Add this code to my-widgets.php file
<?php
class My_Elementor_Widgets {
protected static $instance = null;
public static function get_instance() {
if ( ! isset( static::$instance ) ) {
static::$instance = new static;
}
return static::$instance;
}
protected function __construct() {
require_once('widget1.php');
add_action( 'elementor/widgets/widgets_registered', [ $this, 'register_widgets' ] );
}
public function register_widgets() {
\Elementor\Plugin::instance()->widgets_manager->register_widget_type( new \Elementor\My_Widget_1() );
}
}
add_action( 'init', 'my_elementor_init' );
function my_elementor_init() {
My_Elementor_Widgets::get_instance();
}
2. Add this code to widget1.php file
<?php
namespace Elementor;
class My_Widget_1 extends Widget_Base {
public function get_name() {
return 'title-subtitle';
}
public function get_title() {
return 'title & sub-title';
}
public function get_icon() {
return 'fa fa-font';
}
public function get_categories() {
return [ 'basic' ];
}
protected function _register_controls() {
$this->start_controls_section(
'section_title',
[
'label' => __( 'Content', 'elementor' ),
]
);
$this->add_control(
'title',
[
'label' => __( 'Title', 'elementor' ),
'label_block' => true,
'type' => Controls_Manager::TEXT,
'placeholder' => __( 'Enter your title', 'elementor' ),
]
);
$this->add_control(
'subtitle',
[
'label' => __( 'Sub-title', 'elementor' ),
'label_block' => true,
'type' => Controls_Manager::TEXT,
'placeholder' => __( 'Enter your sub-title', 'elementor' ),
]
);
$this->add_control(
'link',
[
'label' => __( 'Link', 'elementor' ),
'type' => Controls_Manager::URL,
'placeholder' => __( 'https://your-link.com', 'elementor' ),
'default' => [
'url' => '',
]
]
);
$this->end_controls_section();
}
protected function render() {
$settings = $this->get_settings_for_display();
$url = $settings['link']['url'];
echo "<a href='$url'><div class='title'>$settings[title]</div> <div class='subtitle'>$settings[subtitle]</div></a>";
}
protected function _content_template() {
}
}3. Now in your functions.php file all you need to do is require the my-widgets.php file, like so:
require_once('my-widgets.php');that’s all you need now your widget should be loaded in Elementor and be available to drag and drop into your website.
