How to create a custom Elementor Widget for WordPress #

This section describes how to register a custom Elementor Widget using the plugin nnhelpers for WordPress.

Registering the Widget #

After creating your plugin, add a file example.php in the folder Configuration/Blocks/ of your plugin with the following content:

File: Configuration/Blocks/example.php #

<?php

$form = [
    'ctrl' => [
        'title'   => 'Example',
        'position' => 'left,top',
    ],
    'columns' => [
        'title' => [
            'label' => 'Titel',
            'config' => [
                // list of types is here: http://wphelpers.99grad.de/docs/cpt-field-types-and-configurations/
                'type' => 'input',
            ],
        ],
    ],
];

return [
    'identifier' => '',
    'template' => '',
    'forms' => [
        'address' => $form,
    ]
];

You can find a overview of the types for columns (like RTE-Texteditor, checkboxes, select-boxes etc.) on this page.

The Widget is now registered and can be used in Elementor. Of course we have not defined any rendering yet, so you will get an Error message saying, that the Template could not be found.

Creating the template for the Widget #

Like everywhere in nnhelpers the principle is Convention over Configuration. In order to create a template for your Elementor Widget, all you need to do is create a file located in Resources/Templates/Elementor/{Blockname}.html

In the above example the configuration file was named example.php. The template-file now has to be named Example.html (note the first letter is capitalized!).

File: Resources/Templates/Elementor/Example.html #

We are going to use the Fluid Debug-ViewHelper to show all variables available in the template:

{_all->f:debug()}

We then can create the markup for the Widget using the Fluid-syntax to access the template variables:

<div class="example-widget">
    <h2>{atts.title}</h2>
</div>

Advanced logic and adding additional variables #

In case you need more control over the rendering or would like to add additional logic or variables to the view, you can:

• Create custom ViewHelpers to manipulate the output in the template.
• Create an own Controller for the Widget

Creating an own Controller for the Widget #

The Controller must be located at Classes/Controller/Elementor/{Blockname}Controller.php. Like the name of the template-file, the first letter must be capitalized.

In the above example, our Widget configuration file was named example.php. Consequently, The filename of this Controller and the Controller class Name must be ExampleController!

File: Classes/Controller/Elementor/ExampleController.php #

<?php

namespace My\Example\Controller\Elementor;

use Nng\Nnhelpers\Controller\AbstractElementorController;

class ExampleController extends AbstractElementorController 
{
    // @see https://elementor.github.io/elementor-icons/    
    public $icon = 'eicon-meta-data';
    public $title = 'Example';
    public $categories = ['basic'];
    public $assets = [
        'js'=>[
            ['path'=>'EXT:example/Resources/Js/frontend.js']
        ], 
        'css'=>[
            ['path'=>'EXT:example/Resources/Css/frontend.css']
        ]
    ];

    public function initializeView( $view = null ) 
    {
        // add any logic you like here
        $this->view->assignMultiple([
            'now' => date('Y.m.d H:i:s')
        ]);
    }
}

The properties and methods are rather self-explanatory.

We are defining the icon and title for the Widget and are saying, in which category of Elementor it should appear.

initializeView() is a method that is called before the template is rendered. It can add additional variables to the template by using the $this->view->assignMultiple() method.

Registering a custom ViewHelper #

Follow the instructions on this page if you would like to create a custom ViewHelper