How to create custom widget via Install?

Question

I need to create widget category link via Upgrade. How to do this?

Answer 1

Custom widget can not be created alone with a Install or Upgrade script. You need to create a module for it.

Below are the simple steps to create a widget via a module:

1. Create app/code/Stack/CustomWidget/registration.php and paste below code in it:

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

2. Create app/code/Stack/CustomWidget/module.xml and paste below code in it:

<?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="Stack_CustomWidget" setup_version="1.0.0"/>
</config>

3. Next, you’ll need to create a widget.xml configuration file under app/code/Stack/CustomWidget/etc/ folder with the following code:

<?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="Stack\CustomWidget\Block\Widget\Samplewidget" id="stack_customwidget_samplewidget">
        <label>Stack 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 <widget> tag, I have declared a block class, Stack\CustomWidget\Block\Widget\Samplewidget that instructs our widget to use the particular template.

4. Now create Samplewidget.php in app/code/Stack/CustomWidget/Block/Widget/ directory with the following code:

<?php
namespace Stack\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";
}

5. Finally, create a widget template file samplewidget.phtml in app/code/Stack/CustomWidget/view/frontend/templates/widget with the following code:

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

Here, as you can see that I have picked up the value from fields by calling $block->getData('parameter'); where the parameters are widgettitle and widgetcontent.

Now, login to your Magento 2 Admin panel and navigate to Content > Pages to see the widget in action.

Answer 2

You can find a pretty good tutorial for creating a widget in custom module by inchoo here.

Here is also same module on github so you can customise it as your need.

Please let me know if have any confusion.