0

I have problem with looping and WP_Query. Any idea how i can implement the multiple carouselitems please check what html output should be in html

So basically one of my goal is each div have a pages

<div class="col-sm-6 col-md-3"></div>

should have get all pages from parents which is "Destinations".

So i have an class CarouselItem active. (Actually this is only a slider style for changing the contents purposes).

And here the previous what html code should be in wordpress i mean the output in html format.

<section class="carouselItem active">
      <div class="col-sm-6 col-md-3">
        <span>
          <div class="col-xs-4 col-sm-12">
          <-- thumbnail -->
          </div>
          <div class="col-xs-8 col-sm-12">
          <-- content -->
          </div>
        </span>
      </div>
      <div class="col-sm-6 col-md-3">
        <span>
          <div class="col-xs-4 col-sm-12">
          <-- thumbnail -->
          </div>
          <div class="col-xs-8 col-sm-12">
          <-- content -->
          </div>
        </span>
      </div>
      <div class="col-sm-6 col-md-3">
        <span>
          <div class="col-xs-4 col-sm-12">
          <-- thumbnail -->
          </div>
          <div class="col-xs-8 col-sm-12">
          <-- content -->
          </div>
        </span>
      </div>
      <div class="col-sm-6 col-md-3">
        <span>
          <div class="col-xs-4 col-sm-12">
          <-- thumbnail -->
          </div>
          <div class="col-xs-8 col-sm-12">
          <-- content -->
          </div>
        </span>
      </div>
</section>

<section class="carouselItem"></section>
<section class="carouselItem"></section>

And here what i do with wordpress. Yes i'm a little bit new with wordpress.

Here what i do i use post_per_page to 4, post_type to pages since i want to query all pages under destinations. And post_parent to a variable of $destination with ->ID

 <?php 
  $destination = get_page_by_title( 'Destinations');
  // WP_Query arguments
  $args = array (
    'post_parent'            => $destination->ID,
    'post_type'              => 'page',
    'posts_per_page'         => '4',
  );

  // The Query
  $query = new WP_Query( $args );
?>  
<section class="carouselItem active">
    <?php 
        if($query-> have_posts()): while($query->have_posts()): $query->the_post(); 
        $location = get_post_meta($post->ID, 'Location', $single = true);
    ?>  
     <div class="col-sm-6 col-md-3">
        <span>
          <div class="col-xs-4 col-sm-12">
            <?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
              <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
                <?php the_post_thumbnail('homepage'); // Declare pixel size you need inside the array ?>
              </a>
            <?php else :?>
                <img src="<?php echo get_template_directory_uri(); ?>/assets/images/others/placeholder2.jpg" alt="">
            <?php endif; ?>
          </div>
          <div class="col-xs-8 col-sm-12">
            <h5><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a></h5>
            <small><?php echo $location; ?> </small>
            <p><?php the_excerpt(); ?></p>
          </div>
        </span>
      </div>  
    <?php endwhile; endif; ?>   
</section>

Result on me is are they only loop the content and the carouselItem is not duplicating for another post

check this images so here what i want to do instead of of the working.

Thank you for help. i'm very new with WP_Query.

Update after the update for diego: The carousel is now working but the pages seems only same. like this one

slider 1 = A A A A slider 2 = B B B B slider 3 = C C C C slider 4 = D D D D

instead of slider 1 = A B C D slider 2 = E F G H slider 3 = I J K L

3 Answers 3

1

You should reset the query after your active slider. So place this code after your first loop (after endwhile; endif; ):

//Reset Query
wp_reset_postdata();

Also try setting the paged atribute:

$paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
// WP_Query arguments
$args = array (
    'post_parent'            => $destination->ID,
    'post_type'              => 'page',
    'posts_per_page'         => '4',
    'paged'                  => $paged,
);

Hope that helps,
Cheers

5
  • Thank you but it's not work yeah i already read the codex and i already put the wp_reset_postdata(); but still not working. Sep 25, 2014 at 10:05
  • Can you paste the rest of the html/php code? you only pasted the code for the first slider... Sep 25, 2014 at 10:07
  • i only have 1 slider and that from above i'm not sure if i'm going right or not. Sep 25, 2014 at 10:09
  • please see the edited answer with the "paged" atribute. Sep 25, 2014 at 10:38
  • Now it working the carousel part but the post seems duplicating see my edited topic. Thanks Sep 25, 2014 at 11:46
0

What about trying a different approach using get_pages() ?

  $destination = get_page_by_title( 'Destinations');
  $paged = ( get_query_var('paged') ) ? get_query_var('paged') : 1;
  $num_pages_per_page = 4;

  $args = array(
    'sort_order' => 'ASC',
    'child_of' => $destination->ID,
    'number' => $num_pages_per_page,
    'offset' => ( $paged - 1 ) * $num_pages_per_page,
    'post_type' => 'page',
    'post_status' => 'publish'
    ); 
    $pages = get_pages($args); 

This will get an array with your pages... On page 2 you will get 5,6,7,8 and so on...

Hope that solves your problem,

1
  • still not working. Anyway thanks you for the help i think i need to do a 2 loops one is for the carousel item and one for the pages inside the carousel. Sep 27, 2014 at 9:47
-2

before the slider

//<?php $i = 0; ?>
<section class="carouselItem <?php if($i == 0 ) : echo "active"; ?>">

//start loop here

<section class="carouselItem <?php if($i == 0 ) : echo "active"; ?>">

 </section>
 //$i++; end loop

Hope this will solve your problem

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.