Before moving to Creation of custom widget in Magento 2.2.7. We have to get a basic idea about “what are widgets ?”

Widgets are the elements which are used for adding static or dynamic content to the CMS pages, blocks of Magento 2 and to add more functionality in magento 2 store, widgets are the best solution for this as they are reusable components that can be added to any CMS block of Magento 2.

Now that we have got a basic idea about what are widgets, let’s move ahead to the creation of custom widget in magento 2.

The creation of widget will also be similar to how we create a module in magento 2. As we can see in the below picture :

First we will be creating a registration.php file, so that we can register our module for custom widget in magento 2.

The location for this file will be : app/code/Demo/CustomWidget/registration.php

<?php
\Magento\Framework\Component\ComponentRegistrar::register(
    \Magento\Framework\Component\ComponentRegistrar::MODULE,
    'Demo_CustomWidget',
    __DIR__
);

The next file that we would be creating is the module.xml which will configure our module in magento 2.

The location for this file will be : app/code/Demo/CustomWidget/etc/module.xml

<?xml version="1.0" ?>
<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
    <module name="Demo_CustomWidget" setup_version="1.0.0"/>
</config>

Now, we register our widget using the widget.xml file, this will contain the basic details about our widget .

The location for this file will be : app/code/Demo/CustomWidget/etc/widget.xml

<?xml version="1.0" ?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Widget:etc/widget.xsd">
    <widget class="Demo\CustomWidget\Block\Widget\SampleWidget" id="demo_customwidget_samplewidget">
        <label>Demo Sample Widget</label>
        <description></description>
        <parameters>
            <parameter name="widgettitle" sort_order="10" visible="true" xsi:type="text">
                <label>Title</label>
            </parameter>
            <parameter name="widgetcontent" sort_order="20" visible="true" xsi:type="text">
                <label>Content</label>
            </parameter>
        </parameters>
    </widget>
</widgets>

Since, we  have created a widget configuration file we might want to display the output of that widget in our store, to do so we have to create a block and template file for the same.

This template file will be created in app/code/Demo/CustomWidget/view/frontend/templates/widget/samplewidget.phtml

<?php if($block->getData('widgettitle')): ?>
    <h2 class='tostal-title'><?php echo $block->getData('widgettitle'); ?></h2>
<?php endif; ?>
<?php if($block->getData('widgetcontent')): ?>
    <h2 class='tostal-content'><?php echo $block->getData('widgetcontent'); ?></h2>
<?php endif; ?>

To get those values in the template we will create a block file.

This file will be created in : app/code/Demo/CustomWidget/Block/Widget/SampleWidget.php

<?php

namespace Demo\CustomWidget\Block\Widget;

use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface;

class Samplewidget extends Template implements BlockInterface
{

    protected $_template = "widget/samplewidget.phtml";

}

To check the functionality of our widget we have the follow these steps :

1. Open our magento 2 Admin Panel and Select Content > Widget in the admin panel menu :

2. Once the Widget page opens up click on the Add Widget on the top right corner :

3. After clicking on Add Widget the widget creation page will open, on that page we have select the type of widget and the theme on which we have to use that widget, under the settings section ,  you can see the name of our created widget in the below image :

4. Once we select our widget and theme we will get more options like which part of store we want to display our widget as shown below :

5. Now we have click on the Widget Options on the top right corner of the widget creation page, this will open a section in which we have enter the title and content  and save the widget which we want to display on the store front :

6. Once we have saved the details, we just have to go the page we selected to display our widget :

Like this we can create a basic widget in magento 2.