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:
-
Advanced Custom Fields (ACF) - Most popular solution with a user-friendly interface
-
Custom Field Suite - Lightweight alternative to ACF
-
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);