$conf, $runtime; function_exists('chdir') AND chdir(APP_PATH); $r = 'mysql' == $conf['cache']['type'] ? website_set('runtime', $runtime) : cache_set('runtime', $runtime); } function runtime_truncate() { global $conf; 'mysql' == $conf['cache']['type'] ? website_set('runtime', '') : cache_delete('runtime'); } register_shutdown_function('runtime_save'); ?>loop - Display post list with different styles|Programmer puzzle solving

Programmer puzzle solving

    最新消息：Welcome to the puzzle paradise for programmers! Here, a well-designed puzzle awaits you. From code logic puzzles to algorithmic challenges, each level is closely centered on the programmer's expertise and skills. Whether you're a novice programmer or an experienced tech guru, you'll find your own challenges on this site. In the process of solving puzzles, you can not only exercise your thinking skills, but also deepen your understanding and application of programming knowledge. Come to start this puzzle journey full of wisdom and challenges, with many programmers to compete with each other and show your programming wisdom! Translated with DeepL.com (free version)
    你的位置： HOME>matter>loop - Display post list with different styles

    loop - Display post list with different styles

    matteradmin9PV0评论

    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.

    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.

    • loop
    Share Improve this question edited Feb 11, 2019 at 14:06 Kevin asked Feb 11, 2019 at 10:25 KevinKevin 112 bronze badges 2
    • Could you show the code you're currently using for displaying these posts? – Krzysiek Dróżdż Commented Feb 11, 2019 at 10:28
    • I edited my original post ;) – Kevin Commented Feb 11, 2019 at 14:06
    Add a comment  | 

    2 Answers 2

    Reset to default -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.

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

    Articles related to this article

    Post a comment

    comment list (0)

    1. No comments so far