Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
  1. Code
  2. Creative Coding

Building Custom WordPress Widgets

Read Time:5 minsLanguages:

Building WordPress widgets is just like building a plugin but it is more simple and straightforward. All you need to do is have a single file in which all the PHP goes and it's easier to code than a plugin which can have more than one file. There are three major functions of a widget which can be broken down into widget, update and form.

  • function widget()
  • function update()
  • function form()

Basic Structure

The basic outline of our widget is very simple and there are a handful of functions that you'll need to know. The bare bone structure of our widget is something like this:

Step 1

Before we do all that we'll first load our widget whenever necessary by the function "widget_init". This is an action hook and you can find more about it in the WordPress codex.

Next thing that we'll do is register our widget in WordPress so that it is available under the widgets section.

Step 2

We will enclose our widget in a class. The name of the class is important! One thing that should be kept in mind is that the name of the class and the name of the function should be the same.

Now we'll pass some setting parameters to this class. For example we can pass this the width and height. We can also give our widget a little description if we want to, which is useful if you are bundling this widget with your commercial theme.

Now that we have completed the basic requirements for our widget, we'll move our attention to the three functions that we talked about earlier which are the important functions or the main building blocks of our widget!

Step 3 Function Widget()

The first function is related with the display of our widget. We'll pass a couple of arguments to our widget function. We'll be passing arguments from the theme, which can be a title and other specific values. Next we are passing the instance variable, which is related with the class of our function.

After that we'll extract the values from the argument because we want the values to be available locally. If you don't know what this local variable is all about, just don't worry about it right now and simply add this step!

Next up we will be setting the title and other values for our widget, which can be edited by the user under the widgets menu. We are also including the special variables like $before_widget, $after_widget. These values are handled by the theme.

Step 4 Update Function()

Next up is the update function. This function will take the user settings and save them. It will just update the settings according to the user's taste.

One thing to note here is that we are stripping the values so that any XHTML can be removed from the text which, in simple words, might affect the working of our widget.

Step 5 Form Function()

The next step will outline creating the form which will serve as the input box. This will take in the user defined settings and values. The form function can include checkboxes, text input boxes etc.

Before we create these input fields, we'll have to decide what to show when the user doesn't select anything from the widget. To do this we will pass some default values to it like title, description etc.

Now we'll create the input text box. We will enclose these options within the paragraph enclosing tag.


And that's it. You just made yourself a very nice and simple widget which displays the name of the author of the blog. Furthermore it gives the option to the user whether or not to show it publicly to the audience. Save the code in a PHP file and upload it to your theme directory. Call it in your functions.php. After that go to your widgets panel and you will see the newly created widget.

All the code is included in the download file so that makes it easier to copy and paste. Have fun!

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.