Roots Discourse

Custom Page Template for blog posts

I’ve searched everywhere and can’t find an answer to what I am trying to do. I need the posts page to have a featured post at the top then below it two columns with the next two blog posts then under that the rest of the posts in three columns. I’ve tried doing a new wp_query but it only shows all the posts in descending order and won’t pull them in any other order.

This is the first time I’ve used Sage and am still trying to figure out where everything is. I’ve gone through the Wordpress codex and tried multiple loops and it doesn’t seem to make a difference. I am not using the post page under the Settings -> Reading just the Static Front page. I have a custom page template for the posts.

This loop is adapted from one I used recently. You should be able to just drop it into whatever template you’re using to display your blog posts and it’ll work. It may need a little tweaking based on your needs.

<?php global $wp_the_query; 
	while (have_posts() && $wp_the_query->current_post < 0): the_post(); ?>
		<div class="featured-post">
			<?php the_title(); // ...and whatever else you want to do ?>
		</div>
	<?php endwhile; ?>

	<div class="two-columns">
		<?php while (have_posts() && $wp_the_query->current_post < 2): the_post(); ?>
			<div class="secondary-post">
				<?php the_title(); // ...and whatever else you want to do ?>
			</div>
		<?php endwhile; ?>
	</div>

	<div class="three-columns">
		<?php while (have_posts() && $wp_the_query->current_post >= 2): the_post(); ?>
			<div class="tertiary-post">
				<?php the_title(); // ...and whatever else you want to do ?>
			</div>
		<?php endwhile; ?>
	</div>

Instead of modifying the WordPress Loop, this query just looks at what iteration of that loop you’re on, and then uses the correct section accordingly.

The queries like this are the key:

while (have_posts() && $wp_the_query->current_post < 0)

The integer there (0 in this case) is, basically, the number of posts (minus 1, because when a computer counts the first item is 0) from the beginning of the loop that you want to show here. This particular while loop will “loop” through only a single post–the first one.

while (have_posts() && $wp_the_query->current_post < 2)

This while loop with move through the next two posts. The first while has already “done” the first post, so it’s not available to this loop: It’ll start on post #2.

while (have_posts() && $wp_the_query->current_post >= 2)

And this will move through the remainder.

Ultimately, you should end up with something like this:

<div class="featured-post">
	Title of the Featured Post
</div>

<div class="two-columns">
	<div class="secondary-post">Another Post, A</div>
	<div class="secondary-post">Another Post, B</div>
</div>

<div class="three-columns">
	<div class="tertiary-post">Remainder Post 1</div>
	<div class="tertiary-post">Remainder Post 2</div>
	<div class="tertiary-post">Remainder Post 3</div>
	<div class="tertiary-post">Remainder Post 4</div>
	<div class="tertiary-post">Remainder Post 5</div>
	<div class="tertiary-post">Remainder Post 6</div>
	<div class="tertiary-post">Remainder Post 7</div>
</div>

…Which you can then style into columns however you want.

1 Like