Elementor is one of the best page builders . If you’re just starting out with Elementor, spend some time getting familiar with it before going off and creating your own widgets.
Elementor is packed with 28 useful widgets split into several categories in the panel. Elementor also displays all the registered WordPress widgets in a separate category in the panel.
Elementor widgets are created by extending the Widget_Base abstract class. Each widget has a set custom controls (input fields), and a render function that generates the output in the front-end and in the editor.
As a general rule if there is an easy way to accomplish a task without creating a new widget then for goodness sakes, go with the easy option and use the default functionality. If that doesn’t work your next best bet would be to try and customize an existing widget using styles and scripts.
If you’ve exhausted the first two options and are ready to create an Elementor widget, we’ll walk you through how to go about doing it.
The principle reason you’d want to create a custom Elementor widget is that the functionality you want is not available in an existing widget. To figure whether this is true, take a look at the widgets available in the Elementor Elements sidebar. Also, spend some time looking for the functionality you want in existing plugins. If you cannot find the widget you need, it’s time to create a custom widget.
Widget Structure
As mentioned above, Elementor Widget extends the Widget_Base class and inherits his methods. A simple Widget skeleton will look like this:
<?php
class Elementor_Test_Widget extends \Elementor\Widget_Base {
public function get_name() {}
public function get_title() {}
public function get_icon() {}
public function get_categories() {}
protected function _register_controls() {}
protected function render() {}
protected function _content_template() {}
}Type of Widget in elementor
As mentioned above, Elementor comes with a set of widgets organized in the following categories:
Basic Widgets
- Columns – Create inner columns within the column.
- Heading – Add eye-catching headlines.
- Image – Control the size, opacity and other settings of images.
- Text Editor – A WYSIWYG text editor, just like the WordPress editor.
- Video – Add YouTube \ Vimeo to your page.
- Button – Controlling every aspect of the button design.
- Divider – A line that divides different elements in the page.
- Spacer – A space that divides the various elements.
- Google Maps – Embed maps into the page.
- Icon – Place one or more of 600+ icons available.
General Widgets
- Image Box – A box that includes image, headline and text.
- Icon Box – Works the same as the image box, only with icons.
- Image Gallery – Displays your images in an aligned grid.
- Image Carousel – A rotating carousel or slider of chosen images.
- Icon List – A bullet list with any chosen icon and text.
- Counter – Show stats and numbers in an escalating manner.
- Progress Bar – Include an escalating progress bar.
- Testimonials – Customer testimonials that show social proof.
- Tabs – Vertical or horizontal tabs that display different pieces of content.
- Accordion – A collapsible display of content.
- Toggle – Like Accordion, for FAQ pages.
- Social Icons – Icons to your social pages like Facebook / Twitter.
- Alert – A colored alert box to draw the attention of the visitor.
- Audio – Add audio bits from SoundCloud.
- Shortcode – Easily insert shortcodes from any plugin into the page.
- HTML – Insert code into the page.
- Menu Anchor – Link any menu to this anchor.
- Sidebar – Add any sidebar into the page.
WordPress Widgets
- WordPress – Display all registered WordPress widgets.
Creating a custom class and extending “Widget”
<?php
class netring_create_widget extends \Elementor\Widget {
//add class methods here
}
?>
Elementor widget base class has preset methods to define widget structure such as get_name(), get_title(), get_icon() etc. We will use these methods to create our custom widget structure.
<?php class netring_create_widget extends \Elementor\Widget {
public function get_name() {
return ‘add-iframe’;
}
public function get_title() {
return __( ‘Add iframe’, ‘add-iframe’ );
}
public function get_icon() {
return ‘fa fa-code’;
} }?>
Now we will the widget control to change the values using _register_controls() method. We would need to add a URL input box to save URL for the iframe.
<?php
class netring_create_widget extends \Elementor\Widget {
public function get_name() {
return ‘add-iframe’;
}
public function get_title() {
return __( ‘Add iframe’, ‘add-iframe’ ); }
public function get_icon() {
return ‘fa fa-code’;
}
protected function _register_controls() {
$this->add_control(‘iframe_url’, [ ‘label’ => __( ‘URL’, ‘add-iframe-plugin’ ), ‘type’ => \Elementor\Controls_Manager::TEXT, ‘input_type’ => ‘url’, ‘placeholder’ => __( ‘https://example.com’, ‘add-iframe-plugin’ ), ]);
$this->end_controls_section();
} }?>
After creating the controls, we need to display the output of our widget on the screen. For that, we will use render() function to embed an iframe to the page.
<?php
class netring_create_widget extends \Elementor\Widget {
public function get_name() {
return ‘add-iframe’;
}
public function get_title() {
return __( ‘Add iframe’, ‘add-iframe’ );
}
public function get_icon() {
return ‘fa fa-code’;
}
protected function _register_controls() {
$this>add_control(‘iframe_url’, [ ‘label’ => __( ‘URL’, ‘add-iframe-plugin’ ), ‘type’ => \Elementor\Controls_Manager::TEXT, ‘input_type’=>’url’,’placeholder’ => __( ‘https://example.com’, ‘add-iframe-plugin’ ), ]);
$this->end_controls_section();
}
protected function render()
{
$setting = $this>get_settings_for_display();
$url = $setting[‘iframe_url’];
echo ‘<div class=”custom-elementor-widget”>’;
if($url){
echo ‘<iframe src=”‘.$url.'”></iframe>’;
}
else
{
echo ‘No URL to Display’l}
echo ‘</div>’
;}
Conclusion
I know this was a long tutorial to follow. But once you understand the process for how you should modify the Elementor widget, it will become very easy for you to extend the Elementor the way you want.
Elementor also provides hooks if you want to add control or sections. But it doesn’t give you much flexibility in terms of adding the controls at specific locations. So I don’t prefer this option.
I hope you will be much confident in recreating an Elementor Widgets as per your design requirements.