Widget Concept<\/h3>\n\n\n\n
Our widget will consist of a button (similar to Elementor\u2019s familiar button widget) and a content area (powered by a WYSIWYG text-editor). The content will load onto the page as hidden ( We\u2019ll call the widget \u201cContent Toggle Button\u201d. <\/p>\n\n\n\n Here\u2019s a quick demo in my favorite format, GIF:<\/p>\n\n\n\n We\u2019ll start by composing a simple PHP class and supplying the basic information for our widget:<\/p>\n\n\n\n For more info about the structure of Widget PHP classes, see the documentation for creating a new widget<\/a>.<\/p>\n\n\n\n Within the Feel free to add some styling controls. For more info on adding controls to widgets, see the documentation on adding controls to widgets<\/a>.<\/p>\n\n\n\n Within the Notice that the button is an We\u2019ll create a separate CSS file with some basic styling to make the button look like Elementor\u2019s native button widget: <\/p>\n\n\n\n We\u2019ll call the file We will take care of integrating the CSS into our plugin later on.<\/p>\n\n\n\n Ah, the moment we\u2019ve all been waiting for. We\u2019ll write a Javascript handler for our Widget, to give it that show\/hide functionality we mentioned at the beginning of the post.<\/p>\n\n\n\n The Javascript handlers for Elementor\u2019s native widgets are written as ES6 classes. The handlers all extend a base class which provides some useful functionality.<\/p>\n\n\n\n This method is used to configure settings to be used by other methods of our handler class. The method should return a settings object. In our example, this method would look like this:<\/p>\n\n\n\n<p This method creates jQuery objects from the widget\u2019s targeted HTML elements, and appends them to the class instance object under a property called The image on the right shows the handler class instance as it is running in Chrome devtools.<\/p>\n\n\n\n In our case, our method will look like this:<\/p>\n\n\n\n For convenience, we gave the property name for our jQuery objects keys with identical names to the ones in our settings object, only prefixed with a This method is used to add event listeners for interactions with our widget\u2019s HTML.<\/p>\n\n\n\n Since we want our button to fade away on click, and reveal our content box, we\u2019ll add an \u2018on click\u2019 listener:<\/p>\n\n\n\n Notice our callback in this case is another method called This custom method will be included in our handler class, and will handle everything that happens when a user clicks the button.<\/p>\n\n\n\n Our First, we prevent the default browser response when our button link is clicked. Then, we use jQuery\u2019s For more information about these handler methods, see the official documentation on adding Javascript to custom Elementor widgets<\/a>.<\/p>\n\n\n\n The finished handler class looks like this:<\/p>\n\n\n\n For wider browser support, it is recommended to transpile your class into ES5 syntax (using a tool like Babel.js) before deploying it in production.<\/p>\n\n\n\n Finally, we need to make sure the widget handler integrates properly with Elementor and is called at the right time.<\/p>\n\n\n\n This is done by listening to Elementor\u2019s display: none;<\/code>). Clicking the button will make the button fade out and the content fades in to replace it.<\/p>\n\n\n\n![\"\"](\"https:\/\/developers.elementor.com\/wp-content\/uploads\/2019\/07\/gif.gif\")
<\/figure>\n\n\n\nLet\u2019s Start with the Widget\u2019s PHP<\/h3>\n\n\n\n
<?php\n\nif ( ! defined( 'ABSPATH' ) ) {\n exit; \/\/ Exit if accessed directly.\n}\n\n\/**\n* Elementor Content Toggle Button widget.\n*\n* Elementor widget that displays a styled Button. Clicking the button replaces it with WYSIWYG content.\n*\/\nclass Widget_Content_Toggle_Button extends Elementor\\Widget_Base {\n\n public function get_name() {\n return 'content-toggle-button';\n }\n\n public function get_title() {\n return __( 'Content Toggle Button', 'your-plugin-textdomain' );\n }\n\n public function get_icon() {\n return 'eicon-dual-button';\n }\n\n public function get_keywords() {\n return [ 'button', 'content', 'toggle' ];\n }\n\n protected function _register_controls() {}\n\n protected function render() {}\n}\n<\/code><\/pre>\n\n\n\nWidget Controls<\/h4>\n\n\n\n
_register_controls()<\/code> method, we\u2019ll add controls for the button text and the hidden widget content:<\/p>\n\n\n\nprotected function _register_controls() {\n\t\/\/ WYSIWYG CONTENT\n\t$this->start_controls_section(\n\t\t'content_settings',\n\t\t[\n\t\t\t'label' => __( 'Content', 'your-plugin-textdomain' ),\n\t\t]\n\t);\n\n\t$this->add_control(\n\t\t'widget_content',\n\t\t[\n\t\t\t'label' => __( 'Content Box', 'your-plugin-textdomain' ),\n\t\t\t'type' => \\Elementor\\Controls_Manager::WYSIWYG,\n\t\t\t'default' => __( 'Widget Content', 'your-plugin-textdomain' ),\n\t\t\t'show_label' => false,\n\t\t]\n\t);\n\n\t$this->end_controls_section();\n\n\t\/*\n\t * BUTTON TEXT\n\t *\/\n\t$this->start_controls_section(\n\t\t'button_settings',\n\t\t[\n\t\t\t'label' => __( 'Button Settings', 'your-plugin-textdomain' ),\n\t\t]\n\t);\n\n\t$this->add_control(\n\t\t'button_text',\n\t\t[\n\t\t\t'label' => __( 'Button Text', 'your-plugin-textdomain' ),\n\t\t\t'type' => \\Elementor\\Controls_Manager::TEXT,\n\t\t\t'default' => __( 'Button Text', 'your-plugin-textdomain' ),\n\t\t]\n\t);\n\n\t$this->add_responsive_control(\n\t\t'button_align',\n\t\t[\n\t\t\t'label' => __( 'Button Alignment', 'your-plugin-textdomain' ),\n\t\t\t'type' => \\Elementor\\Controls_Manager::CHOOSE,\n\t\t\t'options' => [\n\t\t\t\t'left' => [\n\t\t\t\t\t'title' => __( 'Left', 'your-plugin-textdomain' ),\n\t\t\t\t\t'icon' => 'eicon-text-align-left',\n\t\t\t\t],\n\t\t\t\t'center' => [\n\t\t\t\t\t'title' => __( 'Center', 'your-plugin-textdomain' ),\n\t\t\t\t\t'icon' => 'eicon-text-align-center',\n\t\t\t\t],\n\t\t\t\t'right' => [\n\t\t\t\t\t'title' => __( 'Right', 'your-plugin-textdomain' ),\n\t\t\t\t\t'icon' => 'eicon-text-align-right',\n\t\t\t\t],\n\t\t\t],\n\t\t\t'default' => 'left',\n\t\t\t'selectors' => [\n\t\t\t\t'{{WRAPPER}} .elementor-content-toggle-button-wrapper' => 'text-align: {{VALUE}};'\n\t\t\t],\n\t\t]\n\t);\n\n\t$this->end_controls_section();\n}<\/code><\/pre>\n\n\n\nWidget HTML<\/h3>\n\n\n\n
render()<\/code> method, we will output our widget\u2019s HTML:<\/p>\n\n\n\nprotected function render() {\n\t$settings = $this->get_settings_for_display();\n\n\t?>\n\t<div class=\"elementor-content-toggle-button-wrapper\">\n\t\t<a class=\"elementor-content-toggle-button-btn\" href=\"\"><?php echo $settings['button_text']; ?><\/a>\n\t\t<div class=\"elementor-content-toggle-button-content-box\"><?php echo $settings['widget_content']; ?><\/div>\n\t<\/div>\n\t<?php\n}<\/code><\/pre>\n\n\n\n<a><\/code> tag wrapper by a <div><\/code>, and the content box is just a simple <div><\/code>. We said simple, didn\u2019t we?<\/p>\n\n\n\nWidget CSS<\/h3>\n\n\n\n
![\"\"](\"https:\/\/developers.elementor.com\/wp-content\/uploads\/2019\/07\/widgetcss.png\")
<\/figure><\/div>\n\n\n\ncontent-toggle-button.css<\/code>:<\/p>\n\n\n\n.elementor-content-toggle-button-wrapper {\n text-align: center;\n}\n\n.elementor-content-toggle-button-btn {\n border-radius: 3px;\n background-color: #61ce70;\n color: #ffffff;\n display: inline-block;\n font-family: \"Roboto\", Sans-serif;\n font-size: 15px;\n font-weight: 500;\n line-height: 1;\n padding: 12px 24px;\n}\n\n.elementor-content-toggle-button-content-box {\n display: none;\n text-align: initial;\n}\n<\/code><\/pre>\n\n\n\nFinally, the Javascript<\/h3>\n\n\n\n
class ContentToggleButton extends elementorModules.frontend.handlers.Base {\n getDefaultSettings() {}\n\n getDefaultElements() {}\n\n bindEvents() {}\n}<\/code><\/pre>\n\n\n\ngetDefaultSettings<\/h4>\n\n\n\n
getDefaultSettings<\/code> is most widely used to enter the jQuery selectors of the HTML elements in your widget you would like to target.<\/p>\n\n\n\ngetDefaultSettings() {\n return {\n selectors: {\n button: '.elementor-content-toggle-button-btn',\n content: '.elementor-content-toggle-button-content-box',\n },\n };\n}<\/code><\/pre>\n\n\n\ngetDefaultElements()<\/h4>\n\n\n\n
![\"\"](\"https:\/\/developers.elementor.com\/wp-content\/uploads\/2019\/07\/getdefaultelements.png\")
<\/figure><\/div>\n\n\n\nelements<\/code>. Grabbing the settings object is done by calling the base method this.getSettings()<\/code>, passing in the key for the requested setting as a parameter. <\/p>\n\n\n\ngetDefaultElements() {\n const selectors = this.getSettings( 'selectors' );\n return {\n $button: this.$element.find( selectors.button ),\n $content: this.$element.find( selectors.content ),\n };\n}<\/code><\/pre>\n\n\n\n$<\/code> sign.<\/p>\n\n\n\nbindEvents()<\/h4>\n\n\n\n
bindEvents() {\n this.elements.$button.on( 'click', this.onButtonClick.bind( this ) );\n}<\/code><\/pre>\n\n\n\nonButtonClick<\/code>. We are binding the method to this<\/code><\/strong>, to make sure it does not lose the widget\u2019s context when it runs.<\/p>\n\n\n\nonButtonClick()<\/h4>\n\n\n\n
onButtonClick<\/code> method will look like this:<\/p>\n\n\n\nonButtonClick( event ) {\n event.preventDefault();\n this.elements.$button.fadeOut().promise().done( () => {\n this.elements.$content.fadeIn();\n } );\n}<\/code><\/pre>\n\n\n\nfadeOut()<\/code> method to make the button disappear on click. To make sure the content fades in only once the button has finished its fade-out animation, we chain a promise to the method. In the promise\u2019s callback we call jQuery\u2019s fadeIn()<\/code> method on the content box.<\/p>\n\n\n\nThe complete handler class<\/h3>\n\n\n\n
class ContentToggleButton extends elementorModules.frontend.handlers.Base {\n getDefaultSettings() {\n return {\n selectors: {\n button: '.elementor-content-toggle-button-btn',\n content: '.elementor-content-toggle-button-content-box',\n },\n };\n }\n\n getDefaultElements() {\n const selectors = this.getSettings( 'selectors' );\n return {\n $button: this.$element.find( selectors.button ),\n $content: this.$element.find( selectors.content ),\n };\n }\n\n bindEvents() {\n this.elements.$button.on( 'click', this.onButtonClick.bind( this ) );\n }\n\n onButtonClick( event ) {\n event.preventDefault();\n\n this.elements.$button.fadeOut().promise().done( () => {\n this.elements.$content.fadeIn();\n } );\n }\n}<\/code><\/pre>\n\n\n\nRegistering the Widget Handler with Elementor<\/h3>\n\n\n\n
elementor\/frontend\/init<\/code><\/strong> event. In the listener\u2019s callback, we attach our handler registration function (elementorFrontend.elementsHandler.<\/code><\/strong>addHandler<\/code>) to a hook that runs only once our widget\u2019s instance is rendered on the page\/in our editor preview.<\/p>\n\n\n\njQuery( window ).on( 'elementor\/frontend\/init', () => {\n const addHandler = ( $element ) => {\n elementorFrontend.elementsHandler.addHandler( ContentToggleButton, {\n $element,\n } );\n };\n\n elementorFrontend.hooks.addAction( 'frontend\/element_ready\/content-toggle-button.default', addHandler );\n} );<\/code><\/pre>\n\n\n\n