How to Add Custom Fields to Posts and Pages in WordPress

WordPress Custom Fields add extra information to WordPress posts, pages, and custom post types. They are pieces of post meta that are attached to a post or pages on our WordPress site, which means that by using the add_meta_box() method, we can easily extend the functionality of our site by adding extra information that doesn’t fit within the standard post editor. In this post, I will show you how to add these extra fields in just a few minutes using add_meta_box(). For more detail about Custom Post Types check out the Creating Custom Post Types tutorial first.

Step 1: Create a Custom Metabox Function

To begin, we’ll first create a custom metabox that will allow us to add and manage custom field data. For this we need to add a add_meta_box() function to our theme’s functions.php file. Here’s an example of a custom metabox function that adds a “Custom Fields” metabox:

/**
 * Create the metabox
 * @link https://developer.wordpress.org/reference/functions/add_meta_box/
 */
function custom_fields_metabox() {
    add_meta_box(
        'custom-fields-metabox',
        'Custom Fields',
        'display_custom_fields_metabox',
        'post',
        'normal',
        'default'
    );
}
add_action('add_meta_boxes', 'custom_fields_metabox');

In this code:

• ‘custom-fields-metabox’ is the Meta box ID (used in the ‘id’ attribute for the meta box).
• ‘Custom Fields’ is the title that appears on the metabox.
• ‘display_custom_fields_metabox’ is the Function to call that contains the metabox content
• ‘post’ specifies that the metabox is for the “post” post type. Change it to ‘page’ if you want to add custom fields to pages.
• ‘normal’  is the context within the screen where the box should display. (normal = main column, side = sidebar, etc.)
• ‘default’ is the priority within the context where the box should show.

Step 2: Create a Function to Display the Custom Fields

Next, we need to create a function to display the custom fields of our custom metabox. By using this function we can show the custom fields on custom post or page. Here’s an example:

/**
 * Render the metabox
 * @param  Array  $post    The post data
 */
function display_custom_fields_metabox($post) {
    // Add nonce for security and authentication.
    wp_nonce_field( 'custom_fields_nonce_action', 'custom_fields_nonce' );

    // Retrieve existing values for custom fields, if any
    $custom_field_value = get_post_meta($post->ID, 'custom_field_name', true);

    // Output the custom field input field
    echo '<label for="custom_field">Custom Field:</label>';
    echo '<input id="custom_field" name="custom_field" type="text" value="' . esc_attr($custom_field_value) . '" />';
}

Step 3: Save Custom Field Data

To ensure that the custom field data is saved when we update the post or page, then we need to add the following code to functions.php file of wordpress theme:

/**
 * Save the metabox
 * @param  Number $post_id The post ID
 * @param  Array  $post    The post data
 */
function save_custom_fields( $post_id, $post ) {
    // Add nonce for security and authentication.
    $nonce_name = ( isset($_POST['custom_fields_nonce']) ) ? $_POST['custom_fields_nonce'] : ' ';
    $nonce_action = 'custom_fields_nonce_action';

    // Check if a nonce is set.
    if ( ! isset( $nonce_name ) )
        return;

    // Check if a nonce is valid.
    if ( ! wp_verify_nonce( $nonce_name, $nonce_action ) )
        return;

    // Check if the user has permissions to save data.
    if ( ! current_user_can( 'edit_post', $campaign_id ) )
        return;

    // Check if it's not an autosave.
    if ( wp_is_post_autosave( $campaign_id ) )
        return;

    // Check if it's not a revision.
    if ( wp_is_post_revision( $campaign_id ) )
        return;

    // Sanitize user input.
    $custom_field_name	= isset($_POST['custom_field_name']) ? sanitize_text_field($_POST['custom_field_name']) : '';

    // Update the meta field in the database.
    update_post_meta($post_id, 'custom_field_name', $custom_field_name);
}
add_action('save_post', 'save_custom_fields');

Step 4: Use the Custom Field in our WordPress Theme

After creating and saving the custom field data, we need to display it in our wordpress theme template files using the get_post_meta() function. For example:

$custom_field_value = get_post_meta(get_the_ID(), 'custom_field_name', true);
if (!empty($custom_field_value)) {
    echo 'Custom Field Value: ' . $custom_field_value;
}

Conclusion:

Adding custom fields to WordPress posts and pages using a custom metabox is a powerful way to save and display additional data that enhances the site’s functionality.

By following the steps outlined in this tutorial, we can easily implement custom fields using a custom metabox. This approach gives us full control over the data associated with posts and pages, allowing us to create more informative and interactive websites.