skip to Main Content

I’ve created an ajax callback where I display posts with specific tags, which works fine.
But I want to display the 5 posts with a different DIV surrounding each and I cannot get it to work.


    function filter_projects() {
      $tagSlug = $_POST['tags'];

      if(!empty($tagSlug)) {
        
        $ajaxposts = new WP_Query(array(
          'post_type' => 'projects',
          'posts_per_page' => 5,
          'order_by' => 'date',
          'order' => 'desc',
          'tax_query' => array(
              array(
                  'taxonomy' => 'tag',
                  'terms' => $tagSlug,
                  'field' => 'slug',
              )
          ),
        ));
        
      } else {
        
        $ajaxposts = new WP_Query(array(
          'post_type' => 'projects',
          'posts_per_page' => 5,
          'order_by' => 'date',
          'order' => 'desc',
        ));
        
      }

        $response = '';

      


      if ( $ajaxposts->have_posts() ) :     
          while ( $ajaxposts->have_posts() && $ajaxposts->current_post = 0 ) : $ajaxposts->the_post(); 
            $template = include('templates/index-case.php');         
            $response .= '<div class="1">' . $template . '</div>';
          endwhile; 
      endif;

      if ( $ajaxposts->have_posts() ) :     
          while ( $ajaxposts->have_posts() && $ajaxposts->current_post = 1 ) : $ajaxposts->the_post(); 
            $template = include('templates/index-case.php');         
            $response .= '<div class="2">' . $template . '</div>';
          endwhile; 
      endif;

      if ( $ajaxposts->have_posts() ) :     
          while ( $ajaxposts->have_posts() && $ajaxposts->current_post = 2 ) : $ajaxposts->the_post(); 
            $template = include('templates/index-case.php');         
            $response .= '<div class="3">' . $template . '</div>';
          endwhile; 
      endif;

      if ( $ajaxposts->have_posts() ) :     
          while ( $ajaxposts->have_posts() && $ajaxposts->current_post = 3 ) : $ajaxposts->the_post(); 
            $template = include('templates/index-case.php');         
            $response .= '<div class="4">' . $template . '</div>';
          endwhile; 
      endif;

      if ( $ajaxposts->have_posts() ) :     
          while ( $ajaxposts->have_posts() && $ajaxposts->current_post = 4 ) : $ajaxposts->the_post(); 
            $template = include('templates/index-case.php');         
            $response .= '<div class="4">' . $template . '</div>';
          endwhile; 
      endif;
      

      echo $response;
      exit;
    }
    add_action('wp_ajax_filter_projects', 'filter_projects');
    add_action('wp_ajax_nopriv_filter_projects', 'filter_projects');
    

I’ve tried lots of different syntax things, but nothing seems to work.
I only get displayed the first post.

The output is suppose to be like this:

    <div class="one">Post One</div>
    <div class="two">Post Two</div>
    <div class="three">Post Three</div>
    <div class="four">Post Four</div>
    <div class="five">Post Five</div>

Can someone help me out?

Thanks,
Andreas

2

Answers


  1. Did you check how many posts are returning from your DB. use var_dump

    var_dump($ajaxposts);
    

    and check. If it returns 5 post then you have problem in your display code. You must use loop to display the records. For example

    if ( $ajaxposts->have_posts() ) {
        while ( $ajaxposts->have_posts() ) {
            $ajaxposts->the_post();
            // display content
        }
    }
    
    Login or Signup to reply.
  2. Make sure you do var_dump($ajaxposts) to see if your WP_Query is returning the posts that you’re expecting.

    I’m not sure why you’re looping through your WP_Query multiple times while what you’re trying to achieve can be accomplished by using a simple variable that counts up as you’re looping through:

        $count=0;
    $template = include('templates/index-case.php');   
    
    if ( $ajaxposts->have_posts() ) {
        while ( $ajaxposts->have_posts() ) {       
            $ajaxposts->the_post() ;  
                $count++;  
                $response .= '<div class="'.$count.'">' . $template . '</div>';
        } // end while
    } // end if
    

    Alternatively, should you wish to assign specific names you can use the same count variable to loop through an array with names:

    $div_names=array('one','two','three','four','five');
    $count=0;
    $template = include('templates/index-case.php');   
    
    if ( $ajaxposts->have_posts() ) {
        while ( $ajaxposts->have_posts() ) {       
            $ajaxposts->the_post() ;  
                $response .= '<div class="'.$div_names[$count].'">' . $template . '</div>';
                $count++;  
        } // end while
    } // end if
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search