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

0 Comments
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)!

0
Would love your thoughts, please comment.x

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2024

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

20 Best Free WordPress Themes for 2024 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2024 Compared and Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2024

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...