Pulse Of The Blogosphere

Posts Grouped by ACF or Meta Box Select Field Value as Tabs in Bricks

—

por

admin
en

Updated on 9 Mar 2023: Added Meta Box specific instructions.

This Pro tutorial provides the steps to show labels of an Advanced Custom Fields’ Select-type of field as the tab titles and a list of all posts that have the corresponding meta value as the tab content when using Bricks‘ Tabs (Nestable) element.

Whilst it is possible to manually set the tab titles and multiple query loops in each tab content, the benefit of this method is that it is dynamic and needs no maintenance. The site admin or client can at any time simply change the choices of the select field, the order of the choices and the tabs will automatically reflect these changes.

In this example we are going to be dealing with a task custom post type that has a task_status custom field.

We shall

  • add a new “Task Status” type control to query loop options – in the dropdown.
  • create a function that should run when the above query type is selected in which we
    • get the ID of the latest task post
    • get all the task statuses for any post of the task post type
    • create and return an array having key and label named keys
  • create another function for returning the label or the key for the current task status being looped through for use with Bricks dynamic data tags.
  • apply our custom query to Tab menu > Div and call the second function that returns the choices’ labels for the tab titles.
  • apply our custom query to Content > Pane and inside that, a Block with a Posts query to pull all the entries of the task CPT where task_status meta equals the choice key.

Step 1

Create your custom field group having a Select type of field with choices having value : label pairs and attach it to your post type.

Make sure that Return Format is set to Both (Array).

Step 2

Create/edit your post/CPT items and populate the custom field for each.

Step 3

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

/* Add new "Task Status" type control to query loop options - in the dropdown */
add_filter( 'bricks/setup/control_options', function( $control_options ) {
	$control_options['queryTypes']['task_status'] = esc_html__( 'Task Status' );

	return $control_options;
} );

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

/* Form an array with key being the custom field's key and value being the custom field's value and return it */
function bl_run_new_query_20230307() {
	// get the ID of the latest task post
	$latest_task = get_posts( [
		'post_type' => 'task',
		'posts_per_page' => 1,
		'no_found_rows' => true,
		'orderby' => 'date',
		'order' => 'DESC',
		'fields' => 'ids'
	] );

	// get all the task statuses for any post of the task post type
	$task_status = get_field_object( 'task_status', $latest_task[0] );
	// Ex: https://d.pr/i/eBC0UO

	if ( ! $task_status || ! isset( $task_status['choices'] ) ) {
		return [];
	}

	// populate the looping result
	$results = [];

	// $task_status['choices']
	// https://d.pr/i/gyKNr9
	
	foreach( $task_status['choices'] as $key => $label ) {
		$results[] = [
			'key' => $key,
			'label' => $label
		];
	}

	return $results;
	// Ex.: https://d.pr/i/1ZRmpt
}

// Function to get the task status label (default) or value (if passed in 'key') of the current looping query
function get_looping_status( $what = 'label' ) {
	$status = '';
	
	$looping_query_id = BricksQuery::is_any_looping();
	
	if ( $looping_query_id && BricksQuery::get_query_object_type( $looping_query_id ) === 'task_status' ) {
		$object = BricksQuery::get_loop_object( $looping_query_id );
		$status = isset( $object[ $what ] ) ? $object[ $what ] : '';
	}
	
	return $status;
}

Step 4

Edit any Page or Template with Bricks.

Copy all the JSON from here and paste it.

You should now have a Section with structure like this:

Change the query type from Tasks to your desired post type for the Block inside Pane.

That’s it! Check it on the front end.

Meta Box

Screenshot of the field group:

For users of Meta Box: Follow the steps but replace all the code in Step 3 with the following:

/* Add new "Task Status" type control to query loop options - in the dropdown */
add_filter( 'bricks/setup/control_options', function( $control_options ) {
	$control_options['queryTypes']['task_status'] = esc_html__( 'Task Status' );

	return $control_options;
} );

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

/* Form an array with key being the custom field's key and value being the custom field's value and return it */
function bl_run_new_query_20230309() {
	// get the ID of the latest task post
	$latest_task = get_posts( [
		'post_type' => 'task',
		'posts_per_page' => 1,
		'no_found_rows' => true,
		'orderby' => 'date',
		'order' => 'DESC',
		'fields' => 'ids'
	] );

	// get all the task status field options/choices for any post of the task post type
	$task_status = rwmb_get_field_settings( 'task_status', '', $latest_task[0] );
	// https://d.pr/i/KLqODA

	if ( ! $task_status || ! isset( $task_status['options'] ) ) {
		return [];
	}

	// populate the looping result
	$results = [];

	// $task_status['options']
	// https://d.pr/i/8Ufc1Z
	
	foreach( $task_status['options'] as $key => $label ) {
		$results[] = [
			'key' => $key,
			'label' => $label
		];
	}

	return $results;
	// Ex.: https://d.pr/i/PX2ONw
}

// Function to get the task status label (default) or value (if passed in as 'key') of the current looping query
function get_looping_status( $what = 'label' ) {
	$status = '';
	
	$looping_query_id = BricksQuery::is_any_looping();
	
	if ( $looping_query_id && BricksQuery::get_query_object_type( $looping_query_id ) === 'task_status' ) {
		$object = BricksQuery::get_loop_object( $looping_query_id );

		$status = isset( $object[ $what ] ) ? $object[ $what ] : '';
	}
	
	return $status;
}

References

https://www.advancedcustomfields.com/resources/select/#display-value-and-label

https://www.advancedcustomfields.com/resources/get_field_object/

Thanks to Jenn Lee for helping me with the code and logic.