September 03, 2019

Create Custom Post Meta in WordPress

In previous post we learnt how can we register a custom post type in WordPress. WordPress adds some basic data like title, editor, excerpt, comments and author etc with post type you are registering. But what if you want to store some additional information with custom post type?

Create Custom Post Meta in Wordpress

What is Post Meta Data?

Custom post meta data is an additional piece of information which is saved separately from post. This additional information is not saved as a direct part of a post but rather linked to that post. In previous post we created a "Property" post type. To understand post meta data we will store additional information like property price and property area.

Lets break it down in section first we will create a file post-meta.php. We will add a meta box in this file using WordPress function "add_meta_box" which adds a box to one or more screens. Next step we we have to add a function to WordPress action hook "save_post" which will save our post meta when the post is saved. Inside that function we will use "update_post_meta" to save our post meta data.

add_meta_box($id, $title, $callback, $screen = null, $context = 'advanced', $priority = 'default', $callback_args = null);
  • $id - (string) (Required) - ID for meta box id attribute.
  • $title - (string) (Required) - Title of meta box.
  • $callback - (callable) (Required) - The function that will actually contain the html to draw our meta box.
  • $screen- (string|array) (Optional) - The screen or screens on which meta box will be shown.
  • $context - (string) (Optional) - Context of screen where the meta box will be displayed. Possible values are "side", "normal" and "advanced". Default value is "advanced".
  • $priority - (string) (Optional) - Priority of appearance of meta box. Possible values ("default","low", "hight"). Default value is "default".
  • $callback_args- (array) (Optional) -Array of parameters  passed as a second parameter to your callback function.

post-meta.php

<?php
// Add a meta box to our custom post type
add_action('add_meta_boxes', 'add_property_metas');

function add_property_metas(){
    add_meta_box('property_meta_box', 'Property Data', 'draw_property_meta', ['property']);
}

// Function to draw our post meta
function draw_property_meta($post){
    // Retrieve post metadata if its already saved
    $property_price      = get_post_meta($post->ID, 'property_price', true);
    $property_area       = get_post_meta($post->ID, 'property_area', true);
    ?>
    <table class="form-table property-form-table">
        <tbody>
        <tr>
            <th scope="row"><label for="property_price"><?php _e('Price', 'text-domain')?></label></th>
            <td><input type="text" name="property_price" id="property_price" class="regular-text" value="<?=$property_price?>" /></td>
        </tr>
        <tr>
            <th scope="row"><label for="property_area"><?php _e('Area', 'text-domain')?></label></th>
            <td><input type="text" name="property_area" id="property_area" class="regular-text" value="<?=$property_area?>" /></td>
        </tr>
        </tbody>
    </table>
    <?php
}

add_action('save_post', 'save_property_meta');
function save_property_meta($post_id){
    // Prepare array of our post meta to loop through
    $metas = ['property_price', 'property_area'];
    foreach($metas as $meta){
        if (isset($_POST[$meta])) {
            // Save post metadata if it's submitted with post
            update_post_meta($post_id, $meta, esc_html($_POST[$meta]));
        }
    }
}

Now we will include this post-meta.php in our functions.php to work.

include('post-meta.php');
This is how our post meta box will look like:

Create Custom Post Meta in Wordpress
Home