Latest News

How to create custom elementor widget

Create a plugin compatible with Elementor Plugin wordpress - Part 01/03 - Juan Jimenez - https://juanjimeneztj.com/

Review the video and the steps to follow to configure the plugin, it is very important for the correct operation of it.

Repository:
-- SSH: git@github.com:juanjimeneztj/a-filters-gsweb.git
-- HTTPS: https://github.com/juanjimeneztj/a-filters-gsweb.git


Video Tutorial

Index.php

<?php
// Silence is golden.

a-filters-gsweb.php

<?php

/*
Plugin Name: A Filters GSWEB
Description: Posts filter.
Version: 1.0.0
Author: Juan Jimenez
Author: URI: https://juanjimeneztj.com/
License: GPL2+
Text Domain: Juan Jimenez
*/

if(!defined('ABSPATH')) exit;


final class a_filters_gsweb{

    const VERSION = '1.0.0';
    const MINIMUM_ELEMENTOR_VERSION = '2.0.0';
    const MINIMUM_PHP_VERSION = '7.0';


    public function __construct(){
        add_action('init', array($this,'i18n'));
        add_action('plugins_loaded', array($this, 'init'));
    }

    public function i18n(){
        load_plugin_textdomain('a-filters-gsweb');
    }

    public function init(){
        if(! did_action('elementor/loaded')){
            add_action('admin_notice',array($this, 'admin_notice_missing_main_plugi             n'));
            return;
        }

        if(! version_compare(ELEMENTOR_VERSION, self::MINIMUM_ELEMENTOR_VERSION, '>=')){
            add_action('admin_notice',array($this, 'admin_notice_minimum_elementor_vers             ion'));
            return;
        }

        if(version_compare(PHP_VERSION, self::MINIMUM_PHP_VERSION, '<')){
            add_action('admin_notice',array($this, 'admin_notice_minimum_php_versio             n'));
            return;
        }

        require_once('plugin.php');

    }

    public function admin_notice_missing_main_plugin(){
        if(isset($_GET['activate'])){
            unset($_GET['activate']);
        }

        $msg = sprintf(
            esc_html__('"%1$s" requires "%2$s" to be installed and activated.', 'a-filt             ers-gsweb'),
          '<strong>' . esc_html__('A Filters GSWEB', 'a-filters-gsweb') . '</strong>',
            '<strong>' . esc_html__('Elementor', 'a-filters-gsweb') . '</strong>'
        );

        printf('<div class="notice notice-warning is-dismissible">%1$s</div>', $msg);

    }

    public function admin_notice_minimum_elementor_version(){
        if(isset($_GET['activate'])){
            unset($_GET['activate']);
        }

        $msg = sprintf(
            esc_html__('"%1$s" requires "%2$s" version %3$s or greater.', 'a-filters-gs             web'),
          '<strong>' . esc_html__('A Filters GSWEB', 'a-filters-gsweb') . '</strong>',
            '<strong>' . esc_html__('Elementor', 'a-filters-gsweb') . '</strong>',
            self::MINIMUM_ELEMENTOR_VERSION
        );

        printf('<div class="notice notice-warning is-dismissible">%1$s</div>', $msg);

    }

    public function admin_notice_minimum_php_version(){
        if(isset($_GET['activate'])){
            unset($_GET['activate']);
        }

        $msg = sprintf(
            esc_html__('"%1$s" requires "%2$s" version %3$s or greater.', 'a-filters-gs             web'),
          '<strong>' . esc_html__('A Filters GSWEB', 'a-filters-gsweb') . '</strong>',
            '<strong>' . esc_html__('PHP', 'a-filters-gsweb') . '</strong>',
            self::MINIMUM_PHP_VERSION
        );

        printf('<div class="notice notice-warning is-dismissible">%1$s</div>', $msg);

    }

}

new a_filters_gsweb();

plugin.php

<?php

namespace JuanJimenezTJAFiltersGSWEB;

class Plugin {

    private static $_instance = null;

    public static function instance(){
        if(is_null(self::$_instance)){
            self::$_instance = new self();
        }
        return self::$_instance;
    }

    public function include_widgets_files(){
        require_once(__DIR__.'/widgets/a-filters-gsweb-widget.php');
        require_once(__DIR__.'/widgets/inline-editing.php');
    }

    public function register_widgets(){
        $this->include_widgets_files();

        \Elementor\Plugin::instance()->widgets_manager->register_widget_type( new Widgets\a_filters_gsweb() );
        \Elementor\Plugin::instance()->widgets_manager->register_widget_type( new Widgets\Inline_Editing() );
    }

    public function __construct(){
        add_action('elementor/widgets/widgets_registered',[$this, 'register_widgets']);
    }
}

Plugin::instance();

widgets/inline-editing.php

<?php

namespace JuanJimenezTJAFiltersGSWEB\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;

if(!defined('ABSPATH')) exit;

class Inline_Editing extends Widget_Base{
    public function get_name(){
        return 'inline-editing-example';
    }

    public function get_title(){
        return __('Inline Editing', 'a-filters-gsweb');
    }

    public function get_icon(){
        return 'fa fa-pencil';
    }

    public function get_categories(){
        return ['general'];
    }

    protected function _register_controls(){
        $this->start_controls_section(
            'section_content',
            [
                'label' => __('content', 'a-filters-gsweb'),
            ]
        );

        $this->add_control(
            'title',
            [
                'label'   => __('Title', 'a-filters-gsweb'),
                'type'    => Controls_Manager::TEXT,
                'default' => __('Title', 'a-filters-gsweb'),
            ]
        );

        $this->end_controls_section();
    }

    protected function render(){
        $settings = $this->get_settings_for_display();
        $this->add_inline_editing_attributes('title','none');
        ?>
            <h1 <?php echo $this->get_render_attribute_string('title') ?>><?php echo $settings['title']?></h1>
        <?php
    }

    protected function _content_template(){
        ?>
        <#
            view.addInlineEditingAttributes('title','none');
        #>
        <h1 {{{ view.getRenderAttributeString('title') }}}>{{{ settings.title }}}</h1>
        <?php
    }
}

widgets/a-filters-gsweb-widget.php

 <?php

namespace JuanJimenezTJAFiltersGSWEB\Widgets;

use Elementor\Widget_Base;
use Elementor\Controls_Manager;

if(!defined('ABSPATH')) exit;

class a_filters_gsweb extends Widget_Base{

    public function get_name(){
        return 'a-filters-gsweb';
    }

    public function get_title(){
        return __('A Filters GSWEB', 'a-filters-gsweb');
    }

    public function get_icon(){
        return 'eicon-tags';
    }

    public function get_categories(){
        return ['basic'];
    }

    public function get_script_depends(){
        return ['a-filters-gsweb'];
    }

    protected function _register_controls(){
        $this->start_controls_section(
            'section_content',
            [
                'label' => __('content', 'a-filters-gsweb'),
            ]
        );

        $this->add_control(
            'title',
            [
                'label'       => __('Title', 'a-filters-gsweb'),
                'type'        => Controls_Manager::TEXT,
                'placeholder' => 'Enter here the title'
            ]
        );

        $this->end_controls_section();
    }

    protected function render(){
        $settings = $this->get_settings_for_display();
        $html = "<div><h1>".$settings['title']."</h1></div>";
        echo $html;
    }

    protected function _content_template(){
        ?>
        <div>
            <#
                if(settings.title){
                    #>
                        <h1>{{{ settings.title }}}</h1>
                    <#
                }
            #>
        </div>
        <?php
    }
}