Meta Box Checkbox List Query Type in Bricks

This Pro tutorial provides the steps to add a new query type in Bricks builder for displaying the values of a Checkbox List type of custom field created using Meta Box in a query loop.

Field group:

Location of the field group is a CPT: Project (project).

Field being populated on a project CPT post:

Bricks editor:

After implementing the tutorial, the project entry on the front end:

Note: The actual HTML output i.e., values of a Checkbox list field is not the focus here as it can be done by simply copying the code that Meta Box generates and pasting in a Code element. The point is to see an example of how we can basically loop through items of any array in Bricks in a query loop.

Step 1

Register your CPT (if needed), add the field group with a Checkbox List field as shown above (field ID: services_provided), populate the field while adding/editing your CPT items.

Step 2

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

// Add new query type control called "Services Provided"
add_filter( 'bricks/setup/control_options', function( $control_options ) {
	$control_options['queryTypes']['bl_mb_checkbox_list_services_provided'] = esc_html__( 'Services Provided' );

	return $control_options;
} );

// 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;
	}
}

// Return an array of "Services Provided" Checkbox List field's values for the current post.
add_filter( 'bricks/query/run', function( $results, $query_obj ) {
	if ( $query_obj->object_type !== 'bl_mb_checkbox_list_services_provided' ) {
		return $results;
	}

	return rwmb_meta( 'services_provided' );
}, 10, 2 );

// Function to return the value of the "Services Provided" Checkbox List field for the current loop iteration.
function bl_get_mb_checkbox_list_services_provided_service(): string {
	// check if there is any active query looping (nested queries) and if yes, store the query ID of the most deep query
	$looping_query_id = BricksQuery::is_any_looping();

	// get_query_object_type gets the current query object type (post, term, user or a custom one)
	// if the query ID of the most deep query exists and the current query object type is bl_mb_checkbox_list_services_provided..
	if ( $looping_query_id && BricksQuery::get_query_object_type( $looping_query_id ) === 'bl_mb_checkbox_list_services_provided' ) {
		return BricksQuery::get_loop_object( $looping_query_id );
	}

	return '';
}

Step 3

Create and edit the Bricks template that applies to single posts of your post type.

Add a Section and inside its Container, a “Services Provided” Heading.

Add a Dynamic data condition like this:

{mb_project_services_provided}

This will ensure that the Section gets output only if the current post has this field populated.

Add a Container below the Heading. This is going to be the parent of the query loop element. You may want to change the HTML tag to ul.

Add a Div inside the Container. Change HTML tag to li.

Enable query loop.

Select “Services Provided” from the Type dropdown.

Add a Code element inside the Div.

<?php

echo bl_get_mb_checkbox_list_services_provided_service();

?>

Tick “Execute Code”.

Tick “Render without wrapper”.

It is also possible to use a Basic Text element instead of the Code element to display the current iteration’s value in which case the text would be:

{echo:bl_get_mb_checkbox_list_services_provided_service}