Bootstrap WordPress Carousel Recent Posts

Problem

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.

```

Most Recent Post

'post',
'posts_per_page' => -1,
'orderby' => "date",
'order' => "desc"
);
$posts = get_posts( $args );
?>

');
$incNum++;
?>

'post',
'posts_per_page' => -1,
'orderby' => "date",
'order' => "desc"
);
$posts = get_posts( $args );
?>

">

03 Dec 2014

" rel="bookmark" title="">

John doe

Solution

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.


  Most Recent Post

 'post',
    'posts_per_page'    => -1,
    'orderby'           => "date",
    'order'             => "desc"
  );
  $posts = get_posts( $args );
?>

  
    
    
      " >
    
  
  
   $chunk) :  ?>
    ">
      
         $post ): setup_postdata($post); ?>
          
            
              
                
                
                  
                  
                
              
              
                
                03 Dec 2014
                
                " rel="bookmark" title="">
                    
                
                
                John doe

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 ` to improve readability

Try to use WordPress functions instead of rolling your own. That way plugins can also hook into them

Code Snippets

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

Context

StackExchange Code Review Q#114947, answer score: 2

Revisions (0)

No revisions yet.