Question

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('&laquo; Older Entries') ?></div>
<div><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>

<?php else : ?>

<h2>Not Found</h2>
<p>Sorry, but you are looking for something that isn’t here.</p>

<?php endif; ?>

Answer 1

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.

<?php
//Set a counter to determine if small post has been used
$small_posts = 0;
if(have_posts()) :
    while(have_posts()): the_post();
    $layouttype = get_post_meta(get_the_ID(), 'layout-type', true);
    if($layouttype == 'Small') :
        if(($small_posts % 4) == 0) :
            $tmp_query = clone $wp_query; ?>//this line was edited
            <div class="groupOfLinks">
                <div class="smallLink">
                    <h1><?php the_title(); ?></h1>
                    <?php the_content(); ?>
                </div>
                <?php $i = 1;
                while(have_posts() && $i <=4) : the_post(); 
                    $layouttype = get_post_meta(get_the_ID(), 'layout-type', true);
                    if($layouttype == 'Small') : ?>
                        <div class="smallLink">
                            <h1><?php the_title(); ?></h1>
                            <?php the_content(); ?>
                        </div>
                        <?php $i++; 
                   endif;
               endwhile; ?>
               </div>
               <?php $wp_query = clone $tmp_query;//this line was edited
        endif;//End counter check
        //Whether we needed to enter the subloop or not, the counter is incremented
        $small_posts++;
    else: //Else for if($layouttype == 'Small') ?>
        <div class="largeLink">
            <h1><?php the_title(); ?></h1>
            <?php the_content(); ?>
        </div>
   <?php endif;
   endwhile; ?>
<div>
    <div><?php next_posts_link('&laquo; Older Entries') ?></div>
    <div><?php previous_posts_link('Newer Entries &raquo;') ?></div>
</div>
<?php else : ?>
    <h2>Not Found</h2>
    <p>Sorry, but you are looking for something that isn’t here.</p>
<?php endif; ?>