Special Archive Listing Page Theme

I am working on a wordpress template that needs a ‘special’ category listing page.

First of all, the page kinda needs to look like this: Image.

When you click on one of the thumbnails, the thumbnail’s post will appear beneath the line of thumbnails from which the post’s thumbnail is from (I hope you get what I mean, but don’t worry for the sake of demonstration, I will link a fiddle at the end). In a nutshell, this is how it should look when a thumbnail is clicked: Image.

After a very long HTML/CSS/Javascript investigation, the following is the HTML markup that I need to get from The WordPress Loop:

`<div id=”main”>

<!– Line number 1 –>
<div class=”article-thumbnail” data-target=”article-1″ >
<div class=”article-open”><img src=”” /></div>
<div class=”article-close”><img src=”” /></div>
</div>
<div class=”article-thumbnail” data-target=”article-2″ >
<div class=”article-open”><img src=”” /></div>
<div class=”article-close”><img src=”” /></div>
</div>
<div class=”article-thumbnail” data-target=”article-3″ >
<div class=”article-open”><img src=”” /></div>
<div class=”article-close”><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 class=”article-close”><img src=”” /></div>
</div>

<div class=”article-thumbnail” data-target=”article-5″ >
<div class=”article-open”><img src=”” /></div>
<div class=”article-close”><img src=”” /></div>
</div>
<div class=”article-thumbnail” data-target=”article-6″ >
<div class=”article-open”><img src=”” /></div>
<div class=”article-close”><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>`

Therefore, I need to load in **The WordPress Loop (codex link in comment if anyone asking what that is)** at a time 3 posts, first their featured image and afterward the entry itself. And that’s where my problem is.

This is what I have so far in my archive.php:

`<div id=”main” class=”eightcol first clearfix” role=”main”>

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>

<div id=”post-ventures-image-<?php the_ID();?>” class=”post-ventures-image”>
<?php ventures_post_thumbnail( ‘hnp-thumb-ventures-180’ ); ?>
</div>

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

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<article id=”post-<?php the_ID(); ?>” <?php post_class(‘clearfix’); ?> role=”article”>
<span class=”clearfix”></span>
<header class=”article-header”>

<div class=”ventures-close clearfix”>
<a class=”ventures-close-button” href=”#” title=”Close”></a>
</div>
<h3 class=”h2″><?php the_title(); ?></h3>

</header> <!– end article header –>

<section class=”entry-content clearfix”>
<?php the_content(); ?>
</section> <!– end article section –>

<footer class=”article-footer”>

</footer> <!– end article footer –>

</article> <!– end article –>

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

So far, I have two loops. The first one gets all of the posts featured images, and the second gets posts data (title, content, etc). Basically I need another ‘thing’ to do to get 3 at a time. That’s where I hope, you WordPress people can help me. 🙂

For the sake of demonstration and to understand what I am trying Fiddle: to achieve in WordPress, here’s a link to Fiddle.