Creating a Meta Box in WordPress by Web Design Agency London

There are many WordPress features that help to user can interact easily one them, multiple meta boxes on the Add New Page and Post screens. The purpose of these meta boxes are used for adding additional information to your pages, posts, and the content. In WordPress meta boxes can be created easily in a plugin using the add_meta_box() function.  There are seven parameters accepts by the add_meta_box() function, below is show:

Creating a Meta Box in WordPress by Web Design Agency London.
Creating a Meta Box in WordPress by Web Design Agency London.

Every parameter is help to define where and how your meta box is displayed on the screen.

  •  $id: It is the CSS ID attribute for the meta box.
  •  $title: It is the title displayed in the header of the meta box.
  •  $callback: It is the custom function name to display your meta box information.
  •  $page: It is the page you want your meta box to display on, ‘page’, ‘post’ or custom post type name.
  •  $context: It is the part of the page where the meta box should be displayed it will be ‘advanced’, ‘normal’, or ‘side’.
  •  $priority: It is the priority within the context where the meta box should display, ‘core’, ‘high’, ‘default’, or ‘low’.
  •  $callback_args: It is the arguments to pass into your callback function.

You can build your first custom meta box in WordPress by you understand the add_meta_box() function below is an example:

Creating a Meta Box in WordPress by Web Design Agency London.
Creating a Meta Box in WordPress by Web Design Agency London.

The add_meta_boxes Action hook will execute your custom function cmbw_meta_box_init() and this the first step to adding your own meta box by use this. By this function, you will call the add_meta_box() function to create your custom meta box for the information of Product. For your meta box you set the CSS ID attribute to cmbw-meta. The title is the second parameter, and which you set to Product Information. Next parameter is your custom function cmbw_meta_box(), and it will display the HTML for your meta box. Other next parameter you define your meta box to display on the post page and in the sidebar. In last you set the priority to default. The custom cmbw_meta_box() function now you create for display your meta box fields:

Creating a Meta Box in WordPress by Web Design Agency London
Creating a Meta Box in WordPress by Web Design Agency London

To retrieve the saved values for your meta box it is the first step in your custom function. There won’t be any saved values yet if you are creating a new post. After that you display the form elements in your meta box. You notice that you don’t require any submit button or a <form> tags. Have you also notice that you are using the wp_nonce_field() function for create a custom nonce field in your form. By this custom function you just created will generate your custom meta box as you can see in the below figure. You have now your meta box and form elements, Now you need to save that data when your post is saved. For do this you’ll just create a custom function, that is cmbw_save_meta_box(), and it is triggered by the save_post Action hook:

Creating a Meta Box in WordPress by Web Design Agency London.
Creating a Meta Box in WordPress by Web Design Agency London.

Whenever a post is saved in WordPress the save_post Action hook runs. The reason is that you only want to work with the custom metadata in the meta box, first thing you’ll do is verify that the $_POST[‘prowp_product_type’] value is set or not. After that you need to verify that the post being saved is an active post and not an auto save. For do this you check that the post is not auto saving and if it saving so you exit the function. After this the next step is to verify that the nonce value is the expected value or not. Your form elements have been set and the post is active then you save the form data. After all the checks have passed then you use update_post_meta() to save your meta box data as metadata against your post. The parameters you can see in the first parameter you send the post ID to update_post_meta(). The purpose this id this tells WordPress what post the meta data will be attached to. The Next step you pass in the name of the meta key which you are updating. Have you noticed that the meta key name is prefixed with an underscore.

This forestalls values from being listed in the custom fields meta box on the post edit screen. The reason is that you’ve provided a UI to edit these values, so you don’t need them in the custom field box. The last parameter new value for the meta key that you send, The WordPress function is being sanitized using the sanitize_text_field(). Now you have a fully functional custom meta box that saves the individual data against each post.