By Kevin


2019-02-11 10:25:56 8 Comments

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.

2 comments

@Krzysiek Dróżdż 2019-02-11 14:16:25

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...

@Kevin 2019-02-11 16:06:56

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.

@Krzysiek Dróżdż 2019-02-11 16:11:55

@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.

@Kevin 2019-02-11 16:39:33

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.

@Krzysiek Dróżdż 2019-02-11 16:42:41

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...

@Kevin 2019-02-11 16:57:53

Lol, edited it but the problem is the same. Copies the remaining two in small boxes still.

@Krzysiek Dróżdż 2019-02-11 16:58:43

@Kevin so you’re doing something wrong. The query is not rewinded anywhere in that code, so the posts can’t get duplicated.

@Kevin 2019-02-11 17:12:39

I actually c+p your solution and put the html in it for the smaller boxes. So I couldn't have done something wrong if the code in and of itself would be right. But anyway, I added the if-statement which will show the big boxes only on the first page and now it's working. Thanks.

@Alexander Holsgrove 2019-02-11 10:34:20

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.

@Krzysiek Dróżdż 2019-02-11 10:52:00

You don’t need to count posts to get index of current post...

@Alexander Holsgrove 2019-02-11 10:54:50

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.

@Krzysiek Dróżdż 2019-02-11 11:04:21

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.

@Alexander Holsgrove 2019-02-11 11:06:07

By all means, post your own answer and I'd be happy to critique your code.

@Krzysiek Dróżdż 2019-02-11 11:10:27

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

@Alexander Holsgrove 2019-02-11 11:17:26

I don't see where the quality problem is - would you rather I replace the if / else brackets with colons so that it all matches? You can always suggest an edit as that would be easier to see what you mean by spaghetti code :)

@Krzysiek Dróżdż 2019-02-11 11:18:44

I’m on phone right now. I’ll add an edit later today, if I won’t forget 🙈

@Alexander Holsgrove 2019-02-11 14:51:15

You'd just have need to check the paged querystring. I'll write out a new answer later. Also I didn't down-vote your answer - not sure who did.

Related Questions

Sponsored Content

0 Answered Questions

How to display list of most popular posts from custom post type

2 Answered Questions

1 Answered Questions

How to check if there are posts with the same tag

  • 2015-07-18 19:06:01
  • Vandervals
  • 581 View
  • 0 Score
  • 1 Answer
  • Tags:   posts loop tags

3 Answered Questions

[SOLVED] Simple way to style posts of a single category differently in the loop and in single

2 Answered Questions

[SOLVED] Trying to add a class to post links

1 Answered Questions

[SOLVED] How to call custom single post?

2 Answered Questions

[SOLVED] Specific loop in Shortcode

1 Answered Questions

[SOLVED] Style first 3 posts differently with a container, then the rest of the posts

  • 2015-02-10 21:00:55
  • acrane
  • 1461 View
  • 1 Score
  • 1 Answer
  • Tags:   loop

2 Answered Questions

[SOLVED] How do I style the first two posts of a loop

2 Answered Questions

[SOLVED] Using a custom WP_Query with get_template_part loop

Sponsored Content