For those who run WordPress powered websites understand the importance of adding widgets on their site. Widgets are a great way to add content and additional features on your website. They make it extremely easy for you to simply drag and drop several elements such as sidebar, header, footer, of your website and thus making the most out of its functionality. By utilizing widgets correctly, you can make your website useful for your visitors. And the best thing about them is, you can use them anywhere you want, thus helping users to find more content on your website.

Many of the WordPress users always search for the perfect WordPress widget that will help them do exactly what they want, but with a little technical knowledge and coding skills, you may find it easier for you to create your own WordPress custom widget.

In this tutorial, I am going to show you the ways through which you can create your custom widget. For a better understanding, I’ll be covering some extra points that you need to understand before you actually start creating the widget itself.

Where You Can Place a Widget

WordPress usually provides two options for placing a widget – either in a plugin or inside a theme. If you decide to place it inside the theme, the widget will get activated as soon as the theme is available for the activation. Although, it will get disappear as soon as the theme has been changed by the user. On the contrary, if you decide on placing it inside the plugin, it will be available till the plugin is activated. Although, it’s entirely up to the user where they want to place a widget. But as widget is something that is related with the looks of a website, webmasters mostly prefer to place them inside the theme. Web owners must try to analyze whether they want a widget that is dependent on the theme or not. If they want a widget regardless of the theme, then it’s better to go ahead with the plugin.

In this article, we are going to discuss about the ways through which one can create a custom WordPress widget by using both plugin and theme way.

Creating WordPress Widget in Plugin

  • To create a widget in plugin, first you need to go to your WordPress installation directory and then navigate to /wp-content → plugins.
  •  After this, start creating a new .php file for your plugin. Give it a name anything you like but make sure it should be in-tune with the standards laid down by WordPress.
  • Once you create the file, take out any of your text editing tool and start editing the file.
  • Now, paste the below mentioned code on the top of the file.
<php
/*
Plugin Name: Name Of The Plugin
Plugin URI: http://URI_Of_Page_Describing_Plugin_and_Updates
Description: Give a brief description of the Plugin.
Version: 1.0  (The Plugin's Version Number)
Author URI: http://URI_Of_The_Plugin_Author
License: A "Slug" license name e.g. GPL2  */
  • After updating the information, save all the changes.
  • In the next step, sign in to your WordPress dashboard and navigate to the Plugins → Installed plugins.

Creating Widget Inside the Theme

For creating widget inside the theme, first of all we have to extend the default
WP_widgetclass. The process is pretty simple, all you need to do is create a new class, which will automatically take over all the features and properties of WP_widgetclass.

In the next step, we will proceed toward creating a custom functionality to bring an added edge to your widget. Just write the below mentioned code before the closing php tag of your theme’s function.php file.

Leaving any space between the code could generate errors in your theme, so make sure not to leave any blank space while writing.

<?php
class My_Widget extends WP_Widget {
public function widget( $args, $instance ) {
echo 'My New WordPress Widget !!';
} }

Up to this you’ve successfully created a widget, but it’s not functional yet. We have to make it work by following some steps.

Adding Widget to WordPress

We have strategically utilized WP_Widget Class for creating a widget, but we haven’t still informed WordPress about this newly created widget. To do this, we have to add the following code to ‘hook’ widget:

add action( 'widgets_init', 'my_widget');
function my_widget() {
register_widget( 'My_Widget' );
}

This is a method of informing WordPress that you’ve created your widget and it’s ready for being processed.

Exploring Your Newly Created Widget

If you’ve followed this tutorial closely, then it’s time to congratulate yourself as you’ve successfully created your first widget. But creating a widget isn’t enough unless until you don’t add description or any label on what it actually does. To do this, we recommend you to add a constructor on your widget. This will help you add an information about your widget. Simply paste the following code after the widget() function.

function __construct() {
parent::__construct( 'my_widget', // Base ID of your widget
__('My New Widget', 'text-domain'), // name of the widget
array( 'description' => __( 'This is the my newly created widget', 'text-domain' ),) // Widget description
);
}

The process looks quite daunting to beginners, although it’s quite easy. Let me give you a straightforward description for this:

There are some pre-defined set of rules and standards which you have to follow while working with construct method. They are:

  • The first parameter should be the ID of your custom widget
  • Second, names that are going to be displayed on the widget list
  • Third is the array, which normally contains a brief description about a widget.

Now, refresh your website and you’ll observe the widget functioning on your website.

See, it isn’t that difficult to create  a custom widget to do exactly what you want. Just follow the steps and you are ready to go.

Total
0
Shares


Feel free to ask questions, send feedback and even point out mistakes. Great conversations start with just a single word. How to write better comments?
3 comments
  1. Heyy Thanks Sarah for this article… Its time to make some custom widgets for me.. will catch up with u sharing my results soon here.. Thanks for sharing your knowledge.. Cheers..

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

You May Also Like

How to use Apple TV to control your smart-home gear

Apple HomeKit is a hub which allows all kinds of automation in the home to talk to each other, and to talk to Siri, the virtual AI of Apple, much more easily than they otherwise would. This is the main draw of the HomeKit – it’s a central hub which allows you to control all of your home automation from…

How to Publish and Proofread? : Awesome Blogging tools for Windows

I am an experimental Windows user. I find, install and experiment several new applications on my Windows PC every week. Most of the applications and tools, I have installed are directly or indirectly about  desktop publishing. Some of them are aimed to help me with my study and some others are for web development . In addition to them, there are…

A Beginner’s Guide to Writing a Press Release

Having a career as a press release writer is difficult enough. It’s important to know what you’re doing, or you’ll deal with the backlash of irritated journalists and unamused readers. An abundance of other people’s jobs depends on how well you can do yours. That’s a lot of weight on your shoulders. Typically, a press release is a one page…

20 premium quality free blogging themes for WordPress

Blogging has entered a new generation and is evolving crazily on the head of modern day bloggers. It has grown to a whole new definition in recent years. Bloggers are no longer just typing texts. They are also playing great with graphics, keywords, gaining reader-base and building Search Engine impression. New design trends and SEO changes have completely changed of…

HostingRaja – One of the Best Web Hostings in India

Looking for the best hosting company in India? But, yet, don’t want to spend too much money on the hosting packages? Then, you are going to love this post, because today I am introducing HostingRaja which is, itself, one of the best web hosting providers in India. They have just surpassed all the limits of providing quality features and that’s…

Consequences of Light Absorption – The Jablonski Diagram

All about the Light Absorption’s theory on the basis of Jablonski diagram. According to the Grotthus – Draper Law of photo-chemical activation: Only that light which is absorbed by a system, can bring a photo-chemical change. However it is not true that all the kind of light(s) that are absorbed could bring a photo-chemical change. The absorption of light may result in…