Create First Addon - September 2019 Elementor Meetup

Welcome to 3rd version of Elementor Meetup in Surat, India

We hope that you guys really enjoyed our first meetup. Here is a link of the slides if you haven't checked it before - https://speakerdeck.com/elementorsurat/10-questions-and-answers-august-2019-elementor-meetup

Session Points that we will cover today
---
1) Plugin structure
2) Constructor
3) Check if Elementor is installed
4) Check the version of Elementor
5) Check for the PHP version
6) Including Essential Files to Correctly Create a New Extension
7) How to add controls in Widget?
8) How do you render content?

- Time for the Group Discussion or questions-answers

This session is presented by Mr. Nilesh Vastarpara (Elementor or Page Builder Guru) who has more than 8 years of experience in WordPress. He developed more than 5 Elementor Addons in the last 6 months.

Transcript

1. Elementor Meetup SURAT
2. Welcome Ladies and Gentlemen!
3. What we will cover today • Introduction of new attendees • Tips to create your first Elementor Add-on • Time to ask questions, talk and help others • Meeting wrap up
4. Introduction Hi
5. Do you know? You can create your own custom Elementor Addon in Wordpress ?
6. Tips to create your own Elementor Addon By :- Nilesh Vastarpara
7. Plugin structure 1. The main plugin should have basic information about the extensions, to check basic requirements and to load the required files to activate the plugin functionality. In the following sections, we’ll take a deep dive into each part of the plugin.
8. Define Variables • Variables are used to store information to be referenced and manipulated in a computer program. In the main class, we must define three constants like: • VERSION: store the version of our plugin. • MINIMUM_ELEMENTOR_VERSION: store the essential version of Elementor. • MINIMUM_PHP_VERSION: store the PHP version used in the plugin.
9. Constructor 2. The Constructor or magic function is a special type of function that is automatically executed after a class is created or instantiated. Usually, the constructor starts with two underscore characters.
10. Constructor public function __construct() { add_action( 'init', [ $this, ‘load_textdomain' ] ); add_action( 'plugins_loaded', [ $this, 'init' ] ); } public function load_textdomain() { load_plugin_textdomain( 'our-plugin-name' ); } public function init() { // Plugin logic here... }
11. Check if Elementor is installed 3. As the plugin extends Elementor functionality, you should first check whether Elementor is installed and activated before the main class loads.
12. public function init() { // Check if Elementor installed and activated if ( ! did_action( 'elementor/loaded' ) ) { add_action( 'admin_notices', [$this, 'admin_notice_missing_main_plugin' ] ); return; } } public function admin_notice_missing_main_plugin() { if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] ); $message = esc_html__( ‘Your plugin requires Elementor to be installed and activated.', ‘text- domain' ); echo '<div class="notice notice-warning is-dismissible">’.$message.’</div>’; } If Elementor is activated, the main class will load. If it’s not activated, an admin notice will be displayed and the functionality won’t continue loading. This check must be done in the initialization stage of the main class.
13. Check the Version of Elementor 4. After checking whether or not Elementor is installed, we must check the Elementor version for backward compatibility with older Elementor versions. This check is done in the initialization stage of the main class.
14. const MINIMUM_ELEMENTOR_VERSION = '2.5.11'; public function init() { // Check for required Elementor version if ( ! version_compare( ELEMENTOR_VERSION, self::MINIMUM_ELEMENTOR_VERSION, '>=' ) ) { add_action( 'admin_notices', [ $this, 'admin_notice_minimum_elementor_version' ] ); return; } } public function admin_notice_minimum_elementor_version() { if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] ); $message = esc_html__( ‘Your plugin requires Elementor version MINIMUM_ELEMENTOR_VERSION or greater.', ‘text-domain' ); echo '<div class="notice notice-warning is-dismissible">’. $message .’</div>’; } If the defined minimum version of our plugin is not compatible with the installed version of Elementor, then the admin message will be displayed, and functionality will not be able to load.
15. Check for the PHP Version 5. Finally, we must check our extension’s minimum PHP version, which must be newer than the PHP version of the Elementor plugin. If there’s an older version, then the admin message will be displayed, and the functionality won’t load.
16. const MINIMUM_PHP_VERSION = '7.0'; public function init() { // Check for required PHP version if ( version_compare( PHP_VERSION, self::MINIMUM_PHP_VERSION, '<' ) ) { add_action( 'admin_notices', [ $this, 'admin_notice_minimum_php_version' ] ); return; } } public function admin_notice_minimum_php_version() { if ( isset( $_GET['activate'] ) ) unset( $_GET['activate'] ); $message = esc_html__( '“Your plugin requires Php version MINIMUM_PHP_VERSION or greater.', ‘text-domian' ); echo '<div class="notice notice-warning is-dismissible“>’. $message .‘</div>’; }
17. Including Essential Files to Correctly Create a New Extension 6. Only when all check have passed, the extension should load all the files required to run the plugin at the correct hooks. It can be done using the following code:
18. final class Elementor_Test_Extension { public function init() { // Add Plugin actions add_action( 'elementor/widgets/widgets_registered', [ $this, 'init_widgets' ] ); add_action( 'elementor/controls/controls_registered', [ $this, 'init_controls' ] ); } public function init_widgets() { // Include Widget files require_once( __DIR__ . '/widgets/test-widget.php' ); // Register widget \Elementor\Plugin::instance()->widgets_manager->register_widget_type( new \Elementor_Test_Widget() ); } public function init_controls() { // Include Control files require_once( __DIR__ . '/controls/test-control.php' ); // Register control \Elementor\Plugin::$instance->controls_manager->register_control( 'control-type-', new \Test_Control() ); } }
19. How to add controls in Widget ? 7. Widget controls are added within the _register_controls() method. To add controls to Elementor widgets we need to use the add_control() method. To add a simple control we have to create a new section. From that point, all the controls will be assigned to that specific section. For new each control we have to define the control name that will be used as the A unique id for that control and an extra set of settings like the control label, control type, etc.
20. Before adding New Control We need to extend the base class of the widget and add the basic setting to display our widget on elementor dashboard. class oodles_create_widget extends\Elementor\Widget_Base { public function get_name() { return 'add-control'; } public function get_title() { return __( ‘My Control', ‘text-domain' ); } public function get_icon() { return 'fa fa-code'; } }
21. Adding New Control New controls are added using the add_control() method. Each control has to have a few key parameters: o Control Name (string) – Unique name used in the code. o Control Setting (array) – Extra control parameters. • Label (string) – The label displayed to the user in the panel. • Type (string) – The control type. • Show Label (bool) – Whether to show the label. • Label Block (bool) – Whether to display the label in a separate line. • Separator (string) – The position of the separator.
22. protected function _register_controls() { $this->start_controls_section( 'section_content‘, [ 'label' => __( 'Content', ‘text-domain' ), ] ); $this->add_control( 'title‘, [ 'label' => __( 'Title', ‘text-domain ' ), 'type' => Controls_Manager::TEXT, 'default' => __( 'Title', ‘text-domain ' ), ] ); $this->add_control( 'description‘, [ 'label' => __( 'Description', ‘text-domain ' ), 'type' => Controls_Manager::TEXTAREA, 'default' => __( 'Description', ‘text-domain ' ), ] ); $this->add_control( 'content‘, [ 'label' => __( 'Content', ‘text-domain ' ), 'type' => Controls_Manager::WYSIWYG, 'default' => __( 'Content', ‘text-domain ' ), ] ); $this->end_controls_section(); } Registering Controls Label Text Field Control TextArea Control Text Editor Control
23. How do you render content? 8.
24. protected function render() { $setting = $this->get_settings_for_display(); $title = $setting[‘title']; $description = $setting[‘description’]; $content = $setting[‘content’]; echo '<div class="custom-elementor-widget">'; if($title) { echo ‘<div class=“my-title”>’; echo $title; echo ‘<div>’; } If($description) { echo ‘<div class=“my-description”>’; echo $description; echo ‘<div>’; } If($content) { echo ‘<div class=“my-content”>’; echo $content; echo ‘<div>’; } echo '</div>'; }
25. Various Elementor Controls • TEXT • SELECT • CHOOSE • SLIDER • COLOR • MEDIA etc.
26. Time for Group Discussion Time to ask questions, talk and help others
27. Next Meetup Elementor Meetup Surat Everyone will be informed when next meetup will be schedule.
28. Event Sponsors Special thanks to our Raksh Infotech
29. Thank You Everybody!