Custom code for adding a custom field to a WordPress post

Laura K Dec 16, 2024 Custom Fields
How can I add extra information to my blog posts?
What is the method to register and display custom fields in WordPress posts using the Advanced Custom Fields (ACF) plugin?
Andy answered Dec 16, 2024

Adding Custom Fields to WordPress Posts

Here's a solution using custom code that adds and displays custom fields in WordPress posts. This approach uses WordPress native functions without requiring plugins.

Add this code to your theme's functions.php file to register a custom meta box:

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

Add this code to create the meta box fields and save functionality:

function display_custom_meta_box($post) {
    wp_nonce_field('custom_meta_box_nonce', 'meta_box_nonce');
    
    $post_subtitle = get_post_meta($post->ID, '_post_subtitle', true);
    $author_bio = get_post_meta($post->ID, '_author_bio', true);
    
    echo '<label for="post_subtitle">Subtitle:</label>';
    echo '<input type="text" id="post_subtitle" name="post_subtitle" value="' . esc_attr($post_subtitle) . '" size="50" /><br><br>';
    
    echo '<label for="author_bio">Author Bio:</label>';
    echo '<textarea id="author_bio" name="author_bio" rows="4" cols="50">' . esc_textarea($author_bio) . '</textarea>';
}

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 (!current_user_can('edit_post', $post_id)) {
        return;
    }
    
    if (isset($_POST['post_subtitle'])) {
        update_post_meta($post_id, '_post_subtitle', sanitize_text_field($_POST['post_subtitle']));
    }
    
    if (isset($_POST['author_bio'])) {
        update_post_meta($post_id, '_author_bio', sanitize_textarea_field($_POST['author_bio']));
    }
}
add_action('save_post', 'save_custom_meta');

Add this code to your theme's single.php file to display the custom fields:

function display_custom_fields() {
    $post_subtitle = get_post_meta(get_the_ID(), '_post_subtitle', true);
    $author_bio = get_post_meta(get_the_ID(), '_author_bio', true);
    
    if ($post_subtitle) {
        echo '<div class="post-subtitle">' . esc_html($post_subtitle) . '</div>';
    }
    
    if ($author_bio) {
        echo '<div class="author-bio">' . wp_kses_post($author_bio) . '</div>';
    }
}

Plugin Alternative

If you prefer using a plugin, the Advanced Custom Fields (ACF) plugin is highly recommended. It provides:

  • User-friendly interface for creating custom fields
  • Multiple field types (text, image, file, repeater, etc.)
  • Easy integration with themes
  • Flexible display options
  • Developer-friendly functions

With ACF, you can create custom fields through the WordPress admin interface and display them using functions like:

<?php the_field('field_name'); ?>

The free version of ACF covers most common needs, while the PRO version adds advanced features like repeater fields and flexible content.