the_field in wordpress not outputting in html depending on the order of pages

Question

I have something that I just can't understand. I did a one page layout site in wordpress. It consist of one template-index.php that only have one mainContainer div and about 6 include_once template-. Then in the admin section of wordpress I used advanced custom fields to create the different fields all related to template-index.php.

Everything shows up just fine except for the text on the last frame or last include if you will. But here is the strange thing. If I change the order of the last two includes both text shows up just fine and then when I change the order back the last include loose it's text again.

I checked the code, every php tag is closed just fine, the include before also. I don't know. Did something like this ever happen to one of you? What could it be?

Thanks

edit: here is a bit of code. So the index page is pretty simple:

<?php
 /* Template Name:  index template */ 
?>

<?php get_header(); ?>
<div class="mainContainer"id='fullpage'>

    <?php include_once 'template-about.php'; ?>
    <?php include_once 'template-theDesign.php'; ?>
    <?php include_once 'template-theApp.php'; ?>
    <?php include_once 'template-getApp.php'; ?>
    <?php include_once 'template-community.php'; ?>
    <?php include_once 'template-contact.php'; ?>

</div>
<?php get_footer(); ?>enter code here

the last two includes look like this:

<?php
 /* Template Name: Bob community template */ 
?>
<!-- <div id="section-5"> -->
<div class="sectionContainer community section" id='section_five'>
 <div class="container main">
    <div class="vertical100 firstSection col-md-12 topSection ">
        <section class='worldMap animation col-md-6'>
            <div class="imgContainer">
                <div class="wordpressImg">
                    <img class='worldMap' src="<?php echo get_template_directory_uri(); ?>/img/worldmap.png" />
                </div> <!-- wordpressImg -->
            </div><!-- imgContainer -->
        </section>
        <section class="explications col-md-6">
            <div class="communityExplication">
                    <div class="wordpressTexte">
                        <?php the_field('community_text'); ?>  
                        <div class="stories">
                            <?php 
                                $args = array( 'post_type' => 'stories', 'posts_per_page' => 8, 'orderby' => 'rand' );
                                $loop = new WP_Query($args);
                                $posts = $loop->posts;

                                if(have_posts()) {  
                                    $first = true; ?> 
                                <div class="storieAligner">
                                    <div class="stories-container "> 
                                        <?php
                                        $count = 0;
                                        while($loop->have_posts() ) : $loop->the_post(); 
                                            $randomPost = $posts[$count];
                                            $image = get_field('images');
                                            $temoignage = get_field('temoignage');
                                        ?>              
                                            <!-- <div class="storiePhoto"> -->
                                            <div class='storiesThumbs' style='background-image: url("<?php echo $image['url'];  ?>")'  data-temoignage="<?php echo $temoignage; ?>"></div>
                                                <div class="categorie"></div>
                                            <!-- </div>  -->

                                        <?php $count++; endwhile; ?>
                                    </div> <!-- stories-container -->
                                    <div class="fullStorie hiddenStorie">
                                        <div class="back"></div>
                                        <div class="leftDiv">
                                            <div class="leftContent">

                                            </div>
                                        </div>
                                        <div class="rightDiv">
                                            <div class="rightContent"></div>
                                        </div>
                                    </div> 
                                </div> <!-- storieAligner -->
                            <?php }; ?> <!-- if have_posts -->  

                        </div> <!-- stories -->
                        <div class="linkContainer" ><a class='formToggle pinkButton roll' href="#" title="Wha you say"><span data-title='What you say'>What you say</span></a></div>

                    </div> <!-- wordpressTexte -->
            </div> <!-- commnunityExplication -->
            <!-- <div class="storiesFormContainer"> -->
                <div class="storiesForm hidden">
                    <div class="formContainer">
                        <h1><?php echo __('Leave a Review of your app ', 'site'); ?></h1>
                        <?php echo do_shortcode('[contact-form-7 id="89" title="community-contact"]'); ?>

                    </div>
                </div>
            <!-- </div> storiesFormContainer -->
        </section>
    </div> <!-- get app -->
</div> <!-- main -->

and the contact template like this

<?php
 /* Template Name: Contact-us template */ 
?>
<!-- section-6 -->
<div class="sectionContainer contact section" id='section_six'>
  <div class="container main" >
    <div class="vertical100 col-md-12 topSection ">
        <section class='explications col-md-3'>
            <div class="blockTexte">
                <div class="wordpressTexte">
                    <?php the_field('questions'); ?>
                    <a class ='pinkButton roll' href="#" title="visit page"><span data-title='<?php echo __('visit page', 'site'); ?>'><?php echo __('visit page', 'site'); ?></span></a>
                </div>
            </div>
        </section>
        <section class="formulaire col-md-9">
            <div class="formContainer">
                <div class="wordpressForm">
                    <?php echo do_shortcode('[contact-form-7 id="44" title="contact-us"]'); ?>
                </div>
            </div>
        </section>
    </div> <!-- knowBob -->
</div>

So what could be wrong? Ps I know there's a bit a french and english in the code. I usually write what comes up first in my head.

Answer 1

You need to reset the post data to the original query using wp_reset_postdata after you're done looping through a custom query:

 <div class="stories-container "> 
 <?php
     $count = 0;
     while($loop->have_posts() ) : $loop->the_post(); 
         $randomPost = $posts[$count];
         $image = get_field('images');
         $temoignage = get_field('temoignage');
 ?>              
 <!-- <div class="storiePhoto"> -->
      <div class='storiesThumbs' style='background-image: url("<?php echo $image['url'];  ?>")'  data-temoignage="<?php echo $temoignage; ?>"></div>
      <div class="categorie"></div>
 <!-- </div>  -->

 <?php $count++; endwhile; wp_reset_postdata(); ?><!-- this line here -->
 </div> <!-- stories-container -->

Otherwise the $post object will remain the last post of the $loop query, causing any other behind the scenes requests for post data down the road (in your case get_field ) to reference the wrong post until you hit the outer loop again.