Displaying custom field data in Wordpress - Mini Project: Build & Apply

Displaying Custom Field Data in WordPress

📖 Scenario: You have a WordPress website where you want to show extra information about posts. This extra information is stored in custom fields. You want to learn how to get and show this custom field data inside your theme files.

🎯 Goal: Build a simple WordPress theme snippet that fetches and displays a custom field called subtitle for each post.

📋 What You'll Learn

Create a variable to get the custom field subtitle using get_post_meta()

Set a variable called show_subtitle to control if the subtitle should be shown

Use an if statement to check if show_subtitle is true and the subtitle is not empty

Echo the subtitle inside an HTML <h2> tag with a class post-subtitle

💡 Why This Matters

🌍 Real World

Displaying custom fields is common in WordPress sites to show extra info like subtitles, ratings, or author notes.

💼 Career

Knowing how to fetch and display custom fields is essential for WordPress theme and plugin development jobs.

1

Create a variable to get the custom field data

Create a variable called subtitle that uses get_post_meta() to get the custom field named subtitle for the current post ID get_the_ID(). Set the third parameter to true to get a single value.

Wordpress

# Your code here

Need a hint?

Use get_post_meta(get_the_ID(), 'subtitle', true) to get the custom field value for the current post.

2

Add a configuration variable to control subtitle display

Add a variable called show_subtitle and set it to true to indicate that subtitles should be shown.

Wordpress

$subtitle = get_post_meta(get_the_ID(), 'subtitle', true);
# Your code here

Need a hint?

Set $show_subtitle = true; to enable subtitle display.

3

Use an if statement to check and display the subtitle

Write an if statement that checks if $show_subtitle is true and $subtitle is not empty. Inside the if, echo the subtitle wrapped in an <h2> tag with class post-subtitle.

Wordpress

$subtitle = get_post_meta(get_the_ID(), 'subtitle', true);
$show_subtitle = true;
# Your code here

Need a hint?

Use if ($show_subtitle && !empty($subtitle)) to check conditions, then echo the subtitle safely with esc_html().

4

Complete the snippet with proper escaping and HTML structure

Ensure the subtitle is safely escaped using esc_html() inside the <h2> tag with class post-subtitle. This completes the snippet to display custom field data securely.

Wordpress

$subtitle = get_post_meta(get_the_ID(), 'subtitle', true);
$show_subtitle = true;
if ($show_subtitle && !empty($subtitle)) {
    # Your code here
}

Need a hint?

Use esc_html() to escape the subtitle text for safe HTML output.