September 03, 2019

Create Custom Post Meta in WordPress

WordPress saves some basic or default data associated with a post type such as title, content, and excerpt. When you need to store additional information for a post type, you need to add post meta boxes to achieve this.

Create Custom Post Meta in Wordpress

What is WordPress Post Meta?

When we want to store some additional information that is not stored in the posts table of WordPress database, we use post meta boxes to save additional information in the post_meta table. WordPress Post meta is an additional piece of information that is saved in a separate database table. This additional information is not saved in the posts table but in the posts_meta table, containing the id to post to link each post meta to a specific post. If you want to learn how to show this custom post meta in the post tables column, visit Show Post Meta in WordPress Admin Table Columns.

 

Functions Used to Add WordPress Post Meta

Adding custom post meta for a post type involves using a few functions WordPress offers. These functions allow developers to add functionality for registering/adding post meta, retrieving post meta and updating post meta when a post is created or updated. Function to add a meta box in WordPress:

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 render our meta box.
  • $screen: (string|array) (Optional) - The screen or screens on which the meta box will be shown.
  • $context: (string) (Optional) - Context of the screen where the meta box will be displayed. Possible values are "side", "normal" and "advanced". The default value is "advanced".
  • $priority: (string) (Optional) - Priority of appearance of the meta box. Possible values ("default","low", "high"). The default value is "default".
  • $callback_args: (array) (Optional) - Array of parameters passed as a second parameter to your callback function.
The following WordPress function is used to get the post meta value from the database table. The function definition is as follows: 
get_post_meta($id, $key, $single);
  • $id: (int) (Required) - Unique ID of post.
  • $key: (string) (Optional) - Key of post meta in post table.
  • $single: (bool) (Optional) - Whether to return the value as a single value.
WordPress offers two separate functions to save post meta and update post meta. However, the function used to update post meta can also be used to save a new post meta, as it adds the post meta to the table if it does not already exist. The function definition of update_post_meta is as follows: 
update_post_meta($post_id, $meta_key, $meta_value, $prev_check = '');
  • $post_id: (int) (Required) - Unique ID of post.
  • $meta_key: (string) (Required) - Unique meta key for post meta.
  • $meta_value: (string) (Required) - Value for post meta.
  • $prev_check: (mixed) (Optional) - If provided, only post meta with the provided value will be updated.
 

How to Add WordPress Post Meta

In the previous post Create Custom Post Types in WordPress, we created a "Property" post type. In this post, we are going to add post meta to save additional information like property price and property area with our post. We will use the add_meta_boxes action hook of WordPress to add post meta box fields. We will use the save_post_{$post->post_type} hook to save our post meta. We will create a separate post-meta.php file that we will include in the functions.php file. This file post-meta.php, will consist of the code to implement the post meta box.

Follow these steps to add a post meta box in WordPress:

  • Add an action hook add_meta_boxes with an add_property_meta function.
  • Add the function add_meta_box in the add_property_meta function with the parameters "id", "title", "callback" and "screen" array.
  • Render the post meta fields in the callback function.
  • Use the get_post_meta function to fetch saved post meta values.
  • Add an action hook "save_post_property" with a save_property_meta function. The save_post_property function is called when a post type "property" is saved.
  • Save the post meta using the update_post_meta function in the save_property_meta function.
  • Make sure to use sanitize_meta to sanitize the post meta value that is posted.

post-meta.php

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

function add_property_meta(): void
{
    add_meta_box('property_meta_box', 'Property Data', 'render_property_meta', ['property']);
}

// Function to draw our post meta
function render_property_meta($post): void
{
    // 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_property', 'save_property_meta');
function save_property_meta($post_id): void
{
    // Prepare array of our post meta to loop through
    $post_meta = ['property_price', 'property_area'];
    foreach ($post_meta as $meta) {
        if (isset($_POST[$meta])) {
            // Save post metadata if it's submitted with post
            update_post_meta($post_id, $meta, sanitize_meta($_POST[$meta]));
        }
    }
}

Now, to add post meta boxes to a custom post type, all we need to do is include this post-meta.php in our functions.php file.

include('post-meta.php');
This is how the post meta box will look like:
 
Create Custom Post Meta in Wordpress
Home