Add a Meta Box to an Admin Page

Adding a Meta Box to an Admin Page

What is a meta box?

A meta box is a floating box that appears in an admin page and contains form fields. The user can move their positions and toggle their visibility in the Screen Options pane. WordPress can remember those changes so the user can arrange those boxes for their needs. So they are useful.

The framework supports two kinds of meta boxes. One is for post definition pages including custom post types. And the other type is for generic admin pages created with the framework.

Create a meta box

To get started, let’s create one for an admin page. We’ve created admin pages already in previous tutorials. We are going to use one of them and add a meta box to a page created by a separate plugin.

Steps

1. Prepare an admin page
2. Include the library
3. Extend the library class
4. Define form fields the setUp() method
5. Instantiate the extended class

Screenshot

Prepare an admin page

Install and activate the plugin introduced in the tutorial, Create In-page Tabs. The page slug used in that plugin is my_tabs so we need to add a meta box to the page that uses that slug..

Include the library

The library file needs to be loaded.

Extend the library class

For page meta boxes, we need to extend the AdminPageFramework_PageMetaBox factory class. For this tutorial, we use a class named APF_Tutorial_SidePageMetaBox.  This extended class name can be anything consisting of alphanumeric characters and underscores. You just need to pick something unique so that it won’t cause name conflicts with other plugins or themes.

Define form fields in the setUP() method

In the setUp() method, we define form fields. We’ve covered this already in the previous tutorial. For that use the addSettingFields() method. It is basically same as the process covered in the tutorial, Create a Form.

As a small tip, we can insert custom contents into admin pages created by the framework because the framework automatically adds hooks when admin pages are created.

The content_{page slug}_{tab slug} filter hook is one of them. Let’s add a callback to it and display the saved options value in the page. Add this line in the setUp() method.

And define this custom method after the setUp() method. Keep in mind that APF_Tabs is the class name used to create the page and by default the framework uses the class name for the option key for the options table of the WordPress database.

Instantiate the extended class

Finally, we instantiate the class. Unless it is instantiated, it will do nothing.

Set the parameters as follows.

1. (sting|null) the HTML ID selector for the meta box container element. Set null to generate it automatically.
2. (sting) the meta box readable title shown at the top of the meta box.
3. (string|array) the page slug to add the meta box.
4. (string) the context. Accepts either side, normal, or advanced.
5. (string) the priority. Accepts either high, core, default or low.

Code

Try the code below and post comments if you get a problem.