6

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?

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>

1
  • Are you sure you are using correct meta key and it is filled with value?
    – Rarst
    Mar 1, 2013 at 16:33

4 Answers 4

2

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

3
  • Thank you! That approach makes sense to me. I tried it and got a warning error regarding the apply_filters bit. "Warning: Missing argument 2 for apply_filters(), called in /wp-content/themes/wordpress-bootstrap-master/page-template-testimonials.php on line 36 and defined in /wp-includes/plugin.php on line 134"
    – cindyg
    Nov 9, 2012 at 17:32
  • I have updated my code with something that works, except it is ignoring my code for displaying the custom field. I think the syntax is correct, so I am a little confused. Thank you again for your help.
    – cindyg
    Nov 9, 2012 at 17:47
  • Sorry. I forgot to add which filter you're applying. I went ahead and updated the snippet for you.
    – Alex Lane
    Nov 26, 2012 at 20:52
1

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.

2
  • 3
    Link only answer are discourages. Can you provide more detail please?
    – s_ha_dum
    Feb 1, 2013 at 19:39
  • 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. Hope it helps. Feb 4, 2013 at 12:15
0

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.

8
  • I will rephrase my question to "How do I dynamically call all the custom posts into a Bootstrap carousel, and also display the fields within that loop?" And, "How do I limit the amount of posts that will cycle through the carousel? How do I add that necessary Bootstrap 'active' class to only the first post?" I have updated my code with something that is working, except it is not showing my custom field. Thank you for your help and input!
    – cindyg
    Nov 9, 2012 at 17:51
  • <span class="byline"><?php echo get_post_meta($post->ID, 'authorinfo', true); ?></span> Is this the custom field that's not working?
    – totels
    Nov 9, 2012 at 18:21
  • Correct, doesn't display anything.
    – cindyg
    Nov 9, 2012 at 18:48
  • As per the documentation for get_post_meta you may want to switch to use get_the_ID() instead of $post->ID and see if that helps.
    – totels
    Nov 9, 2012 at 18:55
  • thank you - but I think I am going crazy. nothing is working to make the custom field to show up. i attribute it to my bad syntax habits.... and generally not understanding, well, anything. i tried using get_the_ID() instead but without success. I tried writing it a million different ways, here is one example <?php echo get_the_ID($my_post_object->ID, 'authorinfo', true); ?> which doesn't do anything, and also <?php echo get_the_ID($value, 'authorinfo', true); ?> the latter will display the ID# but not the actual value. Also tried using $key instead of $value - same result.
    – cindyg
    Nov 9, 2012 at 22:43
0

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>

`

Your Answer

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

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