This is the standard HTML code I have and I’m trying to merge it into a WordPress loop that basically displays posts in two different ways. I’m using more fields plugin for the user to choose one of two ways of displaying the post. 1) If they choose Large, the post gets wrapped with the div class ‘large link’ 2) If the user chooses ‘Small’, a div with the class ‘groupOflinks’ is created and the post is wrapped with a div class ‘smallLink’. Only 4 ‘smallLink’ div’s/posts can be held within one ‘groupOflinks’ div. If there are more than 4 Small posts a new ‘groupOflinks’ div is created and the process is repeated.
Here is the HTML code i’m trying to merge (heavily commented):
<!-- Display one post within this container only & if there are more posts that have been chosen as Large, wrap them in the 'largeLink' div -->
<div class="largeLink">
<!-- post 1 content here -->
</div>
<div class="largeLink">
<!-- post 2 content here -->
</div>
<!-- If a post is defined as small within the admin panel (using more fields plugin)
display them within this 'groupoflinks' container
If 4 posts are already in this 'groupoflinks' container create a new container and populate with another 4 posts
Repeat -->
<div class="groupOfLinks">
<!-- This is a container that holds 4 posts only & if there are more posts that have been assigned as 'Small' create a new 'groupOflinks' container and populate with the next 4 -->
<div class="smallLink">
<!-- Post 4 content here -->
</div>
<div class="smallLink">
<!-- Post 5 content here -->
</div>
<div class="smallLink">
<!-- Post 6 content here -->
</div>
<div class="smallLink">
<!-- Post 7 content here -->
</div>
</div>
<div class="largeLink">
<!-- post 3 content here -->
</div>
<div class="largeLink">
<!-- post 8 content here -->
</div>
This is my WP loop so far that doesn’t quite work:
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<?php // Take the value defined with the 'Layout' field and change style accordingly
$layouttype = get_post_meta($post->ID, 'layout-type', true) ?>
<?php if ($layouttype == 'Small') { ?>
<div class="groupOfLinks">
<!--LOOP STYLE 1 GOES HERE-->
<?php $temp_query = $wp_query; // store it
$args = array(
'paged' => $paged, // paginates
'post_type'=>'post',
'order' => 'DESC'
);
$wp_query = new WP_Query($args);
while ($wp_query->have_posts()) : $wp_query->the_post();?>
<div class="smallLink">
<!-- Post content here -->
<h1><?php the_title(); ?></h1>
<?php the_content(''); ?>
</div>
<?php if (isset($wp_query)) {$wp_query = $temp_query;} // restore loop
endwhile; ?>
</div>
<?php } else { ?>
<!--LOOP STYLE 2 GOES HERE-->
<div class="largeLink">
<!-- post 1 content here -->
<h1><?php the_title(); ?></h1>
<?php the_content(''); ?>
</div>
<?php } ?>
<?php endwhile; ?>
<div>
<div><?php next_posts_link('« Older Entries') ?></div>
<div><?php previous_posts_link('Newer Entries »') ?></div>
</div>
<?php else : ?>
<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isnât here.</p>
<?php endif; ?>
I have a meeting in a few minutes, so for the sake of time, I’m gonna to just start you in the right direction, you may have to make a few tweaks since I wrote this in a hurry. Let’s start with your loop and make a few quick changes.