Search code examples
phpwordpressarchive

Looking to make archive.php display in two columns for Wordpress site


Very new Wordpress apprentice here. Trying to get my archive page to display posts in two columns going like:

Post 1 Post 2

Post 3 Post 4

Here is an example from a figma we were working on: https://ibb.co/N3XwtwD

My question is, what code can I add to my files to allow this? I currently have some bootstrap classes on the html portion I inserted here and it is displaying as one column, so I don't know if those classes will interfere with anything. Here is my archive.php code below:

<?php 

get_header();
?>

<div class="container mt-5 mb-5">
        <p class="font-size"><?php the_archive_title(); ?></p>
        <hr>
    </div>

<div class="container">
<?php 
  while(have_posts()) {

    the_post(); ?>

    <div class="row">

        <div class="col-lg-6">
            <p class="font-size text-center"><a href="<?php the_permalink();?>"><?php the_title();?></a></p>
            <img class="img-fluid mb-3"<?php
                        the_post_thumbnail(); 
                                ?>
            <p class="category-font">Published on <?php the_time('n.j.y');?></p>
            <p>Posted by <?php the_author_posts_link() ?></p>
        </div>
      </div>
<?php }
echo paginate_links();
?>


  </div>

  <?php
  get_footer();
  ?>

First time posting here so apologies if I left anything important out. Really appreciate this place!

Thanks!


Solution

  • You need to create a row every two posts and you have to add <div class="col-lg-6"> two times in a row. check below code.

    <?php get_header(); ?>
    
    <div class="container mt-5 mb-5">
        <p class="font-size"><?php the_archive_title(); ?></p>
        <hr>
    </div>
    
    <div class="container">
        <?php 
        $count = 1;
        while( have_posts() ) { the_post(); 
            if ( $count % 2 == 1){ ?>
                <div class="row">
            <?php } ?>
                <div class="col-lg-6">
                    <p class="font-size text-center"><a href="<?php the_permalink();?>"><?php the_title();?></a></p>
                    <?php the_post_thumbnail(); ?>
                    <p class="category-font">Published on <?php the_time('n.j.y');?></p>
                    <p>Posted by <?php the_author_posts_link() ?></p>
                </div>
            <?php if ( $count % 2 == 0 ){ ?>
                </div>
            <?php } $count++; ?>
        <?php } 
        if ( $count % 2 != 1 ) echo "</div>";
        echo paginate_links(); ?>
    </div>