WordPress Meta Box for Beginner

WordPress Meta Box for Beginner

Posted on by codersaiful

Do you want to customize your WordPress theme/plugin to add additional information on your post/page? Then you need to use Meta Box on your WordPress. In this step by step article I’ll show you how to add Meta Box in WordPress for beginner.

What is Meta Box?

Meta Boxes are one of the most important feature of WordPress that allow you to add custom option to your WordPress page of post. In WordPress you can use category and tag which is given as default. But if you want to add more info about your product/page/post, then what do you need first?

In this case you can add custom meta box to show extra data to Page/Post or Post Type.

What is Meta Data?

The data we input in meta box is called meta data. More simply the value we input in meta box is a meta data. It can be number or text.

But, remember, we need to sanitize the date to make it secure.

How to add Meta Box in WordPress?

You need to register a function named add_meta_box to create a Meta Box in WordPress. This function includes the following syntax:

add_meta_box( $id, $title, $callback, $screen, $context, $priority, $callback_args)

Now we will create  a meta box for post type. I’m creating this file into themes functions.php file.

Just write the code into your themes functions.php file. But creating a unique php file for meta boxes will be better for practical use.

 

add_action("add_meta_boxes","my_meta");

 	function my_meta(){
    add_meta_box(
    "my_custom_meta",
    "My first meta box",
    "my_meta_box_mes",
    "post",
    "normal",
    "low"
    );
  } 
function my_meta_box_mes(){
  echo '<input type="text" |';
  
}

 

See how does it look

 

Custom Metabox

Saving Meta Data

You can also save your meta data adding a function. You can use a code like below

add_action("admin_init", "custom_metabox");

 	function custom_metabox(){
    add_meta_box(
    "Custom_metabox_01",
    "Custom Metabox",
    "custom_metabox_field",
    "post",
    "normal",
    "low"
    );
  } 
function custom_metabox_field(){
  global $post;
  
  $data = get_post_custom($post->ID);
  $val = isset($data['customm_input']) ? esc_attr($data['custom_input'] [0]) : 'no value';
  echo '<input type="text" name="custom_input" id="custom_input" value="" .$val. />';
  
}
add_action("save_post","save_detail");

function save_detail(){
  global $post;
  
};

You may need to show meta data in your single post. For this, edit your single.php file in your theme file.

Add the code below to show your Meta date in single post.

 

$custom_post_type = get_post_meta($post->ID, 'custom_input', true);
      
      echo $custom_post_type;

Here custom_input is my custom meta data id. Use your own ID to show your custom meta data.

So this is all for today. I hope you have understand adding and customizing WordPress Meta Box for Beginner. There are some other tutorials on basic php in Bengali language with you tube tutorial. You can check PHP Bangla Tutorial.

Leave a Reply