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
Screenshot()
Read More

We are now using MathJax!

The very first trouble I faced, while moving the blog from WordPress.com hosting to WordPress.org, was due to a bug in WordPress’s OPML importer. The ‘importer’ messed up with all LaTeX equations on this site — just by deleting a single but very important string from all LaTeX codes. If you are really moving your WordPress content from one blog…
rect
Read More

Top 10 Best Tips to Increase Your Twitter Followers

Today, Twitter has become one of the most effective tools for businesses and marketers. It can help you reach out to new customers, boost engagement, generate leads, build brand awareness and drive conversions for your company. However, you wouldn’t stand to experience all these benefits, if you don’t have followers.Remember, having a long list of followers on Twitter is going…
android apps
Read More

How to build your first Android program?

Start is scary; in any field of expertise. Here I am talking about coding… app development mostly. People prefer to take the safe side when there comes the task of developing apps, especially for the first time. Thinking about the hefty amount of work they should put into it ends up making them give up on the whole idea. Building…
Google PageRank Update
Read More

Google PageRank Updated – We became better

Google PageRank (PR), the most popular base 10 website popularity algorithm, has received an unexpected update on this December 6 –exactly 10 months and 2 days after the last update was released. My blog has regained its PR4 rating, which was gone to PR1 after I upgraded the site-domain from subdomain wpgaurav.wordpress.com to gauravtiwari.org in November 2011. In last PR Update (February…
hosting premium
Read More

The Advantages of Quality, Premium Web Hosting

Well, there are two kinds of Web Hosting services, Free and the Premium. The free version of hosting has always been popular but has many disadvantages. Our article on “The disadvantages of Free Web Hosting” can give you a brief review of why free web-hosting is commercially ‘bad’. Experts always prefer business and, even personal blog owners to go with professional…