Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member
In order for a widget to be used in the WordPress environment, we need to first register it. This is going to be done using a WordPress action called widgets init. Additionally, if we want to set up any configuration elements, we need to do this in the widget itself. We are going to do it in the constructor. So let's go back to our class. You can see we have declared our SimpleWidget class that extends the WP_Widget class. We created an empty constructor, and we've also created the functions, widget, update, and form. So now to register it, we are going to create a function that's going to do the registering.
We want to make sure to do this outside of the class, so that it gets executed when we activate. So we will declare function. We will call it simple_widget_init, and in here, we will just call the special register_widget class, and we pass to it the name of the class. So make sure that that simple widget matches the class that you have up here, because that class definition is going to set up when your class gets run.
Then we need to add the action for widgets_init. We want to call the simple_widget_init. So this should set up our widget and make it so that we can use it in the WordPress environment. So let's go back to the administrator. If we scroll down, we will see our Simple Widget is listed here, but it's not activated yet. So let's go ahead and activate it, which will run the code, which will call that function once the widgets_init method gets run.
So let's go into the widgets, and we should see our widget registered. Now you wouldn't know it, but it is here. It's this one. Because we didn't set up any of the configurable elements, some of which will actually display here, it doesn't say anything, and we will look at doing that in a second. But let's go ahead and just grab it and drag it over here, and you can see that it will actually work. So if we go back to the front-end of our web site and refresh it, you can see it appears down below, with the default information that we had displayed.
If you want to display some of those options, which you most likely do, we are going to do that by setting it up in the constructor. Specifically, what we are going to do is we're going to call the parent constructor of the WP_Widget class. You can find information for the WordPress classes online at phpdoc.wordpress.org. This is the definition for the WP_Widget class, and you can see it will tell you how you use the class, and it also tell you the inheritance chain, but in addition, it will tell you how the constructor works, you can see the constructor is going to take the ID, a name, and then some options in an associative array, both widget options and control options.
The widget options are going to have information metadata about the class, and the control options will have size information. So let's first create a variable to hold our widget options. We are going to set this equal to an associative array, and we are going to set up a classname and set that equal to simple-widget. We are then going to set up a description, and we will call this "Just a simple widget." So there is our metadata.
Now we need to pass this into the parent class by calling the super constructor. The way you access the parent class is you use a special parent keyword, then these two colons, and then you can determine which method you want to run. In this case, we're going to run the constructor, so it will look like we are calling a method with the same name as the class. And we pass in the ID-- you want to make sure that this is unique-- the title--this is what's going to get displayed on the bar of your widget when you're in the back-end--and then any of our options. In this case, we have just a widget options.
You could, additionally, pass the configuration option with the size information. Make sure that this variable here matches this. You can see I made a mistake. It should have an S there. So let's go back to the administrator, let's remove our widget, and let's go ahead and refresh the widget page, so our simple widget will appear. It's not in the top any longer because they're in alphabetical order. So now you see it's down here after the RSS, and after the Search. Simple Widget, which was the title, and Just a simple widget came from the description.
It will still behave the same, and I don't have any configuration options. We will talk about those later. So that's the basics of adding a custom widget to the WordPress installation. Basically we do it like we do a lot of other plugins: We add an action, and that's specifically is the widgets in that action. We are going to then, inside that action function, we are going to call the register widget method, which is going to set up our widget for use. Finally, if we want to do any configuration options, we can do those by calling the super constructor inside of the constructor class.
Get unlimited access to all courses for just $25/month.Become a member
61 Video lessons · 100136 Viewers
56 Video lessons · 113162 Viewers
71 Video lessons · 82028 Viewers
131 Video lessons · 39359 Viewers
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.