Wordpress PHP loop building custom slider

0
votes

This is my first time posting on here. I've found this site very helpful in the post. I greatly appreciate the dedication the developers have to support each other.

I'm building a testimonial slider in wordpress, for a bit of background knowledge (if required) I've followed; How to Add Rotating Testimonials in WordPress as a starter. Then used Boostrap to code the testimonial slider, Simple Bootstrap Testimonial Carousel (codepen.io/danielmdesigns/pen/yNzJwB)

I'm happy with the HTML/Jquery side. It's the PHP loop that's given me grief. The PHP was taken from the How to Ad Rotating Testimonials in Wordpress from WP Beginner and tried modifying it for my own use.

I've made a comment of the issue in the php code, With my limited PHP knowledge, I'm looking to only release one testimonial per slide, but from trial and error it is to do with the 'php else' statement. Currently in the slider it's releasing all the testimonials stored in the CMS, where it should be releasing one per slider. If you look at the array code, it has a counter on it.

It's the same for endwhile and end if statement, I'm guessing something needs to be added to the php else statement, but unsure what type of if statement. 

<div class="carousel slide"  id="quote-carousel" data-ride="carousel">

<!-- Bottom Carousel Indicators -->
<ol class="carousel-indicators">
  <li data-target="#quote-carousel" data-slide-to="0" class="active"></li>
  <li data-target="#quote-carousel" data-slide-to="1"></li>
  <li data-target="#quote-carousel" data-slide-to="2"></li>
</ol>

<!-- Carousel Slides / Quotes -->
<div class="carousel-inner">

                <?php
                $args = array( 'post_type' => 'testimonial', 'posts_per_page' => 10 );
                $loop = new WP_Query( $args );
                if ( $loop->have_posts() ) : while ( $loop->have_posts() ) : $loop->the_post();
                $data = get_post_meta( $loop->post->ID, 'testimonial', true );
                static $count = 0;
                if ($count == "1") { ?>

<!-- Quote 1 -->
<div class="item active">
  <div class="row">
    <div class="col-sm-12">
      <p><?php the_content(); ?></strong></small>

    </div>
  </div>
</div> 




<!-- Quote 2 -->
<div class="item">
  <div class="row">
    <div class="col-sm-12">


<!-- this php else is the issue, one testimonial should only release per slide -->
    <?php } else  { ?>
      <p><?php the_content(); ?>
</p>
      <small><strong></strong></small>
    </div>
  </div>
</div>
    <?php
$count++; }
endwhile;
endif; ?>
</div>

I know it's possible, I just don't know how. Any guidance would be gratefully received.

3
phpwordpressloopsif-statement

3 Answers

0
votes

Try this:

<div class="carousel-inner">

                <?php
                $args = array( 'post_type' => 'testimonial', 'posts_per_page' => 10 );
                $loop = new WP_Query( $args );
                if ( $loop->have_posts() ){
                   while ( $loop->have_posts() ){
                         $loop->the_post();
                         $data = get_post_meta( $loop->post->ID, 'testimonial', true ); ?>

 <!-- Quote 1 -->
<div class="item active">
  <div class="row">
    <div class="col-sm-12">
      <p><?php the_content(); ?></strong></small>

    </div>
  </div>
</div> 
             <?php      }
                } ?>
</div>

It doesn't seem like you have any need for the else, unless there's an occassion when you will have no testimonials. In which case, inside the else{} you could display alternative content.

I've tried to simply it to make it clearer what is happening. Inside the loop now, each time there is a testimonial, it will repeat the <div class="item active"> div and put the content of the current testimonial each time it loops around. So it will loop through the first 10 (as you have 'posts_per_page' => 10) and keep printing out a new slide each time there is a testimonial.

I have included the line $data = get_post_meta( $loop->post->ID, 'testimonial', true ); although I don't see where you use this in the code. The data variable will only hold content if there is a custom field in the testimonial post type with the ID 'testimonial'.

0
votes

I'd like to close this post, as I've found an alternative tutorial from http://thecodeblock.com/testimonial-slider-using-bootstrap-carousel/

0
votes

you need to write and the conditional statement to have the active class loop through the slide, this is the technique that I used, to get it get it to work with custom post types.

<div class="testimonials" id="testimonials">
<div class="container-fluid">
    <div class="row no-padding">
        <div class="testimonial-content">
            <div class="col-md-push-2 col-md-3">
              <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox">
                  <?php 

                    if( $query->have_posts() ) : 
                      while( $query->have_posts() ) : 
                        $query->the_post(); 
                        $i++;
                  ?>

                    <div class="item <?php if ( $i == 1 ) {echo 'active';} ?>">

                      <p><?php the_field('testimonial'); ?></p>
                      <div class="testimonials-image">
                          <img class="img-responsive" src="<?php the_field('testimonial_image'); ?>" alt="">
                      </div>
                      <h5><?php the_field('testimonial_name'); ?></h5>
                      <h6><?php the_field('testimonial_occupation'); ?></h6>

                    </div>

                  <?php 
                    endwhile; 
                      endif; 
                        wp_reset_postdata(); 
                  ?>

                </div>

                <!-- Controls -->
                <a class="left" href="#carousel-example-generic" role="button" data-slide="prev">
                  <i class="fa fa-long-arrow-left" aria-hidden="true"></i>
                  <span class="sr-only">Previous</span>
                </a>
                <a class="right" href="#carousel-example-generic" role="button" data-slide="next">
                  <i class="fa fa-long-arrow-right" aria-hidden="true"></i>
                  <span class="sr-only">Next</span>
                </a>

              </div>
            </div>
        </div>
    </div>
</div>