How to Create a Custom WordPress Widget

October 19, 2015WordPress

Widgets are such an integral part of WordPress themes that it is hard to imagine a WordPress theme without widgets. Widgets are executable scripts that you can simply drag and drop in your sidebars or any other widget ready area in your theme.
WordPress widgets make it super easy for users to simply drag and drop elements into their site. There are many WordPress themes and plugins that use widgets to allow users to create their own layouts. In this article, we will show you how to create your own custom WordPress widget.

What is a WordPress Widget ?

WordPress widgets were originally created to provide a simple and easy-to-use way of giving design and structure control of the WordPress theme to the user. The great thing about widgets is that you can drag and drop them into your sidebars or any widget ready areas of your website. This allows great flexibility to plugin and theme developers. They can add functionality into their products and let users decide when and where to use that functionality without messing with code. Similarly, as a user you can also create your own widgets in a site-specific plugin, so that you can drag and drop them into any theme you are using.
Widgets can be used in sidebars only. If your theme is not having a sidebar, you can register a sidebar as well. Sometimes we need to use a sidebar on a different area like footer or in menu area, so for more detailed article about registering a sidebar, visit my another article.

Creating a Widget in WordPress

To create a widget, you only need to extend the standard WP_Widget class and some of its functions. That base class also contains information about the functions that must be extended to get a working widget.

There are two ways of creating a widget. You can make a simple plugin and paste the code in that file OR you can just paste it into your active theme’s function.php file.
In this tutorial, we will create a simple widget with a input field to store text in admin panel and it will say hello with that text to users. Take a look at this code and then paste it in your theme’s functions.php file.

Let’s give it a name “Hello Widget“. Take a look on the code below.

Now go to Appearance » Widgets, drag and drop Hello Widget in your sidebar to see this custom widget in the front end. Try changing the title to show in front end and see what happens.

Pretty simple, wasn’t it? First we created a custom widget. Then we defined what that widget does and how to display the widget back-end. Then we defined how to handle changes made to widget. Lastly, we registered and loaded the widget.

We hope this tutorial helped you learn how to create a custom WordPress widget. Let me know what widgets you are creating, by leaving a comment below.

About the Author - Gaurav Panwar

Hi, I am Gaurav Panwar. A Freelance Web Developer, who make the web a better place. I love it, and you will love it too. Have an idea in mind? I will love to discuss web projects, whether in their early stages or ready to start designing.

Leave a comment