Question 165361 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can WordPress site’s archive.php be displayed in two columns?

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!

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    Please replace with the below code that helps you.

    <?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 
$counterval = 0;
  while(have_posts()) {
    the_post(); 

    $counterval++;
    if($counterval % 2 != 0)
    { ?>
        <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 $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full');
            if(!empty($featured_img_url)){ ?>
                <img class="img-fluid mb-3" src="<?php echo esc_url($featured_img_url); ?>" />
            <?php } ?>            
            <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($counterval % 2 == 0)
    { ?>
    </div>
    <?php } ?>
    
<?php } ?>

<?php echo paginate_links();
?>


  </div>

  <?php
  get_footer();
  ?>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search