How to add custom meta box to WordPress Admin Panel

WordPress platform provides many APIs for add custom functionality to WP admin. Today in this tutorial we learn how to add custom meta box, save and show on front end.

What is Custom Meta Box:

Custom Meta Box allow users to store extra information for user input apart from default fields. we can add custom meta box to all type of post type like pages, product, post etc.
Follow these steps for add, save and show custom meta box:

Step 1: Add custom meta box -:

add_meta_box is the function who responsible for register meta box in post type. follow this code:

add_meta_box( $id, $title, $callback_function, $screen = null, $context = ‘advanced’, $priority = ‘default’, $callback_args = null );

  1. $id: This is unique WordPress Identity. ID use for remember to prefix it to prevent overriding.
  2. $title: This is meta box name or title who will show on meta box.
  3. $callbackadd_meta_box calls the callback function for show the content or fields in meta box.
  4. $screen: $screen instruct WordPress meta box will show in which post type like post, page, link or custom_post_type.
  5. $context: $context show the position of meta box in admin post type page. It could be these values to enter for show meta box like "normal""advanced" and "side".
  6. $priority:The priority within the context where the boxes should show. For example "high""core""default", and "low".
  7. $callback_args: This is optional argument. This could be array type.

Display meta fields in custom meta box:

Now the question is how to show the input fields in meta box here is the code:

Save meta fields data in db:

Now turn to store meta fields data in db here is the code:

Show on front end:

Now you can show this value on front end with the help of get_post_meta function. For example:

That’s it, Thanks for reading if you like my post please share or comment.

Add a Comment

Your email address will not be published. Required fields are marked *