Adding a Custom Field to WordPress Posts

Jürgen M Dec 29, 2024 Custom Fields
How can I include an extra piece of information or a detail when I'm writing a blog post?
How can I use `add_post_meta` and `get_post_meta` functions to add and retrieve custom fields for WordPress posts programmatically?
Andy answered Dec 29, 2024

Adding Custom Fields to WordPress Posts

Custom Code Solution

This solution shows how to add and display custom fields programmatically using WordPress functions.

First, add this code to your theme's functions.php file to create a custom meta box:

function add_custom_meta_box() {
    add_meta_box(
        'custom_post_meta',
        'Additional Information',
        'display_custom_meta_box',
        'post',
        'normal',
        'high'
    );
}
add_action('add_meta_boxes', 'add_custom_meta_box');

Create the meta box content and save functionality:

function display_custom_meta_box($post) {
    wp_nonce_field('custom_meta_box_nonce', 'meta_box_nonce');
    
    $value = get_post_meta($post->ID, '_custom_field_key', true);
    
    echo '<label for="custom_field">Custom Field:</label>';
    echo '<input type="text" id="custom_field" name="custom_field" value="' . esc_attr($value) . '" size="50">';
}

function save_custom_meta($post_id) {
    if (!isset($_POST['meta_box_nonce']) || 
        !wp_verify_nonce($_POST['meta_box_nonce'], 'custom_meta_box_nonce')) {
        return;
    }
    
    if (defined('DOING_AUTOSAVE') && DOING_AUTOSAVE) {
        return;
    }
    
    if (isset($_POST['custom_field'])) {
        update_post_meta(
            $post_id,
            '_custom_field_key',
            sanitize_text_field($_POST['custom_field'])
        );
    }
}
add_action('save_post', 'save_custom_meta');

To display the custom field in your posts, add this code to your theme's single.php file or use this filter:

function display_custom_field_content($content) {
    if (is_single() && get_post_type() === 'post') {
        $custom_field = get_post_meta(get_the_ID(), '_custom_field_key', true);
        if (!empty($custom_field)) {
            $content .= '<div class="custom-field">' . esc_html($custom_field) . '</div>';
        }
    }
    return $content;
}
add_filter('the_content', 'display_custom_field_content');

Plugin Solutions

If you prefer using a plugin, here are reliable options:

  1. Advanced Custom Fields (ACF) - Most popular solution with a user-friendly interface
  2. Custom Field Suite - Lightweight alternative to ACF
  3. Pods - Full content management framework with custom field functionality

Usage Notes

  • The custom field will appear in a meta box below the post editor
  • The field value is stored with a prefix (_custom_field_key) to keep it hidden from the custom fields list
  • The display function adds the custom field content below the post content
  • Adjust the field name, key, and HTML structure according to your needs

To retrieve the custom field value anywhere in your theme:

$custom_value = get_post_meta(get_the_ID(), '_custom_field_key', true);
echo esc_html($custom_value);