How to Get Field from Custom Post Type in WordPress

Table of Contents

1. Introduction
2. Understanding Custom Post Types and Custom Fields
3. Displaying Custom Fields in the Frontend
4. Conclusion

Introduction

Imagine you have a WordPress website where you are showcasing a diverse range of content through custom post types — 'Music Releases' for example. You have custom fields like 'release_artist', 'release_title', and 'release_date'. Sounds efficient, but what happens when you need to pull that specific data into your theme template? Many users find this task challenging, and that's where we come in. By the end of this post, you'll know exactly how to extract and display fields from custom post types, making your WordPress site dynamic and user-friendly.

In this blog post, we will guide you through the process of retrieving custom fields from custom post types in WordPress. We will dive deep and provide detailed steps, code snippets, and real-world examples to ensure you’ll never feel lost again. Let's begin our journey to mastering custom fields and templates in WordPress.

Built for Shopify

All Customisation  Solutions in One Place.

From Storefront to Operations - once you have it, you’ll love it.

Try for FREE

Understanding Custom Post Types and Custom Fields

Before diving into code, it's essential to understand what custom post types and custom fields are, and why they are useful.

Custom Post Types: WordPress comes with a couple of default content types like posts and pages. Custom post types are additional content types you can create to structure your website content more effectively. Examples include 'Books', 'Movies', 'Products', or our example 'Music Releases'.

Custom Fields: These are metadata that provide additional information about a post. For instance, for a 'Music Release', relevant custom fields might include 'release_artist', 'release_title', and 'release_date'.

Both custom post types and custom fields help to tailor your WordPress site to your specific needs.

Displaying Custom Fields in the Frontend

Let's assume you've already created a custom post type 'releases' with custom fields such as 'release_artist', 'release_title', 'release_date', 'release_artwork', and 'release_tracklisting'. Here are the steps to display these fields within your theme.

Step 1: Fetch Custom Fields with get_post_meta()

The get_post_meta() function retrieves metadata for a post. Here's how you can use it within your template files.

<?php
// Check if we're inside the main loop in a single post page
if ( is_singular( 'releases' ) && have_posts() ) : while ( have_posts() ) : the_post();

    // Get custom fields values
    $release_artist = get_post_meta( get_the_ID(), 'release_artist', true );
    $release_title = get_post_meta( get_the_ID(), 'release_title', true );
    $release_date = get_post_meta( get_the_ID(), 'release_date', true );
    $release_artwork = get_post_meta( get_the_ID(), 'release_artwork', true );
    $release_tracklisting = get_post_meta( get_the_ID(), 'release_tracklisting', true );

    // Display custom fields
    if ( $release_artist ) {
        echo '<h2>' . esc_html( $release_artist ) . '</h2>';
    }
    if ( $release_title ) {
        echo '<p>Title: ' . esc_html( $release_title ) . '</p>';
    }
    if ( $release_date ) {
        echo '<p>Release Date: ' . esc_html( $release_date ) . '</p>';
    }
    if ( $release_artwork ) {
        echo '<p><img src="' . esc_url( $release_artwork ) . '" alt="' . esc_attr( $release_title ) . ' Artwork"></p>';
    }
    if ( $release_tracklisting ) {
        echo '<p>Tracklisting: ' . nl2br( esc_html( $release_tracklisting ) ) . '</p>';
    }

endwhile; endif; 
?>

Step 2: Custom Post Type Templates

WordPress allows you to create custom templates for different post types, which are useful for displaying custom fields. Here's an example of how you can set up a template for your 'releases' custom post type.

Create a new template file: single-releases.php

This file will handle the display of single items from the 'releases' post type.

<?php get_header(); ?>

<div class="releases-content">
    <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
    
        <h1><?php the_title(); ?></h1>
        <?php
        // Use the same get_post_meta logic to fetch and display data 
        $release_artist = get_post_meta( get_the_ID(), 'release_artist', true );
        //... [Other fields]

        // Example output
        if ( $release_artist ) {
            echo '<h2>' . esc_html( $release_artist ) . '</h2>';
        }
        //... [Other outputs]
        ?>
        
        <div class="entry-content">
            <?php the_content(); ?>
        </div>

    <?php endwhile; endif; ?>
</div>

<?php get_footer(); ?>

Step 3: Utilizing Advanced Custom Fields (ACF) Plugin

For those who prefer using a plugin, Advanced Custom Fields (ACF) is an excellent choice. ACF simplifies the process of creating and displaying custom fields.

Create Fields with ACF:

1. Install and activate the ACF plugin.
2. Go to Custom Fields > Add New.
3. Add fields (e.g., 'release_artist', 'release_title').
4. Set rules to show these fields in the 'releases' post type.

Display Fields using ACF:

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

    <h1><?php the_title(); ?></h1>
    <?php
    $release_artist = get_field( 'release_artist' );
    //... [Other fields]

    if ( $release_artist ) {
        echo '<h2>' . esc_html( $release_artist ) . '</h2>';
    }
    //... [Other outputs]
    ?>

    <div class="entry-content">
        <?php the_content(); ?>
    </div>

<?php endwhile; endif; ?>

FAQs

Q1: How to display custom fields in a list? To display custom fields in a list, use HTML list elements in your theme template.

<ul>
    <li><?php echo esc_html( $release_artist ); ?></li>
    <li><?php echo esc_html( $release_title ); ?></li>
    <!-- Other fields -->
</ul>

Q2: Can I use get_post_meta() in a custom loop? Absolutely. Use get_post_meta() within your custom loop to fetch and display metadata.

$query = new WP_Query( array( 'post_type' => 'releases' ) );
if ( $query->have_posts() ) : 
    while ( $query->have_posts() ) : $query->the_post();
        // Use get_post_meta as shown earlier
    endwhile; 
endif; 
wp_reset_postdata();

Conclusion

Mastering the retrieval and display of custom fields from custom post types in WordPress significantly enhances your ability to build versatile and rich websites. Whether using core WordPress functions or the ACF plugin, you now have the knowledge to implement and display custom data seamlessly. Start customizing and make your content shine!