7 days of WordPress plugins, themes & templates - for free!* Unlimited asset downloads! Start 7-Day Free Trial
FREELessons: 22Length: 2.8 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.16 Creating a Simple Widget

Hey, welcome back. So, in this lesson, I'm gonna show you how to create a widget. Now, widgets are different from theme to theme. You might have a widget that displays some tweets. Or you might have a widget for Flickr. Or you might just have a simple widget that displays some text. And it's really up to you how you use widgets. So, what I'm gonna do is show you a widget that I've created for this framework and explain as best as I can the necessary steps. And hopefully on top of that widget, you'll be able to create your own. So remember in functions > php, let me just open that. I have a section here called, Load the framework, and I include this init.php file. Now this init file will now require the FRAMEWORK '/widgets/widget-business-hours.php'. So our widget is basically a php file. Now on to the actual file. On the very top you can see the widget-business-hours.php title, and then some information about the widget, which is essentially a plugin. So you gotta include some of this stuff, like a name, plugin URI, description, version and information about the author. Next, you gotta do two things. One, declare the class and name it however you want. And then extends WP_widget. Basically, you're creating a child class of the WP_widget class. And WP_widget class has all the functions and all the stuff you need to properly work with widgets. Basically, you're taking advantage of this API to create your own widgets. After you create this class, you must add a hook to the very bottom that takes the widgets_init class that is used in WordPress and then it fires up this class, the register_widget with your widget name. And this will essentially create a new widget, which will then be appended to the back end in the widgets section, just like you see here. So right now I have a widget called Alpha: Business Hours. And I can click and drag and put it in any of my sidebars. Now on to the class itself. To create a widget, you need four functions. You need a construct function that will initialize the widget and also specify some information about it, like name, description, and class name. Then you need a form function which will render the widget in the back end area, which is here. Then, you're gonna need an update function which will process the widgets' values. For example, when you save the widgets. And then you have the widget function, which will display the widget onto your page. So if I take a look, and my page here, at the very bottom, I have this Meta widget for example. Well the function that rendered this as HTML on my page is this one, widget. Okay, so now for each one, I'm going to talk briefly about it. So you have the construct function. Basically, it's like an initialization function. You give the widget an ID, you give it a title, you give it a classname that will eventually be applied to the HTML. And then, you give it a description. That appears right here, a custom widget that displays business hours. Next, the back-end layout for the widget. You start with a defaults array, it means an array of values that will be used the first time a widget is being used. I have 9am to 5pm here. If I direct my widget into a sidebar you can see these values, 9am to 5pm. If I delete it however, and change this from 9am to 8am, refresh my page. I bring it up, now it's from 8am to 5pm. Okay, so basically you're creating this defaults array for every field that you'll have in that widget. In my case it's title description Monday to Friday, Saturday and Sunday. Next you have this instance variable, and then the wp_parse_args. Well this is used basically to blend the values from this instance variable with the defaults. That's probably the easiest way I can explain it. And then you have the HTML for the widget itself, meaning the HTML that will be rendered here. It's this label, all of the inputs, text areas, and so on. So basically, we have a label and then an input with the class 'widefat' which is a class used by WordPress. And then we are using some information from the widget itself to populate some attributes, like this one, label for, and this one we're getting the field ID for the title. And we use the same in the ID of the input, so the label will point to this input. So as I said, this whole function will display the widget here, in the sidebar. But what happens when, let's say I add a description, test, and I save it? Well, when I save it, the update function is called. And it has two parameters, $new_instance which contains the new values, and $old_instance which contains the old values. So what we're doing here is basically update the old with the new. And making sure the values are sanitized first so that users don't accidentally enter some HTML that might break layouts, or enter even some php in there which can be harmful later on. So once every value is updated in the instance variable, then we will return this. So then, once we save this, it stays like that. And now if we refresh, you're gonna see this. Business Hours text, which is the description we just added, and then the hours. Finally, the function that is responsible for outputting this bit of HTML is the widget function. It receives two arguments, $args and $instance. And $args is basically an array of all the arguments of all the properties of the widget. And we use the extract function so that everything inside that array is extracted as variables. Then we start displaying the $before_widget, which, if you remember from functions.php, was defined, Let's see if we can find it, was defined right here, "before_widget'. So, inside this function, this little bit will be displayed, of course, replacing these values with the correct ones from the database. Then displaying the title, displaying our fields, and then displaying $after_widget. Which is, again, something that we defined right here. And that's basically if for the widgets. Now I didn't write the whole code with you step-by-step because widgets are sometimes optional and in a WordPress theme. And I just wanted to focus on all the essential stuff first. Okay so, now the framework is almost complete. And as you can see, in this shape, it doesn't look too good, it's not styled at all. So, that's what I'll do in the next lesson. I've written some styles for it and I'm gonna walk you through them and show you what they're all about.

Back to the top