Steps to Create a Custom WordPress Widget

May 29. 2020

Adding banners, advertisements, newsletter sign up forms and many other elements to your website is a process that can be achieved through the use of widgets. They will let you add non-content elements into any widget-ready area of your website. If you have recognized the potential of widgets and have been wondering how to create a custom WordPress widget, know that you came to the right place. Today, we deal with a semi-complicated task of creating and adding a custom widget to your website. And we will do it step by step.

First things first – what is a WordPress widget?

As previously mentioned, widgets are pieces of code that allow you to add different elements to different parts of your website by using a simple drag-and-drop interface. WordPress as such comes equipped with several widgets that will provide you with basic utility features. And they work well with any WordPress theme. But WordPress wouldn’t be one of the most popular content management systems had it not offered a chance to customize your website. In this situation, you have the opportunity to create a custom widget for your WordPress website.

What we here at WP Full Care can warn you is that adding/changing code is a process that’s best left for developers. Hence, this guide will be best suited for those of you who are learning development and coding. If you are just learning how to use WordPress, let the basic knowledge sink in before you dive into matters as complicated as this one.

But when you do decide to undertake an intricate process such as this one, always back up your website. We all know how important it is to perform regular backups of your website. They serve as your safety net in case something goes wrong while updating core, themes, and plugins. Not to mention all the other things that can negatively influence your website.

Components to creating a custom widget in WordPress

Before you can start customizing your widget, there’s one thing you obviously need to possess before anything else – a WordPress website. In case you have just installed and activated the platform and are still learning how to use WordPress, then you will have a problem completing a task as complicated as this one. But let’s say you are somewhat of an advanced learner – then there are a couple of ways to add a custom widget to your website. 

For example, you can create a site-specific plugin where you will be able to paste the widget code. Then, you can paste the code into the functions.php file of your theme. While this is one of the best and the easiest options, the widget will only be available when the theme is active. Finally, you can also use the Code Snippets plugin with which you can easily add custom code to your website. We have full faith in your good judgment and we believe that you will choose the best option for your website.

How to easily create a custom WordPress widget in a couple of steps

In order for you to create a custom widget in WordPress, you will have to use the standard WP Widget class from the Widgets API. There are up to 20 options you can play with, however, we will focus our efforts on the bare minimum.

• __construct() – this is the constructor function and here you can define your widget’s parameters
• widget() – the code that allows you to define the output generated by the widget
• form() – this is the place where you can alter widget settings in the dashboard 
• update() – as the name suggests, the place to update widget settings

Of course, should you choose to do so, you could study many additional WP Widget classes and play around with them. But it will take a lot of skill to do that, so make sure you don’t overestimate your capabilities. If all you want to do is use the 4 aforementioned methods inside the WP Widget class, make sure you study the following code.

// Creating the widget
class wpb_widget extends WP_Widget {

// The construct part
function __construct() {

}

// Creating widget front-end
public function widget( $args, $instance ) {

}

// Creating widget Backend
public function form( $instance ) {

}

// Updating widget replacing old instances with new
public function update( $new_instance, $old_instance ) {

}

// Class wpb_widget ends here
}

Once you create a custom widget in WordPress, you will obviously want to register and load it on your WordPress website. That’s the purpose of the final piece of code. 

function wpb_load_widget() {
register_widget( ‘wpb_widget’ );
}
add_action( ‘widgets_init’, ‘wpb_load_widget’ );

Once you finish adding the code, you need to access the Appearance > Widgets page. You will notice the widget you have created in the list of the available widgets. Your job is simple this time around – just drag and drop this widget to a sidebar. Once you are done, add the text, and click on Save to preserve the necessary changes. Are you excited to see what the finished product looks like? Then head over to your live website and see the fruits of your labor in action. 

You won’t have the easiest time…

We won’t lie to you – there are many tasks concerning the maintenance of your website that will be easier than creating a custom WordPress widget. But if you want to add special elements to your website, you will have to dedicate your energy to the task. However, if as a website owner you don’t feel skillful enough to accomplish this task, you can always hire professional help. This task will be just another day in the office for an average developer. And if someone else’s help will save your time, then it is worth every penny.