Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Create First Addon - September 2019 Elementor Meetup

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.

Elementor Surat

September 14, 2019
Tweet

More Decks by Elementor Surat

Other Decks in Programming

Transcript

  1. Elementor Meetup
    SURAT

    View full-size slide

  2. Welcome
    Ladies and Gentlemen!

    View full-size slide

  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

    View full-size slide

  4. Introduction
    Hi

    View full-size slide

  5. Do you know?
    You can
    create your
    own custom
    Elementor
    Addon in
    Wordpress ?

    View full-size slide

  6. Tips to create your own Elementor
    Addon
    By :- Nilesh Vastarpara

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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.

    View full-size slide

  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...
    }

    View full-size slide

  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.

    View full-size slide

  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 '’.$message.’’;
    }
    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.

    View full-size slide

  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.

    View full-size slide

  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 '’. $message .’’;
    }
    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.

    View full-size slide

  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.

    View full-size slide

  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 '

    View full-size slide

  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:

    View full-size slide

  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() );
    }
    }

    View full-size slide

  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.

    View full-size slide

  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';
    }
    }

    View full-size slide

  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.

    View full-size slide

  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

    View full-size slide

  23. How do you render content?
    8.

    View full-size slide

  24. protected function render() {
    $setting = $this->get_settings_for_display();
    $title = $setting[‘title'];
    $description = $setting[‘description’];
    $content = $setting[‘content’];
    echo '';
    if($title) {
    echo ‘’;
    echo $title;
    echo ‘’;
    }
    If($description) {
    echo ‘’;
    echo $description;
    echo ‘’;
    }
    If($content) {
    echo ‘’;
    echo $content;
    echo ‘’;
    }
    echo '';
    }

    View full-size slide

  25. Various Elementor Controls
    • TEXT
    • SELECT
    • CHOOSE
    • SLIDER
    • COLOR
    • MEDIA
    etc.

    View full-size slide

  26. Time for Group
    Discussion
    Time to ask questions, talk and
    help others

    View full-size slide

  27. Next Meetup
    Elementor Meetup
    Surat
    Everyone will be informed when next
    meetup will be schedule.

    View full-size slide

  28. Event Sponsors
    Special thanks to our
    Raksh Infotech

    View full-size slide

  29. Thank You
    Everybody!

    View full-size slide