[openingText]

Widgets are incredible features that allow you to add dynamic or static content to CMS pages and blocks in your Magento 2 website. They are reusable and essential tools that provide multiple functionalities that can be utilized in the CMS block of a Magento 2 store.

When added to the Magento store, Widgets enable visitors to surf and view your store with ease. They create eye-catching website templates and designs that enrich user experience while offering unprecedented control and flexibility on the admin panel.

[/openingText]

This tutorial will help you create a custom widget on your [tool]Magento 2 store[/tool] to boost visitors’ experience and improve navigation within the store.

Ready? Let’s get started.

Step 1 –
[stepName]Creating A New Module[/stepName]

[step]

The first step when creating a custom widget in Magento 2 is establishing a new module. The module requires a module folder and a namespace, in our case, will use HostAdvice as the namespace and CustomWidget as the module folder name. The module folder will be located in the vendor folder titled app/code.

For the sake of this tutorial, we’ll use app/code/HostAdvicel/CustomWidget/composer.json. The composer will load this file when we run it, even though we’ll not be using the composer with the module.

[/step]

Step 2 –
[stepName]Creating registration.php[/stepName]

[step]

[howToDirection]

We need to register the module with Magento. To accomplish this, first, create a register.php in the location app/code/HostAdvice/CustomWidget/registration.php using the code below.

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

[/howToDirection]

[howToDirection]

Next, use the code below to create a registration file, module.xml in the location app/code/HostAdvice/CustomWidget/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="Toptal_CustomWidget" setup_version="1.0.0"/>
</config>

[/howToDirection]

[/step]

Step 3 –
[stepName]Initializing the widget[/stepName]

[step]

Once you create the required registration files, the next step is initializing the widget. Create a widget.xml configuration file in the location app/code/HostAdvice/CustomWidget/etc/widget.xml. Use the following command:

<?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="HostAdvice\CustomWidget\Block\Widget\Samplewidget" id="HostAdvice_customwidget_samplewidget">
    <label>HostAdvice 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="textarea">
        <label>Content</label>
      </parameter>
    </parameters>
    
  </widget>
</widgets>

In the command above, we’ve labeled two input fields, Title, and Content. Whenever, the new widget is called, the values of both fields will be displayed. Also, in the <widget> tag, we’ve declared the block class, HostAdvice\CustomWidget\Block\Widget\Samplewidget to direct the new widget to utilize the particular template.

[/step]

Step 4 –
[stepName]Creating A Widget Block[/stepName]

[step]

Next, create a block field titled Samplewidget.php, in the location HostAdvice/CustomWidget/Block/Widget/, using the code below:

<?php

namespace HostAdvicel\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";

}

In the above command, HostAdvice\CustomWidget\Block\Widge\Samplewidget is properly declared and a custom template is assigned inside the $_template variable.

Now , we’ll use the command below to create a template file samplewidget.phtml, in the location HostAdvice/CustomWidget/view/frontend/templates/widget.

<?php if($block->getData('widgettitle')): ?>
            <h2 class='cloudways-title'><?php echo $block->getData('widgettitle'); ?></h2>
<?php endif; ?>
<?php if($block->getData('widgetcontent')): ?>
            <h2 class='cloudways-content'><?php echo $block->getData('widgetcontent'); ?></h2>
<?php endif; ?>
 In the above code, the widget parameters have been picked by calling $this->getData('widgettitle'); and $this->getData('widgetcontent'); values.

[/step]

Step 5 –
[stepName]Posting The Widget[/stepName]

[step]

[howToDirection]

By now, your custom widget is successfully created. Log in to Magento 2 admin area and select Content then Pages.