FREELessons: 6Length: 32 minutes

Next lesson playing in 5 seconds

  • Overview
  • Transcript

2.3 Creating a Meta Box for Information or Instructions

In this lesson, you'll create a meta box that provides information or instructions for post editors.

Related Links

2.3 Creating a Meta Box for Information or Instructions

Hello, and welcome back to this Tuts+ course on creating custom metaboxes in WordPress. In this part of the course, we're going to add a metabox that will appear on the right side of the post editing screen, and it will contain instructions for editing the post. So it will be up here with the Publish and Formatting boxes. So let's take a look at the code, here's my plugin file that I've already created, and I've got my comment to that text at the top, so it's set up as a plugin. And I've also added some comment to that text, to tell me exactly what's going on with this function. So now let's create the function. So my function will be called tutsplus_posts_help_text, and I need to attach it to a hook, and that hook is the add_meta_boxes hook. So my first parameter in add_action is add_meta_boxes, meta_boxes, not meat _boxes, now I don't think WordPress has meatboxes. Add_meta_boxes, and I've made sure I've typed it correctly with underscores and the right words this time. If you've seen the previous part of the course, you'll know that I got that wrong before. And the second parameter of add_action is the name of my function, so I'll copy and paste that in. All right, so my function is set up, and just like in the last case, I'll use the add_meta_box function within my function to set up my metabox. So once again, we have six parameters, the first is the unique name of my meta_box, tutsplus_post_help. The second is the title, so this is what users will see. The third is the name of the callback function. And once again I've used the word callback in there, so I know exactly which one's which. Sometimes it can be a bit tricky to remember which of these is which. My third is the post type that it will appear with, and that's post and don't forget that if you want it to appear on more, you can, but you use an array of post types here instead. And then I say where in the page I want it to be, now, instead of normal, this time I'm using side, because I want it to be on the right hand side on the sidebar. And then the position within that will be high cuz I want it to be at the top. So that's my function, the next thing to do is create my callback function. So here's the name of my function. And then within this, I simply populate it with the HTML that will be inside, My metabox. So I'm starting off with a paragraph and then putting a list in. So that's the content of my metabox contained in that callback function, so now I'll save that and take a look at my screen. And now I'm in my post, and I've refreshed it in the post editing screen and there's my meta box over here, using this screen. So if I want to, I can reduce it by clicking on the arrow or I can maximize it, so I can see the instructions. And that's the sort of thing you might find useful if you're building a site for a client or for a colleague who's not entirely sure how to use WordPress, and you can add some instructions there. So that's how you create a meta box with text content to add to the side of your post editing screen. In the next part of this course, I'm gonna take a look at how these two plugins that we've created are affected if we activate the Guttenberg plugin. So in other words, where will they appear on the screen when we're using the Gutenberg editor? See you next time and thanks for watching.

Back to the top