0

Firstly let me just say I am a beginner with backend but have learned a lot the past few weeks working on this backend project my company has allowed me to work on. I've learned to use Ajax, create custom post types, custom taxonomies and filter posts as well depending on those custom taxonomies. I've worked a lot with ACF and am getting basic fundamental needs of a CMS website down but what I am doing now seems to be the most tricky part of the whole website.

There is a page that displays all the custom posts of this custom post type (we call them insights). However, each insight from post 1 through 8 is using a different template as shown in this picture:

enter image description here

The goal: To display the first 8 newest insights and on page scroll to infinite load the next set of 8 insights.

My problem is that 3 things are happening depending on how I code this:

1) I am using a counter to detect the post number of the current post and assigning that post to generate the correct template it needs to be displayed in. Here is my code:

   <?php
   // if there are posts in the query, while we have those posts, grab each post and generate this html below for each post
    while ($the_query->have_posts() ): $the_query->the_post(); ?>
<?php $counter = 0; ?>

 <?php if ($the_query->current_post==$counter) : ?>
     <div class="row">
         <div class="col-xs-8  ">
             <div class="post">
                 <div class="row">
                     <div class="col-xs-6">
                         <div class="thumb" style="background:url(<?php echo the_field('insight_featured_image') ?>) 50% no-repeat;"></div>
                     </div>
                     <div class="col-xs-6">
                         <div class="cnt">
                           <?php if (get_field('insight_title')): ?>
                             <p class="cat"><?php the_field('insight_title') ?> | <?php the_field('insight_date') ?></p>
                           <?php endif; ?>
                           <h3 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                           <?php if (get_the_term_list( get_the_ID(), 'Insight Authors')): ?>
                             <p class="author">By <?php echo get_the_term_list( get_the_ID(), 'Insight Authors');  ?></p>
                           <?php endif; ?>
                           <div class="excerpt">
                               <p><?php the_field('insight_post_content') ?></p>
                           </div>
                           <a href="<?php the_permalink(); ?>" class="read-more">Read More</a>
                         </div>
                     </div>
                 </div>
             </div>
         </div>
      <?php endif; ?>
      <?php $counter++?>
   <?php if ($the_query->current_post==$counter) : ?>
     <div class="col-xs-4  ">
         <div class="post">
             <div class="row">
                 <div class="col-xs-12">
                   <div class="cnt">
                     <?php if (get_field('insight_title')): ?>
                       <p class="cat"><?php the_field('insight_title') ?> | <?php the_field('insight_date') ?></p>
                     <?php endif; ?>
                     <h3 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                     <?php if (get_the_term_list( get_the_ID(), 'Insight Authors')): ?>
                       <p class="author">By <?php echo get_the_term_list( get_the_ID(), 'Insight Authors');  ?></p>
                     <?php endif; ?>
                     <div class="excerpt">
                         <p><?php the_field('insight_post_content') ?></p>
                     </div>
                     <a href="<?php the_permalink(); ?>" class="read-more">Read More</a>
                   </div>
                 </div>
             </div>
         </div>
     </div>
 </div>
      <?php endif; ?>
      <?php $counter++?>
   <?php if ($the_query->current_post==$counter) : ?>
     <div class="row">
       <div class="col-xs-4  ">
           <div class="post">
               <div class="row">
                   <div class="col-xs-12">
                     <div class="cnt">
                       <?php if (get_field('insight_title')): ?>
                         <p class="cat"><?php the_field('insight_title') ?> | <?php the_field('insight_date') ?></p>
                       <?php endif; ?>
                       <h3 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                       <?php if (get_the_term_list( get_the_ID(), 'Insight Authors')): ?>
                         <p class="author">By <?php echo get_the_term_list( get_the_ID(), 'Insight Authors');  ?></p>
                       <?php endif; ?>
                       <div class="excerpt">
                           <p><?php the_field('insight_post_content') ?></p>
                       </div>
                       <a href="<?php the_permalink(); ?>" class="read-more">Read More</a>
                     </div>
                   </div>
               </div>
           </div>
       </div>
     <?php endif; ?>
     <?php $counter++?>
     <?php if ($the_query->current_post==$counter) : ?>
       <div class="col-xs-8  ">
           <div class="post">
               <div class="row">
                   <div class="col-xs-6">
                       <div class="thumb" style="background:url(<?php echo the_field('insight_featured_image') ?>) 50% no-repeat;"></div>
                   </div>
                   <div class="col-xs-6">
                       <div class="cnt">
                         <?php if (get_field('insight_title')): ?>
                           <p class="cat"><?php the_field('insight_title') ?> | <?php the_field('insight_date') ?></p>
                         <?php endif; ?>
                         <h3 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                         <?php if (get_the_term_list( get_the_ID(), 'Insight Authors')): ?>
                           <p class="author">By <?php echo get_the_term_list( get_the_ID(), 'Insight Authors');  ?></p>
                         <?php endif; ?>
                         <div class="excerpt">
                             <p><?php the_field('insight_post_content') ?></p>
                         </div>
                         <a href="<?php the_permalink(); ?>" class="read-more">Read More</a>
                       </div>
                   </div>
               </div>
           </div>
       </div>
   </div>
   <?php endif; ?>
   <?php $counter++?>
     <?php if ($the_query->current_post==$counter) : ?>
       <div class="row">
            <div class="col-xs-4  ">
                <div class="post tall">
                    <div class="row">
                         <div class="col-xs-12">
                           <div class="thumb" style="background:url(<?php echo the_field('insight_featured_image') ?>) 50% no-repeat;"></div>
                        </div>
                        <div class="col-xs-12">
                            <div class="cnt">
                              <?php if (get_field('insight_title')): ?>
                                <p class="cat"><?php the_field('insight_title') ?> | <?php the_field('insight_date') ?></p>
                              <?php endif; ?>
                              <h3 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                                <?php if (get_the_term_list( get_the_ID(), 'Insight Authors')): ?>
                                  <p class="author">By <?php echo get_the_term_list( get_the_ID(), 'Insight Authors');  ?></p>
                                <?php endif; ?>
                                <div class="excerpt">
                                    <p><?php the_field('insight_post_content') ?></p>
                                </div>
                                <a href="<?php the_permalink(); ?>" class="read-more">Read More</a>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
   <?php endif; ?>
   <?php $counter++?>
   <?php if ($the_query->current_post==$counter) : ?>
     <div class="col-xs-8">
         <div class="row">
             <div class="col-xs-6  ">
                 <div class="post">
                     <div class="row">
                         <div class="col-xs-12">
                           <div class="cnt">
                             <?php if (get_field('insight_title')): ?>
                               <p class="cat"><?php the_field('insight_title') ?> | <?php the_field('insight_date') ?></p>
                             <?php endif; ?>
                             <h3 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                               <?php if (get_the_term_list( get_the_ID(), 'Insight Authors')): ?>
                                 <p class="author">By <?php echo get_the_term_list( get_the_ID(), 'Insight Authors');  ?></p>
                               <?php endif; ?>
                               <div class="excerpt">
                                   <p><?php the_field('insight_post_content') ?></p>
                               </div>
                               <a href="<?php the_permalink(); ?>" class="read-more">Read More</a>
                             </div>
                         </div>
                     </div>
                 </div>
             </div>
   <?php endif; ?>
   <?php $counter++?>
   <?php if ($the_query->current_post==$counter) : ?>
     <div class="col-xs-6  ">
         <div class="post">
             <div class="row">
                 <div class="col-xs-12">
                   <div class="cnt">
                     <?php if (get_field('insight_title')): ?>
                       <p class="cat"><?php the_field('insight_title') ?> | <?php the_field('insight_date') ?></p>
                     <?php endif; ?>
                     <h3 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                       <?php if (get_the_term_list( get_the_ID(), 'Insight Authors')): ?>
                         <p class="author">By <?php echo get_the_term_list( get_the_ID(), 'Insight Authors');  ?></p>
                       <?php endif; ?>
                       <div class="excerpt">
                           <p><?php the_field('insight_post_content') ?></p>
                       </div>
                       <a href="<?php the_permalink(); ?>" class="read-more">Read More</a>
                     </div>
                 </div>
             </div>
         </div>
     </div>
 </div>
   <?php endif; ?>
   <?php $counter++?>
   <?php if ($the_query->current_post==$counter) : ?>
     <div class="row">
         <div class="col-xs-12  ">
             <div class="post">
                 <div class="row">
                     <div class="col-xs-6">
                       <div class="cnt">
                         <?php if (get_field('insight_title')): ?>
                           <p class="cat"><?php the_field('insight_title') ?> | <?php the_field('insight_date') ?></p>
                         <?php endif; ?>
                         <h3 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                           <?php if (get_the_term_list( get_the_ID(), 'Insight Authors')): ?>
                             <p class="author">By <?php echo get_the_term_list( get_the_ID(), 'Insight Authors');  ?></p>
                           <?php endif; ?>
                           <div class="excerpt">
                               <p><?php the_field('insight_post_content') ?></p>
                           </div>
                           <a href="<?php the_permalink(); ?>" class="read-more">Read More</a>
                         </div>
                     </div>
                     <div class="col-xs-6">
                       <div class="thumb" style="background:url(<?php echo the_field('insight_featured_image') ?>) 50% no-repeat;"></div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
   </div>
 </div>
   <?php endif; ?>
   <?php $counter++?>
   <?php if ($the_query->current_post==$counter) : ?>
     <div class="row">
         <div class="col-xs-12  ">
             <div class="post">
                 <div class="row">
                     <div class="col-xs-6">
                       <div class="cnt">
                         <?php if (get_field('insight_title')): ?>
                           <p class="cat"><?php the_field('insight_title') ?> | <?php the_field('insight_date') ?></p>
                         <?php endif; ?>
                         <h3 class="post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
                           <?php if (get_the_term_list( get_the_ID(), 'Insight Authors')): ?>
                             <p class="author">By <?php echo get_the_term_list( get_the_ID(), 'Insight Authors');  ?></p>
                           <?php endif; ?>
                           <div class="excerpt">
                               <p><?php the_field('insight_post_content') ?></p>
                           </div>
                           <a href="<?php the_permalink(); ?>" class="read-more">Read More</a>
                         </div>
                     </div>
                     <div class="col-xs-6">
                       <div class="thumb" style="background:url(<?php echo the_field('insight_featured_image') ?>) 50% no-repeat;"></div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
     <?php $counter++ ?>
<?php endif; ?>
<?php endwhile;
die();
};

Problem: This code works but it only works for the first 8 posts in my loop. Instead of generating the next 8 posts it just generates the same first 8 posts over and over. I'm using page scrolling to generate the ajax call that repeats this code.

2) Instead of using the counter method I have hard-coded the current post into the first 8 templates like so:

https://pastebin.com/raw/4HXcSJYK

Problem: Again, this is still generating the same 8 posts but I actually understand why-- because I have hard-coded the current post value into the if statements so it will always display posts 1-8. I do not know how to make this code dynamic and I have tried everything..

3) A slightly different way of using the counter. I see that this is a more traditional way of using the counter and the modulus % operator. https://pastebin.com/raw/GdjPwZah

Problem: This actually generates every post I have and it duplicates each post 8 times putting the post into each template and then showing the next post whilst duplicating that post 8 times and making it fit into every template.

I've tried making a 8 separate post counter variables in javascript and adding +1 to them every time the ajax call is a success so that in PHP it will update it-- still, nothing happens. I believe I am over-complicating this but I have honestly spent so much time on it that I have Googled myself out of resources and have came here to ask for help.

My ajax code:

// WP Admin AJAX page var ajaxpagination1 = { "ajaxurl":"http://localhost/healthscape/wp-admin/admin-ajax.php" }; alert('this is a test') //Ajax call to load all newest insights $.ajax({ url: ajaxpagination1.ajaxurl, type: 'post', data: { action: 'all_insights_on_page_load', }, success: function(ajaxLoad) { $("#test").append(ajaxLoad) }

  • I'd strongly recommend using get_template_part to move huge chunks of your code out into separate files so that it's easier to understand. Also, where is the AJAX code in your question? – Tom J Nowell Nov 13 '18 at 22:49
  • Hey Tom. Thanks for editing my post to look a little better. I'll try to follow the standards for code posting now that I see this is how I should've posted it. Here's my ajax code var ajaxpagination1 = { "ajaxurl":"http://localhost/healthscape/wp-admin/admin-ajax.php" }; alert('this is a test') //Ajax call to load all newest insights $.ajax({ url: ajaxpagination1.ajaxurl, type: 'post', data: { action: 'all_insights_on_page_load', }, success: function(ajaxLoad) { $("#section").append(ajaxLoad) } – TylerFleming Nov 13 '18 at 23:00
  • Awesome! But now a tonne of people with the same problem who find this will never know what the solution was :( Can you post it as an answer? – Tom J Nowell Nov 14 '18 at 19:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.