Making Dashboard Widgets

When you first log into WordPress there’s a dashboard full of little boxes with information in them. They’re widgets, and they’re super easy to make! This workshop will show you how to do it less than 5 minutes!

This workshop references a way to add code to your site by making a plugin inside your dashboard – watch this workshop to find out how to do that quickly and easily.

Learning outcomes

  1. Understand what dashboard widgets are.
  2. Understand how to make a very simple widget.

Comprehension questions

  1. How are dashboard widgets different from other widgets?
  2. How are dashboard widgets added and removed?

Transcript

0:02
Hi, folks, welcome to another HeroPress Tip of the Week. This week, I’m going to show you how to make these cool little boxes on your WordPress dashboard. They’re called “dashboard widgets”.

0:11
And they are actually just plain old widgets just like the ones that you’re used to, you may recognize this screen in its newer version like this. These put widgets into sidebars, or widget areas.

0:27
Well, this is a giant widget area as well. And fortunately, these widgets are even easier to make than the kind that go in a sidebar.

0:36
So I’m going to show you how real quick, we’re gonna look here at the documentation. See, we’re at the top here. This is the dashboard widgets API. And there’s a link right here in the sidebar to basic usage, which I have pulled up.

0:54
This is all the code needed to make a widget that simply outputs “Howdy, I’m a great dashboard widget.”

1:02
So I’m gonna do this for you. And so you can see how it works. I’m just going to copy all this code, then I’m going to use “Pluginception” to create a new plugin, there’s another HeroPress tip of the week about how to use that. There’ll be a link at the end of this video and in the content below.

1:23
But let’s call this Topher’s Dashboard Widget 1.0 made by Topher. Create a blank plugin and activate it. So there we are. There’s my blank plugin.

1:39
I’m gonna paste this code in there and update file. And now we’re going to go to the dashboard

1:48
And right here is my example dashboard widget. “Howdy, I’m a great dashboard widget.”

1:53
If you want to change it just a little bit. The title is right here. Let me go through what’s going on here.

2:04
There’s a function that simply outputs that text. “Howdy I’m a great dashboard widget.” And then there’s another one, which adds a dashboard widget. And it takes three inputs.

2:16
Here’s the slug, you just need something unique. Then the title and then the name of the function that’s outputting your text. And then you run this add_action on to wp_dashboard_setup.

2:31
And that’s it. So let’s change this to just call it Topher’s Dashboard Widget. And I need a little backslash right there.

2:45
I then change the text to say this, “This is the newest dashboard widget ever.” Update File and reload. There it is.

3:06
And put it up over here. You may ask why would you do this. And there are a variety of reasons. You can put anything in here you want.

3:15
If you know PHP at all or even JavaScript, you could load an RSS feed in here you could have some sort of calendar or reminder system, anything that you would want to see on your website in the backend, but not on the front end.

3:31
Of course, you need to, you know, do whatever you do for normal coding, sanitize input and output and cash if you’re doing RSS and all that kind of stuff.

3:42
Speaking of RSS, there’s even an example in here. There, there’s a section here about aggregating RSS feeds in the dashboard. Basically just recommend you take a look at how they do it for the other.

4:01
We just do that for example. This widget is pulling in RSS. So that’s it. You make a new plugin, you put it just a few lines of code and you have a widget and then inside this function right here you would write whatever code you want to render whatever you want in your widget.

4:19
I hope you find it useful.