Split Wordpress Latest Posts in Multiple Columns and Rows with one single loop

[mumford1]

Hi

I have this layout

And I have created a news template, but I need to get the posts to display like my example where the first bootstrap row displays 3 posts then beneath that it displays 4 posts.

Is this possible, I cant seem to find the relevant information for me to achieve this.

Really hoping someone can point me in the right direction, on how I would code my template for this layout.

Many Thanks

[Gandalf]

Just to clarify… you are using Wordpress and Bootstrap?

[mumford1]

Hi

Yes that is right.

[mumford1]

Yes I added Bootstrap to the site trying to get the blog posts layout, but I don’t have to use this.

[raddevon]

You should be able to achieve this layout with Flexbox.

Make the widths of your first 3 elements inside the post container calc(100% / 3). Make the other widths 25%. Allow your flexbox container to wrap flex items.

Here’s what that might look like:

.container {
  display: flex;
  flex-wrap: wrap;
}

.container > div {
  box-sizing: border-box;
  flex: 0 0 calc(25% - 20px); /* -20px allows for margins */
  margin: 10px;
  padding: 10px;
}

.container > div:nth-child(-n+3) {
  flex: 0 0 calc(100% / 3 - 20px);
}

[mumford1]

Hi

Thanks for your response, it is more the functionality I am after, to display posts like the layout I mentioned.

I already have this basic code below from me testing things out, but I need the ability to split the posts into two rows, one row with 3 columns and the other row with 4 columns, all displaying posts.

<div class="container-fluid">
	<div class="row">
		<?php
		$temp = $wp_query; $wp_query= null;
		$wp_query = new WP_Query(); $wp_query->query('posts_per_page=7' . '&paged='.$paged);
		while ($wp_query->have_posts()) : $wp_query->the_post(); ?>
		<div class="col-md-4">
			<?php the_post_thumbnail(', '); ?>
				<div class="row">
					<div class="col-md-6">
					<h5><?php the_category(', '); ?></h5>
				</div>
				<div class="col-md-6">
					<h5>
						<?php the_time('jS M Y'); ?>
					</h5>
				</div>
	</div>
			<h3><a href="<?php the_permalink(); ?>" title="Read more"><?php the_title(); ?></a></h3>
			<p><?php the_excerpt(); ?></p>
		</div>
		<?php endwhile; ?>

	</div>
</div>

[raddevon]

You could probably keep track of which post you’re on with a PHP variable. Increment that variable as the last operation of your loop. If you’re on one of the first 3 items, output the markup for your 3-column layout. If not, output the markup for your 4-column layout.

[mumford1]

Thanks again, but I would not know how to go about this at this stage.

[Mittineague]

The examples in the codex that I looked at seem to focus on various query parameters to control various results.
I would be inclined to put together a child function, but there needs to be some way to have more control over this depending on conditions

<div class="col-md-4">
			<?php the_post_thumbnail(', '); ?>
				<div class="row">
					<div class="col-md-6">
					<h5><?php the_category(', '); ?></h5>
				</div>
				<div class="col-md-6">
					<h5>
						<?php the_time('jS M Y'); ?>
					</h5>
				</div>
	</div>
			<h3><a href="<?php the_permalink(); ?>" title="Read more"><?php the_title(); ?></a></h3>
			<p><?php the_excerpt(); ?></p>
		</div>

In other words after the beginning of the while loop, and before its end, there needs to be an “if some condition, do this, else do this” or most likely less optimally, separate queries outside of the while.

[mumford1]

Hi

The code example I posted was just to show what I have to create the column layout, I don’t have to use this its just an example using Bootstrap.