Here is the process on how to add custom fields to the post in WordPress. Adding custom fields to the post in WordPress is easier than before because WordPress provides a way where developers can create and add custom fields to the post. This added custom field data is typically known as Meta-Data. Meta-Data is a custom field data that allow developers to create and add some extra data to the post in WordPress.
Today, we’ll share how to create and add custom fields to the post in WordPress in this tutorial. Also, we’ll tell you how to insert some additional data into the post.
Check out the step-by-step tutorial here regarding how to add a WordPress custom post Meta box.
A Complete Tutorial on How to Add Custom Fields To The Post In WordPress
Now, we start adding custom fields to the post in WordPress. We share with you how you can insert the author name of the post through this custom Meta box. Besides this, we share how you can display the author name of relevant posts on the post listing page or post details page.
In the theme’s functions.php file, all the Meta box-related work will be done. Therefore, you have to open the functions.php file of the currently active theme and keep in mind the below-given steps.
Step 1st: Add Custom Meta Box
It is the fist step to add custom fields to the post in WordPress. Before adding a custom meta box, you have to use add_meta_box() function to add meta boxes to the administrative interface. You can use the below-given code to post.
/*
* Add the Custom Meta Box
*/
function add_custom_meta_box() {
add_meta_box(
'custom_meta_box', // $id
'Custom Meta Box', // $title
'show_custom_meta_box', // $callback
'post', // $page
'normal', // $context
'high' // $priority
);
}
add_action('add_meta_boxes', 'add_custom_meta_box');
Step 2nd: Rendering Custom Meta Box
Rendering a custom Meta box is easy for you. After adding a custom Meta box to the post, you will have to generate an array of custom Meta fields. Then, define the callback function (show_custom_meta_box()) and generate the view of the meta box into this function (show_custom_meta_box()). The below code is used for Rendering Custom Meta Box.
// Custom meta fields array
$prefix = 'custom_';
$custom_meta_fields = array(
array(
'label'=> 'Author Name',
'desc' => 'Enter post author name to be displayed',
'id' => $prefix.'author_name',
'type' => 'text'
)
);
// The callback function
function show_custom_meta_box() {
global $custom_meta_fields, $post;
// Use nonce for verification
echo '<input type="hidden" name="custom_meta_box_nonce" value="'.wp_create_nonce(basename(__FILE__)).'" />';
// Begin the field table and loop
echo '<table class="form-table">';
foreach ($custom_meta_fields as $field) {
// get value of this field if it exists for this post
$meta = get_post_meta($post->ID, $field['id'], true);
// begin a table row with
echo '<tr>
<th><label for="'.$field['id'].'">'.$field['label'].'</label></th>
<td>';
switch($field['type']) {
// text field
case 'text':
echo '<input type="text" name="'.$field['id'].'" id="'.$field['id'].'" value="'.$meta.'" size="30" />
<br /><span class="description">'.$field['desc'].'</span>';
break;
nbsp; }
echo '</td></tr>';
}
echo '</table>';
}
To see the custom meta box and custom post fields, go to the post adding page and see the custom meta box and custom post fields under the post content editor.
For Example:
Step 3rd: Save Custom Meta Data
After seeing the custom meta box and custom post fields, save the meta data. The below given code is used to save custom meta data.
// Save the custom meta data
function save_custom_meta($post_id) {
global $custom_meta_fields;
// verify nonce
if (!wp_verify_nonce($_POST['custom_meta_box_nonce'], basename(__FILE__)))
return $post_id;
// check autosave
if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE)
return $post_id;
// check permissions
if ('page' == $_POST['post_type']) {
if (!current_user_can('edit_page', $post_id))
return $post_id;
} elseif (!current_user_can('edit_post', $post_id)) {
return $post_id;
}
// loop through fields and save the data
foreach ($custom_meta_fields as $field) {
$old = get_post_meta($post_id, $field['id'], true);
$new = $_POST[$field['id']];
if ($new && $new != $old) {
update_post_meta($post_id, $field['id'], $new);
} elseif ('' == $new && $old) {
delete_post_meta($post_id, $field['id'], $old);
}
}
}
add_action('save_post', 'save_custom_meta');
Step 4th: Getting Meta Data and Displaying the Custom Field Value
It’s time to get meta data and display the custom field value. In this step, you will use get_post_meta() function that will return the values of the custom fields with the specified key from the specified post. Thus, you will get meta data and display the custom field value array by specific meta key.
<?php
// Get the post meta data
$meta = get_post_meta( get_the_ID() );
// Get custom meta value
$post_author_name = $meta['custom_author_name'][0];
echo 'Author: '.$post_author_name;
?>
Finally, you may see the custom meta data field value of the post in WordPress. The custom author name of the relevant post would be displayed.
