0

I'm trying to output a custom type posts with a sticky/featured work in a col-8 (thumbnail) and col-4 (content) then the rests of the posts should be in col-4. So far I have tried the code below but that only output all the posts, sure if I repeat the code and contain the output in col-4 its achievable but I don't think that's the best practice of doing it.

<?php
        $loop = new WP_Query( array( 'post_type' => 'recentproject', 'orderby' => 'rand', 'posts_per_page' => '1') );

        ?>
        <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
        <div class="col-8 columns">
            <?php edit_post_link(); // Always handy to have Edit Post Links available ?>
            <?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
                <?php echo get_the_post_thumbnail(); ?>
            <?php endif; ?>
        </div>

        <div class="col-4 columns">
            <h4 class="project_title"><?php the_title(); ?></h2>
            <?php echo the_content(); ?>
        </div>
    <?php endwhile; ?>
    <div class="clear"></div>
    <div class="row">
        <?php
        $loop = new WP_Query( array( 'post_type' => 'recentproject', 'orderby' => 'rand', 'posts_per_page' => '3') );
        ?>
        <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
            <div class="col-4 columns">
                <h4 class="project_title"><?php the_title(); ?></h4>
                <?php edit_post_link(); // Always handy to have Edit Post Links available ?>
                <?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
                    <?php echo get_the_post_thumbnail(); ?>
                <?php endif; ?>
                <?php echo the_content(); ?>
            </div>
        <?php endwhile; ?>
    </div>

To explain what I intend to do see the image below. enter image description here

0

You need to use the offset paramater in WP_Query e.g.

<?php
        $loop = new WP_Query( array( 'post_type' => 'recentproject', 'orderby' => 'rand', 'posts_per_page' => '1') );
        $counter=0;
        ?>
        <?php while ( $loop->have_posts() ) : $loop->the_post(); $counter++; ?>
        <div class="col-8 columns">
            <?php edit_post_link(); // Always handy to have Edit Post Links available ?>
            <?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
                <?php echo get_the_post_thumbnail(); ?>
            <?php endif; ?>
        </div>

        <div class="col-4 columns">
            <h4 class="project_title"><?php the_title(); ?></h2>
            <?php echo the_content(); ?>
        </div>
    <?php endwhile; ?>
    <div class="clear"></div>
    <div class="row">
        <?php
        $loop = new WP_Query( array( 'post_type' => 'recentproject', 'orderby' => 'rand', 'posts_per_page' => '3', 'offset' => '1' ) );
        ?>
        <?php while ( $loop->have_posts() ) : $loop->the_post(); ?>
            <div class="col-4 columns">
                <h4 class="project_title"><?php the_title(); ?></h4>
                <?php edit_post_link(); // Always handy to have Edit Post Links available ?>
                <?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
                    <?php echo get_the_post_thumbnail(); ?>
                <?php endif; ?>
                <?php echo the_content(); ?>
            </div>
        <?php endwhile; ?>
    </div>

Basically it ignores the first xx posts in the query, so you would use offset => 1 if you want to ignore the first post in your query

I don't think it will work with "rand" order though, is the rand a necessity? Edit: Using count & 1 query

<?php
$loop = new WP_Query( array( 'post_type' => 'recentproject', 'orderby' => 'rand', 'posts_per_page' => '4') );
$count = 1;
while ( $loop->have_posts() ) : $loop->the_post();
 if($count == '1') { ?>
  <div class="col-8 columns">
   <?php edit_post_link(); // Always handy to have Edit Post Links available ?>
   <?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
    <?php echo get_the_post_thumbnail(); ?>   
   <?php endif; ?>
  </div>

  <div class="col-4 columns">
   <h4 class="project_title"><?php the_title(); ?></h4>
    <?php echo the_content(); ?>
  </div>
 <?php } else { ?>

  <div class="col-4 columns">
   <h4 class="project_title"><?php the_title(); ?></h4>
   <?php edit_post_link(); // Always handy to have Edit Post Links available ?>
    <?php if ( has_post_thumbnail()) : // Check if thumbnail exists ?>
     <?php echo get_the_post_thumbnail(); ?>
    <?php endif; ?>
    <?php echo the_content(); ?>
   </div>

  <?php
  }
 $count++;
endwhile;
wp_reset_postdata();
?>

Not tested but should work, basically it counts the posts and changes the HTML code depending on the count number

  • Yeah rand is needed, so it will show different projects when the page is refreshed. Forgot remove counter as I don't think its needed there. What did you mean ignores the first post? did you mean so it won't duplicate whatever is in the large column and output it in the 3 columns? – nCore Jun 1 '14 at 10:00
  • Yes that's what offset does, it ignores the first post from the query e.g. first query displays the first post, the second query skips the post from the first query. I am going to add another answer which will work with rand – Gareth Gillman Jun 1 '14 at 10:10
  • Oh right, yeah so far its not ignoring the first post. Is there a way of doing this without repeating the wp_query? – nCore Jun 1 '14 at 10:15
  • You can using a counter, check if count is equal to 1 and do xx code and do yy if not 1, will add code to my answer – Gareth Gillman Jun 1 '14 at 10:20
  • Oh right I did try using counter but I guess I was doing it wrong, though the answer you posted works but it breaks the 3 columns, it doesn't align horizontally but vertically instead. I tried wrapping it around a row and change the counter number but no luck. – nCore Jun 1 '14 at 10:42

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.