This website uses cookies

Our website, platform and/or any sub domains use cookies to understand how you use our services, and to improve both your experience and our marketing relevance.

CloudwaysCDN — a powerful solution that offers superior performance and satisfied global audience for your business. Read More

How To Create Custom Widget In Magento

Updated on  June 22, 2018

4 Min Read
Reading Time: 4 minutes

Magento widgets are one of the strongest features of the platform. 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 Magento widget.

Magento Widgets

Magento widget development 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 Magento widget 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 create custom Magento widgets. 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.

Cloudways Magento Hosting For Developers

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 Magento widget for your online store. I hope this tutorial would help you in developing your custom widget. While working on backend or frontend development, loading issues can become a problem. This is why it is important to opt for an efficient Magento hosting service that guarantees fast response times and loading speed.

If you face any problem during the development, you can reach out in the comment section and I’d be happy to help.

Share your opinion in the comment section. COMMENT NOW

Start Growing with Cloudways Today.

Our Clients Love us because we never compromise on these

About The Author

Fayyaz Khattak

Fayyaz is a Magento Community Manager at Cloudways – A Managed Magento Hosting Platform. His objective is to learn & share about PHP & Magento Development in Community. Fayyaz is a food lover and enjoys driving. You can email him at m.fayyaz@cloudways.com

Stay Connected:

Get Our Newsletter
Be the first to get the latest updates and tutorials.

THERE’S MORE TO READ.

  • 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 🙂