Note: This tutorial is for DIY WordPress users who are learning WordPress development and coding.
WordPress widgets contain pieces of code that you can add to your website’s sidebars or widget-ready areas.
Think of them as modules that you can use to add different elements by using a simple drag and drop interface.
By default, WordPress comes with a standard set of widgets that you can use with any WordPress theme. See our beginner’s guide on how to add and use widgets in WordPress.
WordPress also allows developers to create their own custom widgets.
Many premium WordPress themes and plugins come with their own custom widgets that you can add to your sidebars.
For example, you can add a contact form, a custom login form, or a photo gallery to a sidebar without writing any code.
Having said that, let’s see how to easily create your own custom widgets in WordPress.
If you are learning WordPress coding, then you will need a local development environment. You can install WordPress on your computer (Mac or Windows).
There are several ways to add your custom widget code in WordPress.
Ideally, you can create a site-specific plugin and paste your widget code there.
You can also paste the code in your theme’s functions.php file. However, it will only be available when that particular theme is active.
Another tool that you can use is the Code Snippets plugin which allows you to easily add custom code to your WordPress website.
In this tutorial, we will create a simple widget that just greets visitors. The goal here is to familiarize yourself with the WordPress widget class.
Let’s get started.
WordPress comes with a built-in WordPress Widget class. Each new WordPress widget extends the WordPress widget class.
There are 18 methods mentioned in the WordPress developer’s handbook that can be used with the WP Widget class.health tips and ideas
However, for the sake of this tutorial, we will be focusing on the following methods.
Let’s study the following code where we have used these four methods inside the WP_Widget class.
The final piece of the code is where we will actually register the widget and load it inside WordPress.
Now let’s put all of this together to create a basic WordPress widget.
You can copy and paste the following code in your custom plugin or theme’s functions.php file.
After adding the code you need to head over to Appearance » Widgets page. You will notice the new WPBeginner Widget in the list of available widgets. You need to drag and drop this widget to a sidebar.
This widget has only one form field to fill, you can add your text and click on the Save button to store your changes.
Now you can visit your website to see it in action.
Now let’s study the code again.
First we registered the ‘wpb_widget’ and loaded our custom widget. After that we defined what that widget does, and how to display the widget back-end.
Lastly, we defined how to handle changes made to the widget.
Now there are a few things that you might want to ask. For example, what’s the purpose
WordPress uses gettext to handle translation and localization. This
__e tells gettext to make a string available for translation. See how you can find translation ready WordPress themes.
If you are creating a custom widget for your theme, then you can replace
wpb_text_domain with your theme’s text domain.
We hope this article helped you learn how to easily create a custom WordPress widget.