Sidebars were one of the oldest features of WordPress as a publishing platform, and widgets have been in WordPress for years. This little quick guide walks through the process of making your own widget. Why would you want to?
- Your mortgage-selling client wants a little simple calculator widget in their sidebar
- You want to show a subset of content in a customized way
- You just want to put some markup that WordPress’s stock “Text Widget” always feels like it might eat on you
- Because learning is valuable even when it doesn’t have concrete purpose immediately ;p
If any of those reasons, or something else, applies to you, this video will explain to you the basic process of extending a WP_Widget class and making sure WordPress lets you put that widget somewhere. (Higher level feature of widgets — like form fields — will be in a future Quick Guide if there is demand.)
Check out the video:
How to Make a WordPress Sidebar Widget
- Copy and paste the code from the WordPress codex page explaining how to make a widget. We could debate this point, but I find it to be far easier than remembering how to type out the boilerplate that they require in WordPress and just want the methods are.
- Rename the example class to contain your widget class name. I called mine
QG_Widget
. - Remove the
form
andupdate
methods. (Remember we said this Quick Guide was basic. If you want to challenge yourself, understand and make use of these.) - Tweak all of the other sample code to match that this is your widget not
my_widget
and similar. - Register your widget. This is done by hooking onto the
widgets_init
action and called theregister_widget
function with the name of your class as the argument. - Tweak the
widget
method of your object so it displays something. This is another case where I honestly almost always copy and paste from the Codex because the boilerplate is annoying to type and hard to remember. - Add that widget to the sidebar/footer/other widget area, and be happy that it works.
Copy and pasting isn’t great practice. But when you make the boilerplate-vs-magic trade-off on the side of boilerplate — which I personally favor — it is often the most expedient way to get something working. Happy hacking!
The Final Version of This Tutorial’s Widget Code
This has one extra outdent from the video. (It bothered me too.)
class QG_Widget extends WP_Widget {
/**
* Sets up the widgets name etc
*/
public function __construct() {
$widget_ops = array(
'classname' => 'qg_widget',
'description' => 'This is a widget for a quick guide',
);
parent::__construct( 'qg_widget', 'Quick Guide Widget', $widget_ops );
}
/**
* Outputs the content of the widget
*
* @param array $args
* @param array $instance
*/
public function widget( $args, $instance ) {
echo $args['before_widget'];
echo $args['before_title'] . apply_filters( 'widget_title', 'Quick Guide Widget' ) . $args['after_title'];
echo esc_html__( 'Hello, World!', 'text_domain' );
echo $args['after_widget'];
}
}
add_action( 'widgets_init', function(){
register_widget( 'QG_Widget' );
});