1

I'm about to convert my Bootstrap template to a custom Wordpress theme and have a little issue.

I want to display all of my blog posts. So far, it is working well. But here is the thing: Because of my design preferences I want to change the used styles for the displayed posts after a specific post. So let's say for the first three posts I want to use style A (post displayed in a great box with title and excerpt) and after the third I want to display thw following posts with style B (two per row, smaller box, just image and title, no excerpt).

I am just starting out with WP syntax, so I have no idea how to accomplish this. Any suggestions?

Thanks

EDIT

This is the code I am currently using

<?php
  $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

  $args = array(
    'post-type' => 'post',
    'post-per-page' => 8,
    'paged' => $paged,
  );

  $wp_query = new WP_Query($args);

  if ($wp_query->have_posts()) : while ($wp_query->have_posts()) : $wp_query->the_post();
  ?>
  <article class="single-post">
    <div class="post-thumbnail">
      <a href="<?php the_permalink(); ?>">
        <img src="<?php echo get_template_directory_uri(); ?>/images/example.jpg">
      </a>
    </div>
    <div class="post-content">
      <div class="content-header">
        <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
      </div>
      <div class="content-text">
        <?php the_excerpt(); ?>
      </div>
      <div class="read-more">
        <a href="<?php the_permalink(); ?>">Read More</a>
      </div>
    </div>
  </article>
  <?php endwhile; else: ?>
    <p>Sorry, no posts yet.</p>
  <?php endif; ?>

This will result in a list of my current posts, all the same style. I actually want, as I said, that the style will change after the third post. This looks like the following in my current Bootstrap code:

<article class="single-post">
  // all the stuff above
</article>
<div class="row"> <!-- a new row for smaller post boxes -->
  <div class="col-sm-6"> <!-- first box -->
    <article class="multiple-post">
      // all the stuff here
    </article>
  </div>
  <div class="col-sm-6"> <!-- second box -->
    <article class="multiple-post">
      // all the stuff here
    </article>
  </div>
 </div>

So, I want use article with class single-post for the first 3 or so blog posts and after those, the page should use article with class multiple-post INCLUDING the additional div-row. Otherwise I can not use the exact layout because of how Bootstrap works.

Hope this makes it much more clearly to you.

  • Could you show the code you're currently using for displaying these posts? – Krzysiek Dróżdż Feb 11 at 10:28
  • I edited my original post ;) – Kevin Feb 11 at 14:06
-1

You can just set a variable to count the loop iterations, and then apply different styles or output depending on the value. For example:

$post_index = 1;

/* Start the Loop */
while ( have_posts() ) :
    the_post();

    $post_class = ($post_index > 3 ? 'style-a col-sm-12' : 'style-b col-sm-6');

    echo '<div class="' . $post_class . '">';

    // Both post types use the title
    echo '<h2>' . the_title() . '</h2>';

    if($post_index <= 3) {
        // Style A - Title and Excerpt
        the_excerpt();
    } else {
        // Style B - Title and Image
        the_post_thumbnail('thumbnail');
    }
    echo '</div>';

    $post_index++;

endwhile; // End of the loop.

Untested, but that gives you the general idea.

  • You don’t need to count posts to get index of current post... – Krzysiek Dróżdż Feb 11 at 10:52
  • Thanks for the downvote, you don't need to use a counter but perhaps the OP wants something simple to follow. I'm aware you can use $wp_query->current_post. The answer is still valid. – Alexander Holsgrove Feb 11 at 10:54
  • It’s hard to say if it is - there are no details in the question. You don’t know if he’s using global loop, or not. How is the list loaded, if he uses get_tenplate_part and so on. And still - your answer is a little bit spaghetti code, so from my point of view it isn’t the best one and you shouldn’t code this way... That’s why the downvote. Sorry. – Krzysiek Dróżdż Feb 11 at 11:04
  • By all means, post your own answer and I'd be happy to critique your code. – Alexander Holsgrove Feb 11 at 11:06
  • there is no need to duplicate similar answers - your solution is more or less correct. The quality of that code is my only concern. I’ll be happy to upvote it, if you fix these issues – Krzysiek Dróżdż Feb 11 at 11:10
-1

OK, so here's the code after changes:

<?php
    $paged = (get_query_var('paged')) ? get_query_var('paged') : 1;

    $args = array(
        'post_type' => 'post',
        'posts_per_page' => 8,
        'paged' => $paged,
    );

    $wp_query = new WP_Query( $args );

    if ( $wp_query->have_posts() ) : 
?>

    <?php if ( 1 == $paged ) : // <- remove this if, if the layout should be the same for all pages ?>
    <?php while ( $wp_query->have_posts() && $wp_query->current_post < 3 ) : $wp_query->the_post(); // print first 3 posts ?>
    <article class="single-post">
        <div class="post-thumbnail">
            <a href="<?php the_permalink(); ?>">
                <img src="<?php echo get_template_directory_uri(); ?>/images/example.jpg">
            </a>
        </div>
        <div class="post-content">
            <div class="content-header">
                <h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
            </div>
            <div class="content-text">
                <?php the_excerpt(); ?>
            </div>
            <div class="read-more">
                <a href="<?php the_permalink(); ?>">Read More</a>
            </div>
        </div>
    </article>
    <?php endwhile; ?>
    <?php endif; // <- remove this endif, if the layout should be the same for all pages ?>

    <?php if ( $wp_query->have_posts() ) : // if there were more than 3 posts found ?>
    <div class="row"> <!-- a new row for smaller post boxes -->

        <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); // display smaller posts ?>
        <div class="col-sm-6"> <!-- first box -->
            <article class="multiple-post">
                // all the stuff here
            </article>
        </div>
        <?php endwhile; ?>

    </div><!-- .row -->
    <?php endif; ?>

<?php else : // if no posts found ?>
    <p>Sorry, no posts yet.</p>
<?php endif; ?>

If you'll use this code, then the first 3 posts will be bigger only on first page. If you want to show the same layout on all pages, then you'll have to remove the if statement - I've marked it in comments.

BTW. Using $wp_query variable for your custom query isn't the best idea...

  • Yay, that works almost perfectly. I already have coded a pagination function for my post list. Currently I have 8 posts as test models. On the first page (homepage) the posts are listed as I want them to be. I went with 2 posts in big, 4 in small. On the second page, however, the remaining 2 posts are dublicated, 2 big, 2 small. – Kevin Feb 11 at 16:06
  • @Kevin AFAICS you select 8 posts in your query, so... It's a little bit hard to guess how does your code look like now.... The big posts are printed only when $paged == 1, so if everything's OK with your query, then they should be visible only on first page. – Krzysiek Dróżdż Feb 11 at 16:11
  • The code is exactly how you posted it (while I removed the if-statement that prevents the layout on following pages, cause I want it the same on all pages). On the first page the first two posts are big, the following 4 are small (sums up to 6). On the second page, which you can access via pagination link, the remaining two out of eight posts should be big (which they are), but the code prints those two posts again as their smaller versions, in fact the remaining posts are copied. – Kevin Feb 11 at 16:39
  • OK, you had an error in your query... There are no such params as “post-type” or “post-per-page”. I’ve updated my answer... – Krzysiek Dróżdż Feb 11 at 16:42
  • Lol, edited it but the problem is the same. Copies the remaining two in small boxes still. – Kevin Feb 11 at 16:57

Your Answer

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

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