0

I am new to wordpress development, I am leaning how to make a theme from scratch. I don't want to use any plugin to achieve this.

How to create first post/ fifth post/ ninth post full width, rest in three columns and so on.

I tried this but first post is not repeating

    <?php get_header() ?>



<div class="container-fluid">
    <div class="row">
        <?php $i = 0; while ( have_posts() ) : the_post();  ?>
        <?php if ($i++ == 0) : ?>
        <div class="col-sm-12 blog">
            <div class="row">
                <div class="col-sm-8 p-0">
                    <?php the_post_thumbnail()?>
                </div>

                <div class="col-sm-4 align-self-center">
                    <div><h3><?php the_title()?></h3></div>
                    <div><?php the_excerpt()?></div>
                </div>
            </div>
        </div>
        <?php else: ?>
        <div class="col-sm-4 blog py-3">
            <?php the_post_thumbnail()?>
            <div><h3><?php the_title()?></h3></div>
            <div><?php the_excerpt()?></div>
        </div>
        <?php endif; ?>
        <?php endwhile ?>
    </div>
</div>
 <?php get_footer() ?>

enter image description here

1
<?php get_header() ?>
<div class="container-fluid">
    <div class="row">
        <?php $i = 0; while ( have_posts() ) : the_post();  ?>
        <?php if ($i == 0 || $i % 4 == 0) : ?>
        <div class="col-sm-12 blog">
            <div class="row">
                <div class="col-sm-8 p-0">
                    <?php the_post_thumbnail()?>
                </div>

                <div class="col-sm-4 align-self-center">
                    <div><h3><?php the_title()?></h3></div>
                    <div><?php the_excerpt()?></div>
                </div>
            </div>
        </div>
        <?php else: ?>
        <div class="col-sm-4 blog py-3">
            <?php the_post_thumbnail()?>
            <div><h3><?php the_title()?></h3></div>
            <div><?php the_excerpt()?></div>
        </div>
        <?php endif; ?>
        <?php $i++; endwhile ?>
    </div>
</div>
<?php get_footer() ?>

worked, changed <?php if ($i++ == 0) : ?> to <?php if ($i == 0 || $i % 4 == 0) : ?>, can be adjusted as per the layout and number of posts.

| improve this answer | |
0

You can try and use PHP Modulo as described here.

<?php if ( have_posts() ) : ?>
<?php /* Start the Loop */ ?>
<?php $i = 0; while ( have_posts() ) : the_post();  ?>
<?php if ($i == 0 || $i % 4 == 0) : ?>
<?php $i++; ?>
<div class="col-sm-6">
    <?php the_excerpt() ?>
</div>

<?php else: ?>
<?php $i++; ?>
<div class="col-sm-12">
      <?php the_excerpt() ?>
</div>


<?php endif; ?>
<?php endwhile; ?>
| improve this answer | |
  • can we do this with bootstrap 4 classes? or by php codes in index.php, I have updated my question. Thanks. – Ricky Mar 5 at 12:30
  • @Ricky edited my answer! – KiwisTasteGood Mar 5 at 12:40
  • I have attached screenshot, I tried your code which gave me error :( @KiwisTasteGood – Ricky Mar 5 at 15:25
  • @Ricky glad you got it working! Hope I helped a little! :) – KiwisTasteGood Mar 6 at 11:07
  • thanks, ya it helped – Ricky Mar 9 at 9:04

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.