I have a while loop created to display all my wordpress posts. The issue is that all the posts (except the first) appear inside the first post.
I’ve check my div structures and I couldn’t find any issues. The loop is working, but the div isn’t showing in the right place.
<div class="slider-vertical"> <!-- This is the main loop for the posts --> <?php $count = 0; while ( $all_posts->have_posts() ) : $all_posts->the_post(); $count++; // Variabled for the specific fields (color, 3D objects and so on...) $fond_couleur = get_field('fond_de_couleur_hex'); $visuel_3D = get_field('source_iframe_3d'); $visuel_3D_2 = get_field('source_iframe_3d_2'); // get_template_part( 'template-parts/content', 'portfolio' ); $content = get_the_content(); $content = apply_filters( 'the_content', $content ); $content = str_replace( ']]>', ']]>', $content ); $gallerieArray = get_field('image_galerie'); $title = get_the_title($post); ?> <!-- HTML structure for the posts - this is displayed, but only the first one is at the right place --> <?php echo '<div class="post-numero'; if($count == 1){ echo ' actif'; } echo '">'; ?> <!-- DIV that contains the 3D object --> <div class="visuel-3d" style="background:<?php echo $fond_couleur;?>;"> <!-- Injecting the 3D Object via an iframe --> <div class="slider-horizontal"> <?php echo '<span class="post-horizontal actif">'. $visuel_3D .'</span>';?> <?php if($visuel_3D_2){ echo '<span class="post-horizontal">'. $visuel_3D_2 .'</span>'; } ?> </div> <h2 class="titrePost"><?php echo $title; ?></h2> </div> <!-- Cross used to close the rightside menu --> <span class="arrow-right-sidebar">x</span> <!-- HTML structure for the rightside menu --> <div class="right-sidebar-content foo"> <div class="right-top"> <h2 style="text-align: center;"><?php echo $title; ?></h2> </div> <div class="right-bottom"> <div><?php echo $content ?></div><!-- That is where the next posts of the while loop get printed --> <div class="gallerie-sidebar-full"> <?php // loop for the image gallery at the bottom of the rightside menu if ($gallerieArray == true){ foreach($gallerieArray as $key => $val){ $gallerieImages[] = $val["url"]; } $idg = 0; foreach ($gallerieImages as $val){ echo '<img id="id-'. $title .'-'. $idg .'" class="gallerie-sidebar" src="'. $val .'">'; $idg += 1; } } ?> </div> </div> </div> </div> <?php endwhile; ?> </div>
What is expected is 4 different posts inside the “slider-vertical” div displayed at the same level in the HTML structure. The actual result is the first post at the correct level and then the next posts 2 levels deeper inside the first post.
Advertisement
Answer
this kind of problem occurs when there is a not properly closed HTML tag on the first execution of the loop, try to use a short statement syntax
echo '<div class="post-numero'. (($count == 1)? ' actif' : '').'">;
check also the content printed by <?php echo $content ?>
of the first post, may contains an open HTML tag.
You can easily check the generated code using the souce view (CTRL+U) in Firefox that highlights in red the wrong HTML closing tags