Question

This is the grid markup that I need to employ (for displaying 5 highlighted posts):

<div id="top-stories" class="row">

  <div class="col-md-5">
    <article><!-- first article content --></article>
  </div>

  <div class="col-md-7">
    <div class="row">

      <div class="col-sm-6 col-md-6">
        <article><!-- (normal) article content --></article>
      </div>

      <div class="col-sm-6 col-md-6">
        <article><!-- (normal) content --></article>
      </div>

      <div class="clearfix visible-sm visible-md visible-lg"></div>

      <div class="col-sm-6 col-md-6">
        <article><!-- (normal) content --></article>
      </div>

      <div class="col-sm-6 col-md-6">
        <article><!-- (normal) content --></article>
      </div>

    </div>
  </div>

</div>

As you can see, the markup around each post is different; which means I need to use an if/elseif/else logic to dynamically show posts in this markup.

This is how I am doing it right now (notice that the posts are in a loop):

<?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); $current_post_count = post_count(); ?>
    <div id="top-stories" class="row">
      <?php if( 0 == $current_post_count ) { ?>

        <div class="col-md-5">
          <article><?php echo $first_article_content; ?></article>
        </div>

      <?php } elseif( 1 == $current_post_count ) { ?>
        <div class="col-md-7">
          <div class="row">

            <div class="col-sm-6 col-md-6">
              <article><?php echo $article_content; ?></article>
            </div>

      <?php } elseif( 2 == $current_post_count ) { ?>

            <div class="col-sm-6 col-md-6">
              <article><?php echo $article_content; ?></article>
            </div>

            <div class="clearfix visible-sm visible-md visible-lg"></div>
      <?php } elseif( 3 == $current_post_count ) { ?>

            <div class="col-sm-6 col-md-6">
              <article><?php echo $article_content; ?></article>
            </div>

      <?php } elseif( 4 == $current_post_count ) { ?>

            <div class="col-sm-6 col-md-6">
              <article><?php echo $article_content; ?></article>
            </div>

          </div>
        </div>
      <?php } ?>
    </div>
  <?php endwhile; ?>
<?php endif; ?>

The problem is, the code isn't very precise. I couldn't figure out a better logic so far. How can I rewrite the dynamic code to make it more optimal and precise?

Was it helpful?

Solution 2

I think this combines the common parts of 2,3,4 best:

<?php switch ($current_post_count) {
case 0: ?>
<div class="col-md-5">
    <article><?php echo $first_article_content; ?></article>
</div>

<?php break;
case 1: ?>
<div class="col-md-7">
    <div class="row">

    <div class="col-sm-6 col-md-6">
    <article><?php echo $article_content; ?></article>
</div>

<?php break;
default: ?>
<div class="col-sm-6 col-md-6">
    <article><?php echo $article_content; ?></article>
</div>
<?php switch ($current_post_count) {
    case 2: ?>
    <div class="clearfix visible-sm visible-md visible-lg"></div>
        <?php break;
    case 4: ?>
        </div>
        </div>
        <?php
        }
} ?>

OTHER TIPS

<?php if ( have_posts() ) : ?>
  <?php while ( have_posts() ) : the_post(); $current_post_count = post_count(); ?>
    <div id="top-stories" class="row">
      <?php switch($current_post_count ): 
      case 0: ?>
        <div class="col-md-5">
          <article><?php echo $first_article_content; ?></article>
        </div>
      <?php break;?>
      <?php case 1: ?>
        <div class="col-md-7">
          <div class="row">
            <div class="col-sm-6 col-md-6">
              <article><?php echo $article_content; ?></article>
            </div>
      <?php break;?>
      <?php case 2: ?>
            <div class="col-sm-6 col-md-6">
              <article><?php echo $article_content; ?></article>
            </div>
            <div class="clearfix visible-sm visible-md visible-lg"></div>
      <?php break;?>
      <?php case 3: ?>
      <?php case 4: ?>
            <div class="col-sm-6 col-md-6">
              <article><?php echo $article_content; ?></article>
            </div>
      <?php break;?>
      <?php endswitch;?>
          </div>
        </div>
    </div>
  <?php endwhile; ?>
<?php endif; ?>
Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top