How to Add Custom Fields to WordPress Posts and Display Them

Custom fields (also known as post meta) let you add extra information to posts—like ratings, product details, or custom notes. WordPress supports them out of the box, and you can display them in your theme with a little code. Here’s how.

Step 1: Enable Custom Fields in the Editor

By default, the Custom Fields box is hidden in the block editor. To enable it:

1. Edit any post in the block editor.
2. Click the three-dot menu in the top-right corner → Preferences.
3. Go to Panels and enable Custom fields.
4. Reload the editor, and you’ll see a Custom Fields panel below the content.

Step 2: Add a Custom Field

1. Scroll down to the Custom Fields section.
2. Click Add New.
3. Enter a field name (e.g., rating) and value (e.g., 5 stars).
4. Click Add Custom Field and update the post.

Step 3: Display a Custom Field in Your Theme

Edit your theme file where you want the field to appear (for example, single.php or content-single.php) and insert:

<?php
// Get the custom field value
$rating = get_post_meta( get_the_ID(), 'rating', true );

if ( $rating ) {
    echo '<p class="post-rating">Rating: ' . esc_html( $rating ) . '</p>';
}
?>

This will output the rating only if the field exists for the current post.

Step 4: Add Multiple Custom Fields

You can add as many fields as you like (e.g., author_twitter, price, location). Display them the same way:

<?php
$price = get_post_meta( get_the_ID(), 'price', true );
$location = get_post_meta( get_the_ID(), 'location', true );

if ( $price ) {
    echo '<p>Price: ' . esc_html( $price ) . '</p>';
}
if ( $location ) {
    echo '<p>Location: ' . esc_html( $location ) . '</p>';
}
?>

Step 5: Advanced Usage with Loops

If a field has multiple values, WordPress stores them in an array. Retrieve them with:

<?php
$features = get_post_meta( get_the_ID(), 'features', false ); // returns array
if ( $features ) {
    echo '<ul class="post-features">';
    foreach ( $features as $feature ) {
        echo '<li>' . esc_html( $feature ) . '</li>';
    }
    echo '</ul>';
}
?>

Step 6: Style with CSS

To make your custom fields look better, add CSS:

.post-rating {
  font-weight: bold;
  color: #0073aa;
}
.post-features {
  list-style: disc;
  margin: 0 0 1em 1.5em;
}

Step 7: Use Plugins for Easier Management (Optional)

For more user-friendly custom fields, consider plugins like:

• Advanced Custom Fields (ACF) – powerful UI for custom fields and layouts.
• Meta Box – developer-focused toolkit for post meta.
• Pods – manage custom content types and fields.

Summary

1. Enable the Custom Fields panel in the WordPress editor.
2. Add a field name and value to your post.
3. Retrieve it with get_post_meta() in your theme.
4. Use multiple or repeatable fields for richer content.
5. Style output with CSS or use plugins like ACF for more control.

With custom fields, you can enrich your WordPress posts with extra metadata and display it anywhere in your theme.

🎨 Want to learn more? Visit our WordPress Customization Hub for tips and advanced techniques.