Wordpress Loop Special Html Output

Question

I am trying to get a special wordpress loop html output:

<div id="main">

    <!-- Line number 1 -->
    <div class="article-thumbnail" data-target="article-1" >
        <div class="article-open"><img src="" /></div>
    </div>
    <div class="article-thumbnail" data-target="article-2" >
        <div class="article-open"><img src="" /></div>
    </div>
    <div class="article-thumbnail" data-target="article-3" >
        <div class="article-open"><img src="" /></div>
    </div>

    <div class="container">
        <article id="article-1" class="article-entry">
            <header class="article-header">
                <h2>This is the article 1 text</h2>     
            </header>
            <div class="article-body">
                <p>This is the article 1 body</p>       
            </div>
        </article>
        <article id="article-2" class="article-entry">
            <header class="article-header">
                <h2>This is the article 2 text</h2>     
            </header>
            <div class="article-body">
                <p>This is the article 2 body</p>       
            </div>
        </article>
        <article id="article-3" class="article-entry">
            <header class="article-header">
                <h2>This is the article 3 text</h2>     
            </header>
            <div class="article-body">
                <p>This is the article 3 body</p>       
            </div>
        </article>
    </div>


    <!-- Line number 2 -->
    <div class="article-thumbnail" data-target="article-4" >
        <div class="article-open"><img src="" /></div>
    </div>

    <div class="article-thumbnail" data-target="article-5" >
        <div class="article-open"><img src="" /></div>
    </div>
    <div class="article-thumbnail" data-target="article-6" >
        <div class="article-open"><img src="" /></div>
    </div>
    <div class="container">
        <article id="article-4" class="article-entry">
            <header class="article-header">
                <h2>This is the article 4 text</h2>     
            </header>
            <div class="article-body">
                <p>This is the article 4 body</p>       
            </div>
        </article>
        <article id="article-5" class="article-entry">
            <header class="article-header">
                <h2>This is the article 5 text</h2>     
            </header>
            <div class="article-body">
                <p>This is the article 5 body</p>       
            </div>
        </article>
        <article id="article-6" class="article-entry">
            <header class="article-header">
                <h2>This is the article 6 text</h2>     
            </header>
            <div class="article-body">
                <p>This is the article 6 body</p>       
            </div>
        </article>
    </div>
</div>

Check this fiddle file: http://jsfiddle.net/PkZrZ/5/ to get an idea of what I am trying to achieve.

Basically, what I am trying to get from The Wordpress Loop is 1 line of 3 thumbnails (featured post's images) and beneath them post entry for each of that thumbnail, afterwards another line and so on.

I've managed to achieve something, but to be honest, it is incredibly buggy (once it worked, and afterwards it didn't) and seems wrong. Anyway, here is The Wordpress Loop I have so far:

<?php 
$post_array = array();
$i = 0;
$j = 0;
$index = 0;
$post_total = $wp_query->post_count; // buggy
/*$post_total = get_term_by('name','ventures','category');
$post_total = $post_total->count;*/
// echo $post_total;
if (have_posts()) : while (have_posts()) : the_post();
    $i++;
    // echo $i;
    $post_array[] = get_object_vars($post);
?>
    <div id="post-ventures-image-<?php the_ID();?>" class="post-ventures-image">
        <?php the_post_thumbnail( 'hnp-thumb-ventures-180' ); ?>
    </div>

    <?php if($i%3 == 0 && $post_total >= 3) : ?>
        <?php for($j = 0; $j < 3; $j++) : ?>

            <article id="post-<?php echo $post_array[$index + $j]['ID'];//the_ID(); ?>" <?php post_class('clearfix'); ?> role="article">
                <header class="article-header">
                    <h3 class="h2"><?php echo $post_array[$index + $j]['post_title'];//the_title(); ?></h3>
                </header> <!-- end article header -->
                <section class="entry-content clearfix">
                    <?php echo $post_array[$index + $j]['post_content'];//the_content(); ?>
                </section> <!-- end article section -->
            </article> <!-- end article -->

        <?php endfor; $index = $index + $j; $j = 0; $post_total = $post_total - 3; $i = 0; ?>

    <?php elseif($i%2 == 0 && $post_total == 2 ) : ?>
        <?php for($j = 0; $j < 2; $j++) : ?>

            <article id="post-<?php echo $post_array[$index + $j]['ID'];//the_ID(); ?>" <?php post_class('clearfix'); ?> role="article">
                <header class="article-header">
                    <h3 class="h2"><?php echo $post_array[$index + $j]['post_title'];//the_title(); ?></h3>
                </header> <!-- end article header -->
                <section class="entry-content clearfix">
                    <?php echo $post_array[$index + $j]['post_content'];//the_content(); ?>
                </section> <!-- end article section -->
            </article> <!-- end article -->

        <?php endfor; $index = $index + $j ; $j = 0; $post_total = $post_total - 2; $i = 0; ?>

    <?php elseif($i%1 == 0 && $post_total == 1) : ?>
        <?php for($j = 0; $j < 1; $j++) : ?>

            <article id="post-<?php echo $post_array[$index + $j]['ID'];//the_ID(); ?>" <?php post_class('clearfix'); ?> role="article">
                <header class="article-header">
                    <h3 class="h2"><?php echo $post_array[$index + $j]['post_title'];//the_title(); ?></h3>
                </header> <!-- end article header -->
                <section class="entry-content clearfix">
                    <?php echo $post_array[$index + $j]['post_content'];//the_content(); ?>
                </section> <!-- end article section -->
            </article> <!-- end article -->

        <?php endfor; $index = $index + $j + 1; $j = 0; $i = 0; ?>

    <?php endif;?>
    <?php endwhile; ?>
    <?php endif; ?>

I think it's out of discussion that this the worst improvized coding ever seen. If anyone can write me a quick markup on how to write the loop that would be swell :)

sven · Accepted Answer · 2013-04-12 13:11:21Z

1

Updated:

   $posts = get_posts();
   $first_three = array_chunk($posts, 3);
   $count = 0;
   foreach($first_three as $posts){
      foreach($posts as $post){?>
         <div class="article-thumbnail" data-target="article-1" >
            <div class="article-open"><?php echo $post->post_title; ?></div>
         </div><?php
      }?>
     <div class="container"><?php
     foreach($posts as $post){$count++?>
       <article id="article-<?php echo $count; ?>" class="article-entry">
          <header class="article-header">
              <h2>This is the article <?php echo $count; ?> text</h2>     
          </header>
          <div class="article-body">
              <p>This is the article <?php echo $count; ?> body</p>       
          </div>
      </article><?php
     }?>
     </div><?php
  }

Works perfect for me, just change the markup whatever u need or array.

edited Apr 12, 2013 at 13:11

answered Apr 12, 2013 at 10:13

sven

7855 silver badges14 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Dragos Rizescu Over a year ago

Check the FIDDLE file, it will get you a better idea of what I am trying to achieve.

Dragos Rizescu Over a year ago

I am testing it right now, and for some reason $posts = get_posts(); takes only the first 5 out of 7 posts.

Dragos Rizescu Over a year ago

Found out why: <?php $posts_array = get_posts( $args ); ?> uses this default $args: <?php $args = array( 'posts_per_page' => 5, 'numberposts' => 5, 'offset' => 0, 'category' => '', 'orderby' => 'post_date', 'order' => 'DESC', 'include' => '', 'exclude' => '', 'meta_key' => '', 'meta_value' => '', 'post_type' => 'post', 'post_mime_type' => '', 'post_parent' => '', 'post_status' => 'publish', 'suppress_filters' => true ); ?> I just need to change 'posts_per_page' => 5,

Collectives™ on Stack Overflow

Wordpress Loop Special Html Output

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related