Skip to content

Making Your First WordPress Widget

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

  1. 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.
  2. Rename the example class to contain your widget class name. I called mine QG_Widget.
  3. Remove the form and update methods. (Remember we said this Quick Guide was basic. If you want to challenge yourself, understand and make use of these.)
  4. Tweak all of the other sample code to match that this is your widget not my_widget and similar.
  5. Register your widget. This is done by hooking onto the widgets_init action and called the register_widget function with the name of your class as the argument.
  6. 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.
  7. 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' );
});
Yay! 🎉 You made it to the end of the article!
David Hayes
Share:

0 Comments
Most Voted
Newest Oldest
Inline Feedbacks
View all comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!