How to Get Custom Fields to Display for Custom Post Type?

• codej

• April 5, 2018 at 7:05 am

Hi, for starters, I’m very new to WordPress development and ACF.

We are using ACF Pro.

I’m trying to set up custom fields for a custom post type I created, but the custom fields will not display. I am trying to get the fields of this custom post type to display on the home page.

I followed the tutorial here:

https://www.freshconsulting.com/wordpress-custom-post-types-advanced-custom-fields/

At first I inserted my own fields into the code, but then when that didn’t work, I copied what they had in the tutorial exactly. But that didn’t work either.

This is the code:

<?php
  $args = array(
    'post_type' => 'products',
    'post_status' => 'publish',
    'posts_per_page' => '10'
  );
  $products_loop = new WP_Query( $args );
  if ( $products_loop->have_posts() ) :
    while ( $products_loop->have_posts() ) : $products_loop->the_post();
      // Set variables
      $title = get_the_title();
      $description = get_the_content();
      $download = get_field(‘download’);
      $featured_image = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full' );
      $product_image1 = $featured_image[0];
      $product_image2 = get_field(‘product_image’);
      // Output
      ?>
      <div class=”product”>
        <img src=”<?php echo $product_image1;  ?>” alt=”<?php echo $title; ?>”>
        <h2><?php echo $title; ?></h2>
        <img src=”<?php echo $product_image1;  ?>” alt=”product-detail” class=”product-detail align-right”>
        <?php echo $description; ?>
        <p><a href=”<?php echo $download; ?>” target=”_blank” name=”Spec Sheet”>Download Spec Sheet</a></p>
      </div>
      <?php
      endwhile;
    wp_reset_postdata();
  endif;

Help is highly appreciated. Thank you!

• Kevin Pliester

• April 7, 2018 at 11:38 am

First of all, you can use the_field() and you should check if a field exists. Second change all quotation marks… use ‘ or use ” …

<?php
$args = array(
	'post_type' => 'products', // post type slug
	'post_status' => 'publish', // post status
	'posts_per_page' => '10' // if not set, you can use the wp-admin settings -> read
);

// posts per page are only showing 10 posts here... you need to setup an pagination, if you want to show more!

$products_loop = new WP_Query( $args );

if( $products_loop->have_posts() ) :
	while ( $products_loop->have_posts() ) : $products_loop->the_post();
	?>
	<div class="product">
	
		<!-- two times the same image? just place the post thumbnail, if exists (wordpress default, no acf) -->
		<?php if( has_post_thumbnail() ): ?>	
		
		<!-- the post thumbnail (wordpress default, no acf) -->
		<?php the_post_thumbnail(); ?>		
		<?php endif; ?>
		
		<!-- post title, name (wordpress default, no acf) -->
		<h2><?php the_title(); ?></h2>
		
		<!-- two times the same image? just place the acf image here -->		
		<?php if( get_field( 'product_image' ) ): ?>
		<img src="<?php the_field( 'product_image' ); ?>" alt="product-detail" class="product-detail align-right" />
		<?php endif; ?>
		
		<!-- post content (wordpress default, no acf) -->
		<?php the_content(); ?>
		
		<!-- download field is filled or exists? -->
		<?php if( get_field('download') ): ?>
		<p><a href="<?php the_field('download'); ?>" target="_blank" name="Spec Sheet">Download Spec Sheet</a></p>
		<?php endif; ?>
		
	</div>
	<?php
	endwhile;	
	wp_reset_postdata();	
endif;

And if you create an image field with ACF, you can choose how something is output. So you can decide if an array() or the direct image path is output. If you choose an array(), you can also use the alt tags of the image.

Usefull links:
has_post_thumbnail()
the_post_thumbnail()
the_field()
get_field()
PHP: Strings