Looping Through a Cloneable Meta Box Sub Field in Bricks

This Pro tutorial shows how a custom query type can be set up in Bricks to render YouTube videos (via the built-in Video element) whose IDs are taken from value of a cloneable sub field of a group field.

We shall first loop through the group field (functionality built in Bricks) and inside that, loop through the sub-field (made possible via custom query type) i.e., make nested query loops.

Scenario:

CPT: course

Meta Box field group:

events field being populated on a course post:

Structure of single course template:

Output on the frontend:

We shall ensure that if the video_id sub field is empty, the entire videos Section does not get rendered.

Step 1

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

/* Add a new "Event Videos" query type */
add_filter( 'bricks/setup/control_options', function( $control_options ) {
	// new option in the dropdown
	$control_options['queryTypes']['bl_event_videos'] = esc_html__( 'Event Videos' );

	return $control_options;
} );

/* Run new query if option is selected */
add_filter( 'bricks/query/run', function( $results, $query_obj ) {
	if ( $query_obj->object_type !== 'bl_event_videos' ) {
		return $results;
	}
	
	// if option is selected, run the specified query function
	if ( $query_obj->object_type === 'bl_event_videos' ) {
		$results = bl_run_new_query_20230323();
	}
	
	return $results;
}, 10, 2 );

/* Return a custom array */
function bl_run_new_query_20230323() {
	// avoid Undefined Function Error when Meta Box is not active.
	if ( ! function_exists( 'rwmb_meta' ) ) {
		function rwmb_meta( $key, $args = '', $post_id = null ) {
			return false;
		}
	}

	$group = rwmb_meta( 'events' );

	return $group[ 'video_id' ] ?? [];
}

/* Function to get the looping object */
function bl_get_looping_object() {
	return BricksQuery::get_loop_object();
}

/* Function to get the count of the new query */
function get_count_new_query_20230323() {
	return count( bl_run_new_query_20230323() );
}

Replace Meta Box field ID (events) and the cloneable sub field ID (video_id) with yours. And optionally, the “Event Videos” query type label as needed.

Step 2

Edit the course CPT single template with Bricks.

Add a Section having Post Title and Post Content.

Copy the JSON of Section from our test site from here and paste it.

If the Dynamic data condition on the Section doesn’t come through, add it like this:

{echo:get_count_new_query_20230323}