Feature Post on Posts page in Bricks – Pulse Of The Blogosphere

This Pro tutorial explores different options for showing the top-most or latest post as a wide feature post with the rest in a grid on the Posts page (blog posts index) when using Bricks.

Page 1:

A paginated page like Page 2:

Note: This can also be applied to other archive pages like category archives, and search result pages.

Step 1

Create a Page titled say, “Blog” and set it as the Posts page at Settings → Reading.

Edit it with Bricks.

Step 2

In the next step, you are going to copy the JSON code of a Section having a fully-built query loop that outputs the posts grid.

The size of featured images has been set to “Bricks Large” (1200 x 675 cropped) which Bricks adds when Bricks → Settings → Generate custom image sizes is checked. You might want to do that. If you’d like to use a different image size, make the change after pasting the Section in.

Copy this JSON and paste it in your Posts page template.

Save the template and check on the front end. You should see a grid of the blog posts with pagination at the bottom.

Now let’s add CSS to make the first post card span from the first column to the last.

Select the Container which is the parent of Block (on which query loop is active).

Go to STYLE → CSS → Custom CSS and add

root :first-child {
  grid-column: 1 / -1;
}

Check the front-end again and if you see that the last grid row is uneven i.e., it does not have three posts like the row above, adjust the Posts per page setting at Settings → Reading.

For most users, this may be sufficient and the steps below are not needed.

No feature post on paginated pages

With the setup so far the wide feature post at the top will appear not just on the first page, but also on the paginated pages like at example.com/blog/page/2/.

If you’d like the paginated posts to show the regular grid w/o making the top post a feature post, read along.

Change the CSS code from the previous step to:

body:not(.paged) root :first-child {
  grid-column: 1 / -1;
}

Change the Posts per page setting at Settings → Reading to a number that is multiple of 3 like 6 or 9 i.e., the number of posts that should appear per page on the paginated pages. Let’s go with 6 in this example.

Check any paginated page like say, example.com/blog/page/2/ and it should be fine.

But now we have a problem. The first page has an uneven grid with only 2 items in the last row.

To tackle this we shall

add a custom parameter called mainquery to our query so it can be targeted via code
use pre_get_posts action hook to set posts per page for the first page and the necessary offset for paginated pages.

Add the following in child theme‘s functions.php or a code snippets plugin:

// Add a custom parameter to the specified query.
add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ) {
	if ( $element_id === 'rlxmqi' ) {
		$query_vars['mainquery'] = 'yes';
	}
	
	return $query_vars;
}, 10, 3 );

// Set posts per page for the first page of the blog posts index and the necessary offset for paginated pages.
add_action( 'pre_get_posts', function( $query ) {
	// make sure this is the right query
	if ( ! $query->is_home() ) {
		return;
	}
	
	// this does not work:
	// if ( ! $query->is_main_query() ) {
	// 	return;
	// }
	// so had to do this:
	if ( $query->get( 'mainquery' ) !== 'yes' ) {
		return;
	}

	// number of posts to be shown on the first page
	// posts per page WordPress setting value + 1
	$first_page_ppp = 7;

	// posts per page WordPress setting value
	$ppp = get_option( 'posts_per_page' );

	// get the current page number. Will be 1 for the first page, 2 for the second page, etc.
	$paged = $query->query_vars[ 'paged' ];

	// detect and handle pagination
	if ( $query->is_paged ) { // pages 2, 3..
		$page_offset = $first_page_ppp + ( ( $paged - 2 ) * $ppp );
		// for page 2, offset = 10
		// for page 3, offset = 20...

		// apply page offset
		$query->set( 'offset', $page_offset );
	} else { // page 1
		$query->set( 'posts_per_page', $first_page_ppp );
	}
} );

// Needed per WP documentation, but everything seems to work even without it. Better add it anyway.
add_filter( 'found_posts', function( $found_posts, $query ) {
	$ppp = get_option( 'posts_per_page' );

	$first_page_ppp = 7;

	if ( $query->is_home() && $query->get( 'mainquery' ) === 'yes' ) {
		return is_paged() ? $found_posts - ( $first_page_ppp - $ppp ) : $found_posts;
	}

	return $found_posts;
}, 10, 2 );

Different layout for the feature post

What if you want to use different elements or elements in different order or perhaps a longer excerpt for the feature post?

We need to add 2 divs inside the query loop element and output these conditionally depending on the post counter.

We are going to remove the Section pasted from the earlier JSON and paste another JSON. If you’ve made any customizations and don’t want to lose them you may want to copy your current Section and paste it in a temp location for backup.

Copy this JSON and paste it.

Check your Posts page on the front end and notice that the feature post shows more words in its excerpt. This is because the excerpt length for it has been set to 55.

Note: The size of the image in the feature post has been set to a custom one which was added via

add_image_size( 'feature-image', 1200, 500, true );

You could select a different image size handle if you want.

References

https://wordpress.stackexchange.com/a/124426

https://codex.wordpress.org/Making_Custom_Queries_using_Offset_and_Pagination