Display custom post type and custom fields within a Bootstrap Carousel

1 Views

I am using the “Types” wordpress plugin for the first time. I created a custom post type, as well as some custom fields.

How do I dynamically call all the custom posts into a Bootstrap carousel, and also display the fields within that loop?

Read More

And how do I limit the amount of posts that will cycle through the carousel? Another requirement is that I need to add that necessary Bootstrap ‘active’ class to only the first post.

Here is my first shot, (also note that I have some custom js for creating pagination for the carousel, but that is not an issue (so far!)) 

<!-- need to limit the entire carousel to displaying the 5 latest posts -->
    <div id="myCarousel2" class="carousel">
        <div class="carousel-inner2">

            <?php $loop = new WP_Query( array( 'post_type' => 'testimonial' ) ); ?>
            <div class="item active" data-title=""><!-- the first div needs a class of active, but the others do not -->
                <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
                    <div class="slide-copy"><?php the_content(); ?></div>
                    <!-- need to display a custom field or two here -->
                <?php endwhile; ?>
          </div>
        </div>
      </div><!-- end myCarousel -->

Here is my second attempt. I got this to work beautifully, except for displaying the custom field values. Any suggestions? It looks like the syntax is correct… Am I missing something basic here? 

<?php $the_query = new WP_Query(array(
'post_type' => 'testimonial', 
'posts_per_page' => 1 
));
while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="item active" data-title="">
    <div class="slide-copy">
        <?php the_content();?>
        <span class="byline"><?php echo get_post_meta($post->ID, 'authorinfo', true); ?></span>
    </div>
</div>
<?php endwhile; wp_reset_postdata(); ?>
<?php $the_query = new WP_Query(array(
'post_type' => 'testimonial', 
'posts_per_page' => 5, 
'offset' => 1 
));
while ( $the_query->have_posts() ) : $the_query->the_post(); ?>
<div class="item" data-title="">
    <div class="slide-copy">
    <?php the_content();?>
    <span class="byline"><?php echo get_post_meta($post->ID, 'authorinfo', true); ?></span>
    </div>
</div>
Post Views: 1

Related posts

Leave a Reply

4 comments

  1. I’ve found that for things like this, get_posts is easier.

    <?php
    // Set up your arguments array to include your post type,
    // order, posts per page, etc.

    $args = array(
        'post_type' => 'testimonial',
        'posts_per_page' => 3,
        'orderby' => 'date',
        'order' => 'DESC'
    );

    // Get the posts
    $testimonials = get_posts($args);

    // Loop through all of the results
    foreach ($testimonials as $testimonial)
    {
        // Since we're doing this outside the loop,
        // Build the apply the filters to the post's content

        $content = $testimonial->post_content;
        $content = str_replace(']]>', ']]&gt;', $content);
        $content = apply_filters('the_content', $content);

        // Build out the carousel item
?>
        <div class="item-active">
            <?php echo get_post_thumbnail($testimonial->id); ?>
            <div class="carousel-caption">
                <h4><?php echo $testimonial->post_title; ?></h4>
                <?php echo $content; ?>
            </div>
        </div>
<?php
    }
?>

    This has worked for me so many times that it’s become my go-to method for all of my carousels, jQuery or Twitter Bootstrap.

    I really hope this helps.

    Codex Function Reference for get_posts

  2. Read “Multiple Loops in Action at codex page” i think you´ll have your answer there…at least i had mine : http://codex.wordpress.org/The_Loop

    I did use one “featured” category. And the query was made by “Multiple loops in Action”. First loop with just one post with the featured category to put the bootstrap carousel class active. Then the other loop put the other categories less the first. 

      <div id="myCarousel" class="carousel slide">
  <!-- Carousel items -->
   <div class="carousel-inner">
    <?php 
      $my_query = new WP_Query('category_name=featured&posts_per_page=1');
      while ($my_query->have_posts()) : $my_query->the_post();
      $do_not_duplicate = $post->ID;?>
       <!-- The 1st Loop... -->
       <div class="active item well-blue">
         <div class="offset1">              
         <h3><?php the_title(); ?></h3>
         <p class="lead"><?php $excerpt = strip_tags(get_the_excerpt()); echo $excerpt; ?></p>
         <a href="<?php the_permalink() ?>" class="btn" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>">Read more...</a>
       </div> 
     </div>
    <?php endwhile;
      // The 2nd Loop limits the query to 2 more posts...
    $limit_query = new WP_Query('posts_per_page=2');
    if($limit_query->have_posts()) : while ($limit_query->have_posts()) : $limit_query->the_post(); 
    if( $post->ID == $do_not_duplicate ) continue; ?>
    <!-- The 2nd Loop same data as 1st loop -->
    <?php endwhile; endif;  wp_reset_query(); ?>
      </div>
      <!-- Carousel nav -->
      <a class="carousel-control left" href="#myCarousel" data-slide="prev">&lsaquo;</a>
      <a class="carousel-control right" href="#myCarousel" data-slide="next">&rsaquo;</a>
  </div>

    Hope it helped.

  3. It’s not entirely clear what you are asking, you may want to put some actual questions in your post.

    I think one of the things you want is to know how to have WP_Query select a specific number of posts, by default WP_Query is designed for paginating through all posts but you don’t have to use the pagination. But to tell WP_Query to only select N number of posts for the “first page” you can use the showposts parameter.

    For meta values you probably want get_post_meta(), but if you are looking to use meta values in your WP_Query you’ll need meta_query.

    CSS offers a :first-child pseudo-selector to cover the first element in a container. Otherwise, while this probably isn’t the place for it, you can just set up a count variable outside the loop and do something like if ($count++ == 0) $class = 'active'; inside.

  4. You need to write a conditional statement to have the active class loop through the posts this is the technique that I used along with custom post types.

    `

                    <!-- 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>

    `