Posts Grouped by Years in Bricks

This Pro tutorial provides the steps to output posts that show the most recent year in which the last post was published, then all the posts that were published in that year and continue with rest of the years in descending order in Bricks.

We shall create a custom query type called “Published Years”, apply it on a query loop and place another query loop inside for showing posts that were published in the year of the parent loop iteration.

This solution gives full control to visually build the display of years (headings) and what appears for each post (date, month and linked post title in this example) using Bricks elements.

Step 1

Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:

// Add new "Published Years" query loop type option in the dropdown.
add_filter( 'bricks/setup/control_options', function( $control_options ) {
	$control_options['queryTypes']['published_years'] = esc_html__( 'Published Years' );

	return $control_options;
} );

// Run new query if option selected.
add_filter( 'bricks/query/run', function( $results, $query_obj ) {
	if ( $query_obj->object_type !== 'published_years' ) {
		return $results;
	}
	
	// if option is selected, run our new query
	if ( $query_obj->object_type === 'published_years' ) {
		$results = bl_run_new_query_20230311();
	}
	
	return $results;
}, 10, 2 );

// Form an array of published years and return it.
function bl_run_new_query_20230311() {
	// WP_Query arguments
	$args = [
		'post_type' => [ 'post' ],
		'posts_per_page' => -1,
	];

	// the array to hold the published years, empty to begin with
	$years = [];

	// The Query
	$query = new WP_Query( $args );

	// The Loop
	if ( $query->have_posts() ) {
		while ( $query->have_posts() ) {
			$query->the_post();
		
			// get the current post's published year
			$year = get_the_date( 'Y' );
			
			// if the current post's published year is not in the years array, add it to the array
			if ( ! in_array( $year, $years ) ) {
				$years[] = $year;
			}
		}
	} else {
		// no posts found
	}

	// Restore original Post Data
	wp_reset_postdata();

	return $years;
}

// Function to get the published year of the current looping query.
function bl_get_looping_year() {
	$looping_query_id = BricksQuery::is_any_looping();
	
	if ( $looping_query_id && BricksQuery::get_query_object_type( $looping_query_id ) === 'published_years' ) {
		return BricksQuery::get_loop_object( $looping_query_id );
	}
	
	// return current year in 4 digit format
	return date( 'Y' );
}

Step 2

In your Bricks Page/template, add a Section (JSON code for the Section from our test site can be copied from here). Set Row gap for the Container to 2em.

Add a Block inside the Container. Row gap: 1em.

Toggle Use query loop on.

Click the loop icon and select “Published Years” as the query type.

Add a h3 Heading inside the Block.

Set its text to

{echo:bl_get_looping_year}

This should output all the published years as headings in descending order.

Step 3

Add a Container below the Heading.

Add a Block inside the Container.

Toggle Use query loop on.

Click the loop icon and set Posts per page to -1 to show all the posts in the current year.

Add a Basic Text element inside the Block and set its content to

Now all the posts in the site will be output under each year.

We need to filter these and limit them to only the current year in the loop iteration.

Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:

// Add year query variable for posts in the specified query.
add_filter( 'bricks/posts/query_vars', function( $query_vars, $settings, $element_id ) {
	if ( $element_id === 'owxazg' ) {
		$query_vars['year'] = bl_get_looping_year();
	}
	
	return $query_vars;
}, 10, 3 );

Replace owxazg with the Bricks ID of the inner query loop element.

References

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

https://academy.bricksbuilder.io/article/dynamic-data/