Chat with us, powered by LiveChat

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.

How To Create Custom Widget In Magento

April 13, 2017

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.

Scalable, Super Fast, & Secure Magento Hosting

Our Clients Love us because we never compromise on these features

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.

<?xml version="1.0" ?>
        <Mage_Cms />

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

<?xml version="1.0"?>

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

<?xml version="1.0"?>
  <CwWidget_topsearches type="CwWidget/topsearches">
    <name>Top Searching Terms</name>
    <description type="desc">Lists Top Searches</description>

Create Helper Class

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

class Cwdons_CwWidget_Helper_Data 
   extends Mage_Core_Helper_Abstract

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

class Cwdons_CwWidget_Block_Topsearches
 extends Mage_Core_Block_Template
 implements Mage_Widget_Block_Interface
  protected function _toHtml()
    $searchCollection = Mage::getModel('catalogsearch/query')
               ->setOrder('popularity', 'desc');
   $html  = '<div id="widget-topsearches-container">' ;
   $html .= '<div class="widget-topsearches-title">Top Searches</div>';
  foreach($searchCollection as $search){
     $html .= '<div class="widget-topsearches-searchtext">' . $search->query_text . "</div>";
   $html .= "</div>";
   return $html;

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


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

Share This Article

Boost Your Magento Store Performance by 5x Times & Maximize Your Sales

Our fastest Magento hosting can help you in growing your business revenue by 500%

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

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

Do you like what you read?

Get the Latest Updates

Share Your Feedback

Please insert Content

Thank you for your feedback!

BFCM 2019