2.1 Creating a Meta Box: The Callback Function

Hello, and welcome back to this Tuts+ course on creating custom metalboxes in WordPress. In this part of the course, I'm gonna show you how to code a plugin that creates a metabox in which you can put post metadata, or in other words, custom fields. And we'll start here by creating the bones of our function and the callback function which will populate what we see in the metalbox on the post editing screen. And in the next part of course, I'll show you how to add to that to create a function that saves any data input via that metabox. So as you can see here on my plugin screen, I've already created a plugin file and I have activated it. But at the moment, it doesn't do anything, and that's because we need to add the code. So here's my plugin file, and you can see it stored within the WP content plugins folder. So you can see I've added the commented out text at the top with the plugin name, the URL, the description, the version and the offer, I'm also going to add to their the license which is GPLv2. I'm just going to tidy things up a little bit with my indentation at the top, you don't need to worry about any of this, I'm sure yours will be perfect when you start. So I'm then finally going to add the text domain. So it's ready for internationalization. Okay, let's make sure I type that correctly. So I have a text amendment, let's add that in capitals. And now that's my plugin set up and ready to go, but it's got no code in it yet. So I've created some commented out text here to tell me that I'm adding the metalbox here. That this function will create my metalbox in the post editing screen. So I'm gonna make that a little bit more specific. So I'm gonna add some more comment to that text here cuz there's quite a lot here. So I'm getting really jiggy with my fingers on the keyboard today. So let's open our function, and give it a name which will be tutsplus_post_metabox. And then I'm gonna hook that to the add metaboxes hook. So the first parameter of add action is add-metaboxes, and the second is the name of my function, so that's ready to go. But again, there's nothing inside my function so it's not gonna do anything yet. So what I need to do here is add one function, and that's the add_meta_box function. Now add meter box has six parameters. So I'm gonna create the space for all those. My first parameter is the name of my metabox, Which is tutsplus_post_metalbox. And that's to indicate that it's a metal box on the post editing screen. My second parameter is the title of the metabox, and this is what we will be seen by users. So I'm gonna add extra information here. The third parameter is the name of my callback function. And the callback function which we will be written shortly is the function that populates the metabox. Now, I always like to include the word callback in the name of my callback function, because then I know exactly what I'm working with. What you'll find when you're creating metaboxes is that you create quite a lot of functions, and quite a lot of unique IDs and names for things. So, the more specific you can be with the way you name things, the easier it will be to come back to your code in future and understand exactly what it's all doing. The fourth parameter is the post type on whose editing screen this will appear. So it's post. Now you could add more than one in which case you'd put them inside an array. The fifth parameter is which part of the post editing screen it's in, and that's normal. So that's normal means, the main part of the post editing screen where the section is where you edit the content of the post. And then the sixth and final and I've added too many here. The sixth and final is high, and that means that it will be above any other metboxes that have been created by WordPress underneath the main editing pane. So we have a unique name for metalbox. We have its title, we have the callback function name, the post type it will appear in, which part of the screen it is, and where in that screen it is. So that's all you add inside your tutsplus_post_metabox function. Now let's write the callback function. Now the name of that is tutsplus_post_metabox_callback. And I'm gonna copy that. Now this itself has to have the parameter of post, because it relates to the post object. So within this, we add a form. Now making sure I close PHP here, and I open it back in here, because I'm working in HTML. So I create my form, I'm also gonna close it. And then within my form, the first thing I do is add a nonce, and that's for security. That means that people can't go to a link generated by this form and keep populating it, it'll only work once. So that uses the WP nonce field function which is provided by WordPress, and that has two parameters again. The first parameter is the name of the action that will be verifying using our nonce. And then the second parameter is the name of the nonce field that's generated. And I've included a link to a page in the Codex on the WP nonce field to the notes for this course so that you can find out more about it. And we'll be using this nonce field later on when we come to save data from metalbox. So having created on nonce field, the next thing we need to do is retrieve data that we'll be using to populate the field in our form. So we're gonna use this by creating a variable called weather, because I'm gonna be asking people to store today's weather here. And we retrieve that data using the get_post_meta function. And that has three values, the first is the ID of the post, which is the current post. The second is the ID of this metabox field. The name of the field. And the first is true, because we only want to collect one value. So, we're pulling data at the moment. We haven't actually populated our form yet, and that's what we do next. So let's close PHP. And now we're working in HTML again, we create a label. And that's the label for the input field that we'll be creating next, which is called tutsplus-metadata-weather. I'm not close is our label, so the label will say today's weather. And then underneath the label we'll have failed itself. And that's a text input field, with the name tutsplus-metadata-weather. And the value, Which will echo out this weather variable and I've just realized I've missed out on equals there. So the value equals, opening PHP again. Don't have quotation marks here. So that's my form. So I've got a form here, which is for posting. I've got a nonce field. I've got the weather variable which gathers that post metadata. I've got a label for my field, and then I've got an input field which is a textfield. Now I'll save that and check it out on my site. So let's take a look at this error that I've created. I've also noticed from this site slightly misnamed my plugin file, which I'll go back and correct, but we're looking at line 46. That's because my spacing is wrong. There we go. So let's save that again. Now if I go to a post editing screen, it's not actually there yet. And I've already taken a look at the code and I found a glaring error which is my add action function here. I have misspelled and mis-punctuated the Add metaboxes hook. So it should be add_meta_boxes. So I'll correct that and save it, and there it is my metabox, underneath the main post editing pane. So that's how you create your metabox callback function. In the next part of the course, we'll add a function that saves any data that's input to this metabox. See you next time, and thanks for watching.