Create a Meta Box for a Custom Post Type

Creating a Meta Box for a Custom Post Type

With a combination of a custom post type and post meta boxes with custom fields, we can create a powerful plugin by making each post an options container. In this tutorial, we create a very small plugin that lets the user pick an own color in a post definition page of the admin area and displays it in the front end.

Steps

1. Include the library
2. Define a Custom Post Type
3. Define Custom Columns of Post Listing Table
4. Define the Cell Output of Custom Columns
5. Define the CSS Rules of Post Listing Page
6. Define the Front-end Article Output
7. Add a Meta Box and Custom Field
8. Instantiate the extended classes

Screenshot

Include the library

The library (framework) file needs to be loaded. Change the library path as you need.

Define a Custom Post Type

We are going to declare two classes, one for a post type and the other for a meta box. We’ve covered how to register a post type and meta box already in in the previous tutorials (Add a Meta Box for Posts, Create a Custom Post Type and Custom Taxonomy). If you haven’t done them and are not cretin how, it is recommended checking them out.

Here, we use APF_Tutorial_PostType for a class name as an example, extend the AdminPageFramework_PostType factory class, and set the post type argument to the setArguments() method in the setUp() method.

We are going to add more code in this class.

Define Custom Columns of Post Listing Table

Next, for the post listing table in the admin area of the post type page (edit.php), we define what columns are displayed in the table. Since we are just getting started and don’t want it to be complicated, let’s just have only three columns: checkbox, title, and a custom column named “Color.” The Color column will display a custom field value embedded by a meta box we are going to add later.

To define columns, we can use the predefined callback method that the framework provides whose name is made up of “columns_” + “{post type slug}”. It receives an array holding the column slugs in the keys and the HTML output values in the values. Like other pre-defined callback methods, this method gets automatically called when the page tries to define and display the post listing table.

If you need to enable the default columns, just uncomment the line + $aHeaderColumns, which will unite the arrays so that the passed default columns array will be merged.

Define the Cell Output of Custom Columns

While the post listing table processes rendering each row and its column, the framework receives a callback for custom columns. The callback method name is made up of ”cell_” + “{post type slug}” + _ + “{column key}”. The column key is the one you set in the custom column array in the columns_{post type slug}() method.

So to display the output of the cell of the custom column, we use the method name, cell_apf_tutorial_posts_color().

The method receives the following two parameters.

1. (string) the HTML cell output.
2. (integer) the parsing post ID.

So let’s add the following code. It uses the get_post_meta() WordPress core function and the key ‘my_custom_color’ is passed. The meta key is the one we are going to set in the meta box class later in this tutorial. And the method displays an HTML container element with the background color of that value.

Define the CSS Rules of Post Listing Page

We can define CSS rules for that post listing page. There are different ways to do that but here we modify the inline CSS rules that the framework inserts. For that, we use a method named “style_{instantiated class name}()”.

There is only one parameter for the method.

1. (string) the inline CSS rules.

Define the Front-end Article Output

When the user clicks the View link in the title cell of the post listing table, a page opens in the front-end and it is supposed to display the contents of the post. And we are going to display the output based on the custom field value set by the meta box field which we are going to add later.

For that, we can use the content() method which is automatically called when an article page of the post type of the class is rendered. Alternatively, content_{instantiated class name}() method can be used.

They receive the following parameter.

1. (string) the HTML content output of the post.

Here is an example. It retrieves a custom field value with get_post_meta() method and the key “my_custom_color” is set. The key is the one we are going to use for a meta box field. So it means, “give me a value of the custom field ‘my_custom_color’ associated with the displaying post.” and the value is assigned to the $_sSelectedColor variable.  The method then returns an HTML box with the background color of that set value.

Add a Meta Box and Custom Field

As we added blocks of code that retrieve meta data with the key named “my_custom_color,” we need to add a custom field with that key name. It can be achieved with a meta box. Define a meta box extending the AdminPageFramework_MetaBox factory class.

Instantiate the extended classes

Finally, we instantiate the classes.

Conclusion

In this tutorial, we added only one custom field because the instruction should be kept as simple as possible. However, you can add your own fields as you need. Imagine you add a field that sets a pixel size and another color field. Then you can provide your users with options for a border width and the border color in addition to the background color.

The field can be for a url to perform an API request to display fetched data from an external site. The potential is immeasurable.

Code

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