ACF not displaying in Wordpress Template Parts - php

Question

I am using the ACF plugin to create custom fields for my wordpress site. Everything is going well with zero issues when I keep my code all on the same page. However, when I break the code into template parts, the ACF’s for each section’s hero and custom fields stopped outputting data. It’s almost as if being in template parts is making the fields read as empty, but when I reorder the get_template_parts php (ie, move content-rolls before content-pizza or vice versa), whichever part comes first displays correctly while the second does not.
<?php get_template_part('template-parts/home/content', 'callout'); ?>
<?php get_template_part('template-parts/home/content', 'menu'); ?>
<?php get_template_part('template-parts/home/content', 'pizza'); ?>
<?php get_template_part('template-parts/home/content', 'rolls'); ?>
The same thing happens if I move content-menu.php under content-pizza.php – the ACF’s stop showing that anything is filled into them on the backend. I suspect the issue is in the content-pizza.php (content-rolls.php is the same code copied, with the correct variables filled in), but I can’t see what the issue is.
The content-pizza.php page coding is:
<?php
/**
* Template part for displaying pizza content in page-home.php
*
* #link https://developer.wordpress.org/themes/basics/template-hierarchy/
*
* #package JJs_Pizza
*/
// Variables
$pizza_hero = get_field('pizza_hero');
$pizza_custom = get_field('pizza_custom');
$pizza_args = array(
'posts_per_page' => 50,
'post_type' => 'food',
'category_name' => 'pizza',
'orderby' => 'post_id',
'order' => 'ASC'
);
?>
<!-- Pizza Section -->
<section class="menu-pizza mt-4" id="pizza">
<div class="row no-gutters p-3">
<div class="col">
<?php if( !empty($pizza_hero) ) : ?>
<?php echo($pizza_hero); ?>
<?php endif; ?>
</div>
</div>
<div class="row p-3 justify-content-center">
<?php if ( !empty($pizza_custom) ) : ?>
<div class="col-lg-4 col-sm-6 col-xs-12 custom-menu pt-2">
<?php echo($pizza_custom);?>
</div>
<?php endif; ?>
<?php $loop = new WP_Query($pizza_args);?>
<?php while( $loop ->have_posts() ) : $loop->the_post(); ?>
<div class="col-lg-4 col-sm-6 col-xs-12 menu p-4">
<div class="row">
<div class="col d-flex justify-content-center">
<?php if (get_field('image')):?>
<img src=”<?php the_field('image'); ?>" class="img-fluid">
<?php endif; ?>
</div>
</div>
<div class="row">
<div class="col">
<h3 class="text-center"><?php the_title();?></h3>
<p class="text-center mx-auto">
<?php
$labels = get_field(‘labels’);
if( $labels && in_array(‘vegetarian’, $labels) ) {
echo(‘<i class="fas fa-leaf"></i>');
}
?>
<?php
$labels = get_field(‘labels’);
if( $labels && in_array(‘spicy’, $labels) ) {
echo(‘<i class="fas fa-fire"></i>');
}
?>
</p>
<?php if (get_field('description')):?>
<p class="text-center"><em><?php the_field('description');?></em></p>
<?php endif; ?>
</div>
</div>
</div>
<?php endwhile;?>
</div>
</section><!-- End Pizza Section -->
I also uploaded the code I have so far to a live site at https://demo.jjs-pizza.com/ but so far, the only dynamic sections I’ve coded are the pizza and pizza rolls section so you can get an idea of the issue.
Thank you in advance for any help! If worse comes to it, I’ll just nix the template parts and work from the same page, but for the sake of cleaner code, I’m hoping for a solution.

Answer 1

You are calling WP_Query in your templates and not resetting the post data afterwards. I suspect it is something to do with this, although it is difficult to tell without seeing all of the code, how the fields are set up and on what pages, and how it all works together.
If we look at what's happening in the code:
First, your content-pizza.php template part gets executed
It gets the pizza_hero and pizza_custom fields for the current post (presumably set on the homepage?)
Then it does a custom WP_Query and loops through all of the posts in it
Next up your content-rolls.php template part gets called. Assuming is is the same code as content-pizza...
it then to get the pizza_hero and pizza_custom fields for the current post. However because the code doesn't reset the post data after the WP_Query, the current post is still the last post from that loop.
I'm not sure what post this is supposed to be calling get_field on, but I suspect it isn't the post that is still set up as the current post after the custom query.
When you are finished with a custom loop, you can call wp_reset_postdata to reset the post data after you have finished the loop for that query, like this:
<?php $loop = new WP_Query($pizza_args);?>
<?php while( $loop ->have_posts() ) : $loop->the_post(); ?>
// do stuff...
<?php endwhile;?>
<?php wp_reset_postdata(); /* RESET POST DATA HERE */ ?>
You can find out more about wp_reset_postdata in the WP Code Reference for it

Answer 2

Try adding wp_reset_query() after each loop! You need to destroy the existing query to run a new one.