How to Display Custom Data from Custom Post Types in WordPress

Learn how to easily retrieve and display custom data associated with your custom post types in WordPress themes and templates.

Display Custom Data from Custom Post Types in WordPress

Code and Implementation:

There are two main approaches to achieve this:

1. Using the_field() Function (Simple Approach):

This method is suitable for basic scenarios where you have a limited number of custom fields and want to display them directly within the loop.

Code:

<?php
// Inside your theme template file (e.g., single.php, archive.php)

if ( have_posts() ) :
  while ( have_posts() ) : the_post();

    // Display the title
    the_title( '<h1>', '</h1>' );

    // Retrieve and display custom field data
    echo '<p>Custom Field Name: ' . get_field( 'custom_field_name' ) . '</p>';
    // Repeat for other custom fields (replace 'custom_field_name' with the actual field names)

  endwhile;

  wp_reset_postdata();

else :
  // No posts found message
  echo '<p>No custom post type items found.</p>';
endif;
?>

Explanation:

• The have_posts() and the_post() functions are essential for iterating through your custom post type entries.
• the_title() displays the post title.
• get_field( 'custom_field_name' ) retrieves the value of a specific custom field by its name. Replace custom_field_name with the actual names of your custom fields.

2. Using WP_Query and Custom Loop (More Flexible Approach):

This method provides more control over the query and offers greater flexibility for complex scenarios.

Code:

<?php
// Inside your theme template file (e.g., page.php, custom template)

$args = array(
  'post_type' => 'your_custom_post_type' // Replace with your custom post type slug
);

$custom_post_query = new WP_Query( $args );

if ( $custom_post_query->have_posts() ) :
  while ( $custom_post_query->have_posts() ) : $custom_post_query->the_post();

    // Display the title and other post details
    the_title( '<h2>', '</h2>' );

    // Retrieve and display custom field data
    $custom_field_value = get_post_meta( get_the_ID(), 'custom_field_name', true ); // Get a single value
    echo '<p>Custom Field Name: ' . $custom_field_value . '</p>';

    // Or, retrieve all values as an array (if applicable)
    $custom_field_values = get_post_meta( get_the_ID(), 'custom_field_name' ); // Get all values
    if ( !empty( $custom_field_values ) ) {
      echo '<ul>';
      foreach ( $custom_field_values as $value ) {
        echo '<li>' . $value . '</li>';
      }
      echo '</ul>';
    }

  endwhile;

  wp_reset_postdata();

else :
  // No posts found message
  echo '<p>No custom post type items found.</p>';
endif;
?>

Explanation:

• $args defines the query parameters, including the post_type to target.
• new WP_Query( $args ) creates a custom query to retrieve your custom posts.
• The loop iterates through the results.
• get_post_meta() retrieves custom field data based on post ID and field name. Use true for the third argument to get a single value or remove it to get an array of values.

Implementation Steps:

Create a Custom Post Type (if you haven’t already):

• Use a plugin like “Custom Post Type UI” or code snippets found online.
• Define the custom post type’s name, slug, and any relevant features (e.g., supports comments, featured images).

Add Custom Fields to Your Custom Post Type:

• Use the plugin’s interface or code snippets to create custom fields.
• Give each field a descriptive name and choose the appropriate field type (e.g., text, number, date picker, image upload).

Retrieve Custom Field Data:

• In your theme’s template files (explained in step 4), you’ll use WordPress functions to access the custom field data.
• The most common functions are:
  • get_post_meta($post->ID, 'custom_field_name', true): Retrieves a single value from a custom field (replace custom_field_name with the actual name).
  • get_post_custom_values($post->ID, 'custom_field_name'): Returns an array of values if the field allows multiple values.

Display Custom Field Data in Your Theme:

• Archive Template (Displays a list of custom post type items):
  • If you want to display custom data on an archive page listing all your custom post types, locate the relevant archive template file. This file could be named archive-{custom_post_type_slug}.php (replace {custom_post_type_slug} with your actual slug).
  • Inside a loop that iterates through the custom post type items (using WP_Query), use the get_post_meta function to retrieve custom field values and display them within your HTML structure.
• Single Template (Displays an individual custom post type item):
  • If you want to display custom data on a single custom post type item page, locate the single-{custom_post_type_slug}.php template file (replace {custom_post_type_slug} with your actual slug).
  • Similar to the archive template, use get_post_meta within your template to retrieve and display custom field data.