1

I tried to customize my blog page. The first 4 blogs should be designed in one style while the next 4 blogs has a different style. When I applied the css, all the blogs were shown the same way. I was playing with have_posts() and the_post() functions.

<div id="primary" class="content-area dstC6 <?php echo $cols; ?>">
    <main id="main" class="site-main">

    <?php if ( have_posts() ) : ?>

        <div class="blog-layout-grid clearfix">
        <?php
        /* Start the Loop */
        while ( have_posts() ) : the_post();

            get_template_part( 'template-parts/content', get_post_format() );

        endwhile; ?>

        </div>

        <?php

        the_posts_navigation();

    else :

        get_template_part( 'template-parts/content', 'none' );

    endif; ?>

    </main><!-- #main -->
</div><!-- #primary -->

The template-part/content has the following code as below.

<div class="col-md-3 blogPostEach center-block">

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<?php if ( has_post_thumbnail() ) : ?>
<figure class="entry-thumbnail">
    <a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>">
        <?php the_post_thumbnail( 'leto-large-thumb' ); ?>
    </a>
</figure>
<?php endif; ?>

<header class="entry-header">
    <?php if ( !$hide_meta ) : ?>
    <div class="entry-meta">
        <?php leto_show_cats(); ?>
    </div><!-- .entry-meta -->
    <?php endif; ?>
    <?php the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) . '" rel="bookmark">', '</a></h2>' ); ?>
</header><!-- .entry-header -->

<?php if ( $show_excerpt ) : ?>
<div class="entry-content">
    <?php the_excerpt(); ?>
</div>
<?php endif; ?> 
</article>
</div>

Any suggestion on how to apply styles for every 4 blogposts in the code?

0

In the following code you could add a class specifically based on the position in the loop:

<?php
    /* Start the Loop */
    $i = 1;
    $class = 'first-class';
    while ( have_posts() ) : the_post();

        if($i % 4 == 0){
            $class = 'second-class-'.+$i;
        }

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

        get_template_part( 'template-parts/content', get_post_format() );

        echo '</div>'
        $i++;

    endwhile;

?>

This is essentially a wrapper - it does not have to be a div, it could be a span - but it will count through the loop and change the wrapper class based on if the count in the loop is greater than 3 (first 4 posts 0-3). You then base your CSS off the wrapper class for greater specificity.

  • Thank you for the code. I need to apply it in a loop. one class for every post which repeats for every 4 posts in a row. – Sarath Oct 10 '18 at 4:38
  • It's already in the while loop for the posts, but if you change $i = 0 and the check for $i > 4 to the above, where it is then checking if $i is divisible by 4 use the class + $i; not entirely checked, this is a bit on the fly. – Aravona Oct 10 '18 at 7:59

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.