Dynamic Tabs in Bricks

This Pro tutorial provides the steps to show the terms of a taxonomy as tab titles and corresponding posts as tab panes using a Tabs (Nestable) element in Bricks.

When done your Section’s structure should look like this:

Step 1

Edit your Page/template with Bricks.

Copy the Section JSON below and paste.

JSON link

Select the ‘Title – Terms QL’ element and click the query icon.

Set/change the taxonomy to the correct one.

Set the Order to Ascending if you would like the terms to be shown alphabetically if you are showing categories, for example.

Select the ‘Pane – Terms QL’ element and click the query icon.

Make the same changes above.

Select the ‘Posts QL Block’ element and click the query icon.

It should have this code:

return [
	'post_type' => 'event', // change this to your post type
	'posts_per_page' => 100, // a large number
	'no_found_rows' => true,
	'tax_query' => [
		[
			'taxonomy' => 'event-year', // change this to your taxonomy name
			'terms' => [BricksQuery::get_query_for_element_id( 'bmaivs' )->loop_object->term_id],
		]
	],
];

Change the CPT and taxonomy values.

Replace bmaivs with its parent i.e., ‘Pane – Terms QL’ element’s Bricks ID.