How To Create A Custom Wordpress Widget

How to Create a Simple Custom WordPress Widget

June 28, 2012 by - 44 Comments

Last updated: November 6, 2016

This website is built on WordPress, and I recently needed to create my own WordPress widgets. I am not a programmer, but I know enough code to make me dangerous. So after quite a bit of research and trial and error, I've been able to create some very basic widgets for this website.

Why I Needed Custom WordPress Widgets

I have very specific needs, and I found myself using the Text widget frequently to put custom information and code into the sidebars.

Here's an example…

As you can see, I had added several Text widgets, but without expanding them I had no idea what was in them. Sure, I could enter a "title," but I often don't want that to appear within the widget. This makes it extremely difficult to keep track of what widget holds what without expanding each Text widget.

Additionally, I have several different templates, each that may hold some of the same content. I've been copying and pasting the same code into different Text widgets, which is very cumbersome when I then need to edit that code. I can't just edit one — I have to edit them all.

I didn't need anything complex. I needed to be able to create a widget that could be used in multiple places, and that was properly labeled.

Create a PHP File

The first thing you'll need to do is create a PHP file and name it [pluginname] .php and save it in your plugin directory.

Following is what should go into that file. Replace all red code with your own (without brackets, of course).

<?php
/* Plugin Name: [Enter name of your plugin here]
Plugin URI: [Enter your website URL]
Description: [Enter brief description of plugin]
Version: [Enter version number of plugin (probably 1.0)]
Author: [Enter your name]
Author URI: [Enter your website URL]
*/

class [PluginNameWithoutSpaces] extends WP_Widget {
function [PluginNameWithoutSpaces] () {
$widget_ops = array(
'classname' => ' [PluginNameWithoutSpaces] ',
'description' => ' [Enter brief description of plugin] '
);

$this->WP_Widget(
' [PluginNameWithoutSpaces] ',
' [Enter plugin name] ',
$widget_ops
);
}

function widget($args, $instance) { // widget sidebar output
extract($args, EXTR_SKIP);
echo $before_widget; // pre-widget code from theme
print <<<EOM

[Enter code that will appear in your widget here]

EOM;
echo $after_widget; // post-widget code from theme
}
}

add_action(
'widgets_init',
create_function('','return register_widget(" [PluginNameWithoutSpaces] ");')
);
?>

Between the EOM's is where you'll enter the information that will show up in your widget. So whatever it is that you would have put into a Text widget, you'll enter here.

Activate Your Plugin

That was pretty simple, right? Now let's go to your Plugins and find the one you just created. The one I created is called Loomer Newsletter Sign-up Form… Custom WordPress Plugin

Just click Activate like you normally would.

A couple of things here. You'll note that I start all of my custom plugins with "Loomer." You should have a naming convention for your plugins, starting with the same word so that they are easy to keep track of.

Second is that a custom plugin is a great solution for newsletter form code like this. It's something I will place on most pages, but it's also something that may change. When it does inevitably change, I'll just go into the original code and change it once.

Use Your Widget

Now that the plugin is activated, we can use it like any other widget. Just go into your widgets, find it and drag it…

Note that my widget says "There are no options for this widget." That's right, there aren't. We already created it. This is as simple as it gets.

Now when I go to my website, every place where I use this widget, I'll see this…

You just created your own widget. Pretty cool, right?

Add Complexity

In a perfect world, I would not need to go into the PHP file to edit this plugin every time I need to make a change. I'd have an admin page specifically for the plugin. I'm working on that, but looking for the simplest, most basic solution possible.

If you're a programmer and have the answer, please share!