How to Create Custom Widget in Magento 2

Creating a custom widget in Magento 2 can be utilized to insert or edit content in the CMS page block. You can use the widget tool to edit static or dynamic content. Magento 2 widgets are reusable components giving various functionalities that can be included in any CMS block of the Magento 2 store. So today we will learn how to create custom widget in Magento 2. But before moving forward, we will see what is Magento widget.

What is the Magento 2 widget?

Magento widgets are important and helpful in many ways. Magento widgets can help your customers to easily view and explore your Magento 2 store. Further, You can use Magento 2 widgets to create beautiful templates and designs which will be helpful in providing a better user experience. However, these widgets are enough to provide you with powerful functionalities in Magento 2.  Additionally, Magento widgets can improve the storefront view and user interface. You can easily utilize these widgets by adding them to any CMS block of your Magento 2 store.

If we check the technical side, then creating a widget is as simple as creating a HelloWorld. It has a set of advanced configuration options. So you can call and use this widget from anywhere on the Magento 2 store. Here is a list of the default widgets available in Magento 2.

  • CMS Static Block
  • CMS Page Link
  • Catalog Products List
  • Catalog Product Link
  • Recently Compared Products
  • Recently Viewed Products
  • Catalog New Products List
  • Catalog Category Link

Now, it's time to move ahead towards the steps for how to create a custom widget in Magento 2.

How to Create Custom Widget in Magento 2

Step 1: First, create a widget.xml at Milople/BannersSliders/etc/ and add the following code.

<?xml version="1.0" ?>
<widgets xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:bannerssliders:Magento_Widget:etc/widget.xsd">
	<widget class="Milople\BannersSliders\Block\Widget\Posts" id="milople_bannerssliders_posts">
		<label>Banners and Sliders</label>
		<description>Banners and sliders</description>
		<parameters>
			<parameter name="posts" sort_order="10" visible="true" xsi:type="text">
				<label>Banners and Sliders/label>
			</parameter>
		</parameters>
	</widget>
</widgets>

Step 2: Now you need to create a widget template file. Create a template file at view/frontend/templates/widget/banners_sliders.phtml. Then, paste the below code.

<?php if($block->getData('banners and sliders')): ?>
	<h2 class='banners_sliders'><?php echo $block->getData('banners and sliders'); ?></h2>
	<p>This is sample widget. Perform your code here.</p>
<?php endif; ?>

Step 3: After that, create a widget block class at Block/Widget/banners_sliders.php.

<?php 
namespace Milople\BannersSliders\Block\Widget;

use Magento\Framework\View\Element\Template;
use Magento\Widget\Block\BlockInterface; 
 
class Posts extends Template implements BlockInterface {

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

}

That's it. The coding part of the Magento create module is completed. Now let's add a widget on the front end.

Flush all the caches before moving forward.

Now, go to admin panel > Content > Pages.

cutom module in magento 2

Here, you need to select a page on which you want to add this widget. Select the page and click on the "Edit" Option.

Now, tap on the Content tab.

create custom widget in Magento 2

Now, click on the "Edit with Page builder" and you will see another tab. Here, click on the setting icon Check the below screenshot for a better understanding.

cutom module m2

Now, You will see there is an option "Insert Widget". Click on that.

Create custom widget

Here, you need to select the widget from the given dropdown. Select and Insert the widget that you want.

create a custom module

That's all.

Conclusion

Create Custom widget in Magento 2 with very easy and simple steps. You just need to follow the steps and you can easily add a custom widget to your Magento 2 store.

If you are still facing some errors or issues. Do not hesitate to contact us or let us know by commenting here.

Moreover, if you find this article helpful then share it with the Magento community via social media.

Query solved?! If still facing the issue, write in the comment or contact us.

Get in touch with us to hire Magento Developer dedicatedly. Also, we provide hourly-based service for any of your Magento development needs.

Happy Coding :)