Add a Meta Box for Posts

Adding a Meta Box for Posts

We’ve learned how to add a meta box for admin pages created by the framework in the previous tutorials (Add a Meta Box in Admin Page, Add a Page Meta Box Specific to an In-page Tab ). Now let’s add a meta box for posts, meaning in post definition pages where you publish articles so that you can store custom meta field values associated with a post.

Steps

1. Include the library
2. Extend the library factory class
3. Define form fields the setUp() method
4. Instantiate the extended class
5. Retrieve the meta box field values

Screenshot

Include the library

The library (framework) file needs to be loaded. Set your correct the library path here.

Extend the library class

We extend the AdminPageFramework_MetaBox factory class. For meta boxes for admin pages, we extended the AdminPageFramework_PageMetaBox class. The factory class names are slightly different.

Define form fields in the setUp() method

In the setUp() method, we define form fields. We’ve covered this already as well. To keep it simple, let’s just define one field.

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 post type slug to add the meta box to.
4. (string) the context. Accepts either side, normal, or advanced.
5. (string) the priority. Accepts either high, core, default or low.

For the third parameter, pass a value ‘post’ for the default post post type. For pages use ‘page’. See the codex for the slugs of the built-in post types

You should have heard of custom post types. Custom post types are for creating contents like posts and pages but in a different section of the site. If you want to add a meta box for a custom post type, similarly, just set the post type slug in the third parameter of the custom post type.

Retrieve the meta box field values

Now how do we retrieve the stored meta value? It is stored in the postmeta table. So we can use the WordPress core get_post_meta() function. For that, we need to know the post ID as the meta data are associated with a post and a post ID is used to identify the association.

Let’s add a custom output at the bottom of a post content to see an example usage of it. First create a test post. Type a test string such as “Hello World!” in the editor. Also type something in the created meta box field as well. We are going to show this entered value in the front end.

In the front-end, the page should look like this without any modification. To get to the page, click on the View link which appears below the post title text field when you update the post.

Now insert the following function at the top of the APF_Tutorial_SideMetaBox class.

It will insert a custom content in the post article page with the the_content filter hook. The start() method is one of the pre-defined framework methods that is automatically called at the end of the constructor method (__consturct()). The difference between setUp() and start() is that start() will be called regardless of where the current page resides while setUp() is only called only in a post definition page of the admin area. In other words, the start() method can be called in the front-end.

Notice that in the callback method of the the_content filter hook, get_post_meta() function is used and the post ID is passed to the first parameter. In the second parameter, the field ID is set. What it means is that “give me the value of the field whose ID is ‘tutorial_normal_metabox_text’ associated with the displaying post.”

If you successfully add the code, the post article page in the front end will look like this.

Code

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