WordPress Managed Hosting - 40% Off For 4 Months - Coupon Code: BFCM2021 Avail Now

How to Create a Widget Plugin for WordPress

Moeez — May 10, 2017 4 Minutes Read
How -to Create Custom Widget in WordPress

WordPress implements its well known drag-and-drop design capability through widgets. These components were originally imagined to allow users a streamlined way of adding design and structure control elements through WordPress themes.

Widgets add and extend functionality of the WordPress website elements. Users could decide the location of the widgets on the website and add/modify various functionality of the website without adding code to the website.

In this tutorial, I will explain how you could create and customize widget plugin for WordPress.

Plugin Creation

WordPress plugins are code-based components that developers could install and activate on a WordPress website. WordPress fetches all the installed plugins through a loop and lists them on the relevant tab of the WordPress Admin.

Open wp-content/plugins folder. Create a new directory and call it “wpblog”. If you like, you could choose any other name for this folder.

In the wpblog folder, create a new file called “wpblog-plugin.php” and add the following plugin description comments in the file:



Save your file. At this point, the plugin wpblog-plugin.php file is ready for action! Well, for now, the plugin doesn’t do anything, but WordPress recognizes it. To check this out, go to WordPress Admin and then into the Plugins menu. You could see that the plugin appears in the list of installed plugins:

WooCommerce plugins

Widget Creation

Next, I will create widget plugin for WordPress. This widget will be a PHP class extending the core WordPress class WP_Widget.

The result of the above (rather lengthy) code is as follows:

WPblog Widget

Code Explanation

The above snippet is part of that constructor that defines the widget’s name. I will only add a single line of code to it.

The above code snippet creates the widget in the WordPress administration. This is where the data (that will be displayed on the website) will be entered.

The above widget() function outputs the content on the website for the visitors. To further customize this function, you could include CSS classes, and specific tags to match the theme display elements. The code is really simple and all you have to check whether a variable is set. If you fail and then try to print it, you will get an error message.


As you can see, creating and customizing a widget plugin for WordPress is not really complicated. I discussed how to create input fields. In the upcoming posts, I will cover more complex field types and display options.

If you need further help with the code or would like to join the discussion, do leave a comment and I will get back to you ASAP.

Create Faster WordPress Websites!

Free eBook on WordPress Performance right in your inbox.

    Create Faster WordPress Websites!

    Free eBook on WordPress Performance right in your inbox.

      Moeez is ‘The’ blogger in charge of WPblog. He loves to interact and learn about WordPress with people in the WordPress community. Outside his work life, Moeez spends time hanging out with his friends, playing Xbox and watching football on the weekends. You can get in touch with him at moeez[at]wpblog.com.



        WordPress Help Zone - Ultimate WordPress Pit-Stop

        Learning WordPress? Or are you expert enough to help others? Join our WP Facebook group!