FREELessons: 12Length: 1.3 hours

Next lesson playing in 5 seconds

  • Overview
  • Transcript

3.3 Adding a Meta Box

Hello, and welcome back to this Tuts+ course on WordPress plugin development. In this part of the course, we're going to finish off our plugin to customize the WordPress admin screens. So we've already got a dashboard that's been customized. We've removed some of the dashboard widgets we didn't want, and we've added this new welcome widget and what we're gonna do next is add the widget to the post editing screen. So if I go in to one of my posts to edit it, you'll see over here, on the right hand side, I have published widget or metabox formatting categories, tags and featured image. And I'm gonna add a new meta box above that published metabox that has some instructions for users on how to edit a post. And this is something I sometimes do on client sites, because I can't always rely on clients to hit the Help button up here. So here you can see you've got the title and post editor and this gives you some information about how to use the post, but I like to give my clients something a little bit more bespoke. So let's go back to our plug in. So here's my plug in. I'm going to change the version to meta 3.3 because that's the path of the course where I'm and I've also made a slight edit here, because I use the wrong description in the commented out text in the previous part. So for our welcome widget, I've changed that to add a new widget to the dashboard. And now I've got a space here for a new function to add a text box to the post editing screen. So once again, I'll be creating two functions. My functions throughout the mata box and my call back function. So my first function is the function to have the widget. And to do that, I use the add_meta_box function again. So that has a number of parameters. The first one is the unique ID of my parameters. The unique ID of my metabox, sorry. The second is the title, which will be seen by users. The third is the callback. The fourth is the screen it appears on and in this case we use the post type, and so that's just post. And then we have the position which is the side, the right hand side bar and where we want it to be which is high right at the top. So that's my add_meta_box function and again, I hook that, So I'm hooking that to the to the add_meta_boxes hook again rather and then the name of my function goes in here, so I'll copy and paste it. So I now have that. Don't forget because it's got a callback function, if I was to save it now I'd get an error. So I now need to create my callback function. So let's copy that. So save that so you can see what it does so far, and then I'll refresh my post editing screen and you can see I've got this empty using this screen metabox up here. So now let's populate it and again I'm going to add some HTML. Once again, instead of making you watch me type that all out, I've saved that in an HTML file and I'll paste it in. So again, I need to close my HTML tags, my PHP tags rather and then open them up again and check my indentation is all in order. So we have a paragraph with an opening sentence use the screen to create new blog post and edit existing ones. URL, a list item and then closing the URL. Now, at the moment this isn't translatable. It isn't internationalized. So I'm gonna fix that both for this metabox and for the dashboard metabox or widget that I created as well. So I've spent a bit of time editing my content here. And let me just give you a quick overview of what I had to do to internationalize it. So I've used this internationalization function around my text, but you don't use internationalization around the HTML. So in each case, I'm echoing the HTML, and then I'm using this dot to show that I'm going into PHP into a function. I'm using the internationalization function with my text as the first parameter, and then the text domain Tuts+ which is defined up here for the plugin header and that's the second parameter. So I then close that, let me go back to this one I was on. So then in close the brackets, put another period here, or full stop in British English and then I am doing HTML again. So I don't enclose that in internationalization functions. That is fairly straightforward in most cases, but in some I have got HTML within my list item or my paragraph. So you can see here for example, I've got my list item, I've got my text here. And then I've got strong, which isn't inside an internalization function, backed PHP with a period internationalization function, at media, again out to HTML, close the strong. It's just a case of going back and forth between PHP and HTML using this period or full stop here. And what I suggest you do is if you want to learn about internationalization, you go through the code that's provided with this course in detail and have a look how I've done it. And you can also look at this practical guide to internationalizing your WordPress projects in the Tuts+ tutorials. So that's how you create a metabox within the post editing screen. As you can see, we've now got this metabox here with information for users on how to use the screen. In the next part of the course, we'll move on to creating our final plugin, which will display the most recent post in each of three categories along with their featured image. And then that will be hooked into the site so we can display it wherever we want. See you next time, and thanks for watching.

Back to the top