Bootstrap WordPress Carousel Recent Posts

Question

This works, but I would like suggestions to improve it. For one I think the get posts shouldn't have to be repeated twice, but it only pulls the first two posts if I don't do it this way.

Also, I think $incNum == 0 ? 'class="active"':'class' can be simplified, but if I take the second part out I get an error.

<div class="section-title">
                    <h1>Most Recent Post</h1>
                </div>  

                    <?php
                    // Get posts (tweak args as needed)
                    $i=0;
                    $incNum = 0;
                    $args = array(
                        'post_type'        => 'post',
                        'posts_per_page'   => -1,
                        'orderby' => "date",
                        'order' => "desc"
                    );
                    $posts = get_posts( $args );
                ?>



                   <div id="recent-post-carousel" class="carousel slide" data-ride="carousel">
                    <ol class="carousel-indicators">
                        <?php foreach (array_chunk($posts, 4, true) as $posts) :  ?>
                        <?php echo( '<li data-target="#recent-post-carousel" data-slide-to="'.$incNum.'"'.($incNum == 0 ? 'class="active"':'class').'></li>'); 
                        $incNum++;
                        ?>

                    <?php endforeach; ?>

                    </ol>
                    <div class="carousel-inner">



                               <?php
                    // Get posts (tweak args as needed)
                    $i=0;
                    $incNum = 0;
                    $args = array(
                        'post_type'        => 'post',
                        'posts_per_page'   => -1,
                        'orderby' => "date",
                        'order' => "desc"
                    );
                    $posts = get_posts( $args );
                ?>





                <?php foreach (array_chunk($posts, 4, true) as $posts) :  ?>
                <div class="item <?php if ($i==0){echo 'active';}?>">            
                    <div class="row">

                        <?php foreach( $posts as $post ) : setup_postdata($post); ?>

                           <div class="col-sm-6 post-fix">
                                    <div class="single-post ">
                                        <div class="pull-left post-image">
                                            <a href="#">
                                                <?php the_post_thumbnail( 'full' );  ?>
                                                <i class="fa fa-angle-right"></i>
                                            </a>
                                        </div>
                                        <div class="pull-right post-details">
                                            <p class="post-date">03 Dec 2014</p>
                                            <p><?php echo $i?></p>

                                            <a href="#"><h5><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>"><?php the_title(); ?></a>
                            </h5></a>
                                            <span>John doe</span>
                                            <p><?php echo substr(get_the_excerpt(), 0,99).' [...]'; ?></p>
                                        </div>
                                    </div>
                                </div>
                        <?php $i++ ?>

                        <?php endforeach; ?>

                    </div>

                        </div>

                <?php endforeach; ?>     

Answer 1

I haven't ran (don't have a WordPress installation handy) or debugged the code, but this should work. Your original code is buggy in a number of ways. The $posts variable is clobbered when you use it as the iterating variable in the foreach loop, which is probably why your code wasn't working as expected.

<div class="section-title">
  <h1>Most Recent Post</h1>
</div>

<?php
  // Use a variable instead of magic number. Consider moving this to a WordPress config instead using get_option
  $chunk_size = 4;
  $args = array(
    'post_type'         => 'post',
    'posts_per_page'    => -1,
    'orderby'           => "date",
    'order'             => "desc"
  );
  $posts = get_posts( $args );
?>

<div id="recent-post-carousel" class="carousel slide" data-ride="carousel">
  <ol class="carousel-indicators">
    <?php // Use a for loop here instead of foreach, since you don't actually need the contents of the array ?>
    <?php for ($i = 0, $l = ceil(count($posts) / $chunk_size); $i < $l; $i++):  ?>
      <li data-target="#recent-post-carousel" data-slide-to="<?php echo $i ?>" <?php echo ($i === 0 ? 'class="active"' : '') ?>></li>
    <?php endfor; ?>
  </ol>
  <div class="carousel-inner">
  <?php foreach (array_chunk($posts, $chunk_size) as $i => $chunk) :  ?>
    <div class="item <?php if ($i === 0){echo 'active';}?>">
      <div class="row">
        <?php foreach( $chunk as $p => $post ): setup_postdata($post); ?>
          <div class="col-sm-6 post-fix">
            <div class="single-post ">
              <div class="pull-left post-image">
                <?php // href here should probably be the_permalink() ?>
                <a href="#">
                  <?php the_post_thumbnail( 'full' );  ?>
                  <i class="fa fa-angle-right"></i>
                </a>
              </div>
              <div class="pull-right post-details">
                <?php // Post date shouldn't be hard coded ?>
                <p class="post-date">03 Dec 2014</p>
                <p><?php echo $i*$chunk_size + $p?></p>
                <h5><a href="<?php the_permalink() ?>" rel="bookmark" title="<?php the_title(); ?>">
                    <?php the_title(); ?></a>
                </h5>
                <?php // Post author shouldn't be hard coded ?>
                <span>John doe</span>
                <?php // Consider using wp_trim_excerpt() instead ?>
                <p><?php echo substr(get_the_excerpt(), 0, 99).' [...]'; ?></p>
              </div>
            </div>
          </div>
        <?php endforeach; ?>
      </div>
    </div>
  <?php endforeach; ?>
  </div>
</div>

A few things to note here:

• Use foreach( $array as $i => $element) instead of keeping track of $i separately.
• Post count is calculated using $i*$chunk_size + $p
• Your HTML was buggy in a few places. I cleaned it up, and left comments in the places where there are probably bugs
• Format your code properly to make it more readable
• Consider using short tags <?= ?> to replace <?php echo ?> to improve readability
• Try to use WordPress functions instead of rolling your own. That way plugins can also hook into them