How to Create Custom Widget in Magento

by Cloudways  April 13, 2017

Widgets are one of the strongest features of Magento store. They are useful for displaying static information or dynamic content from the database. Content blocks generate all the content which appears at the frontend of Magento. Given this, every magento developer should know how to create custom widget in Magento.

Custom Widget in Magento

Widget development in Magento is a custom front-end extension that gives the facility for non-technical users to create dynamic content easily for their website. Every widget has some configuration options. Creating widget in Magento is very similar to creating a module, the only difference is that it has some more additional files. In this article, I am going to show you how to develop custom widgets in Magento. This article includes the following steps:

  1. Create Module Activation File
  2. Create Config File
  3. Create Widget File
  4. Create Helper Class
  5. Create Main Block File
  6. Create Widget Instance

Note: You can set your own directory name and your own widget directory pathname. I have set Cwdons as the directory name and CwWidget as widget directory pathname.

Create Module Activation File

At first, you need to create your module activation file. With this custom module file, you will create a widget that shows in the frontend. For creating your module activation file, go to app/etc/modules/Cw_Widget.xml. I have set my filename as Cw_Widget.xml.

Here is your module activation file code.

Once, we have created our module activation file, we will now move on to the next step.

Create Config File

After creating module activation file, we need to create the config.xml file and specify blocks and helper class names in config.xml. The config.xml file needs to be created in app/code/local/Cwdons/CwWidget/etc/config.xml

Create Widget File

After creating the config.xml file we also need to create another file widget.xml in the same directory. The widget.xml should be placed in app/code/local/Cwdons/CwWidget/etc/widget.xml

Create Helper Class

Now create an empty helper class in app/code/local/Cwdons/CwWidget/ Helper/data.php

Create Main Block File

Now, we need to create our main block file which will render the output contents of the widget.

Create Topsearches.php in app/code/local/Cwdons/CwWidget/ Block/Topsearches.php

After the Topsearches.php file coding process is over, you now need to create widget instance in Magento admin for rendering it on the front-end pages.

Create Widget Instance

Login to your Magento admin and go to CMS > Widget and click on the top “Add New Widget Instance” button.

Magento Admin Panel

In the Type field, select your widget. I selected widget “Top Search Term”. In Design Package Theme, select your Magento store theme. Now click on the Continue button.

Magento Admin Panel

Set your Widget Instance Title as per your requirement, With the “Display on” option you can select your pages where you want to show your widget. If you want to show your widget in all the pages, then select all pages. After this, click on the Save button and you are done. 🙂

Here is what the final result looks like on the testing website:

Magento Custom Widgets

Conclusion

This was a basic tutorial on how to create custom widget for your Magento store. I hope this tutorial would help you in developing your custom widget. If you face any problem during development, then you can ask me in the comment section, I would be glad to help you.

Start Creating Web Apps on Managed Cloud Servers Now!

Easy Web App Deployment for Agencies, Developers and E-Commerce Industry

About Cloudways

Cloudways is a European MSP that provides custom cloud design, deployment and management solutions on leading cloud providers.

Stay Connected:

You Might Also Like...

  • venkata ram harsha kuncham

    Hi,

    I have created a module in Magento 2. Can you tell me the procedure on how to add this module via Magento 2 CMS?

    • Wajid Hussain

      Can you clarify your questions please 🙂