Customizing Category Display in Bricks

Bricks has a post_terms_category dynamic data tag that outputs comma-separated links of categories for the current post.

It also has a Taxonomy element that outputs an unordered list of the linked terms of the specified taxonomy which can be used to show the post’s categories.

What if you want to output only the top-level (not necessarily parent) categories i.e., categories that aren’t child categories?

This Pro tutorial provides two ways to limit the categories to top level ones.

• extend the Taxonomy element as a new element
• create a custom function based on the one in Bricks and using its dynamic data tag

Custom Taxonomy element

Step 1

If the Bricks child theme is not active already, upload and activate it.

Copy/duplicate

/wp-content/themes/bricks/includes/elements/post-taxonomy.php

as

/wp-content/themes/bricks-child/elements/custom-post-taxonomy.php

Step 2

Edit the custom-post-taxonomy.php file.

Change

class Element_Post_Taxonomy extends Element {

to

class Element_Custom_Post_Taxonomy extends Element_Post_Taxonomy {

Element_Custom_Post_Taxonomy is the name we are specifying for the PHP Class.

Change

public $name         = 'post-taxonomy';

to

public $name         = 'custom-post-taxonomy';

Change

return esc_html__( 'Taxonomy', 'bricks' );

to

return esc_html__( 'Custom Taxonomy', 'bricks' );

While this is not necessary, since we are going to be primarily using this custom element for showing categories, replace both instances of post_tag in the file with category.

Locate

$terms = wp_get_post_terms( get_the_ID(), $taxonomy, $args );

Add a parent => 0 argument to the $args array above it like this:

$args     = [
    'fields'  => 'all',
    'orderby' => ! empty( $settings['orderby'] ) ? $settings['orderby'] : 'name',
    'order'   => ! empty( $settings['order'] ) ? $settings['order'] : 'ASC',
    'parent'  => 0,
];

This ensures that only the top-level terms are retrieved from the database.

Step 3

In child theme’s functions.php locate

/**
 * Register custom elements
 */
add_action( 'init', function() {
	$element_files = [
		__DIR__ . '/elements/title.php',
	];

	foreach ( $element_files as $file ) {
		BricksElements::register_element( $file );
	}
}, 11 );

near the beginning and add in the path to your custom element’s PHP file like this:

/**
 * Register custom elements
 */
add_action( 'init', function() {
	$element_files = [
		__DIR__ . '/elements/title.php',
		__DIR__ . '/elements/custom-post-taxonomy.php',
	];

	foreach ( $element_files as $file ) {
		BricksElements::register_element( $file );
	}
}, 11 );

Your new element is now available in the Bricks editor (if you already have it open, reload it).

Add it in the builder and set Taxonomy to Categories (Post).

Custom function

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

function bl_get_post_categories() {
	global $post;

	$taxonomy = 'category';

	$terms = wp_get_post_terms( $post->ID, $taxonomy, [ 'parent'  => 0 ] );

	if ( ! $terms || is_wp_error( $terms ) ) {
		return '';
	}

	// https://academy.bricksbuilder.io/article/filter-bricks-dynamic_data-post_terms_links/
	$has_links = apply_filters( 'bricks/dynamic_data/post_terms_links', true, $post, $taxonomy );

	$output = [];

	foreach ( $terms as $term ) {
		$item = $term->name;

		if ( $has_links ) {
			$url = get_term_link( $term );

			if ( ! empty( $url ) && ! is_wp_error( $url ) ) {
				$item = '<a href="' . esc_url( $url ) . '">' . $item . '</a>';
			}
		}

		$output[] = $item;
	}

	$sep = ', ';

	// https://academy.bricksbuilder.io/article/filter-bricks-dynamic_data-post_terms_separator/
	$sep = apply_filters( 'bricks/dynamic_data/post_terms_separator', $sep, $post, $taxonomy );

	return implode( $sep, $output );
}

Then add a Basic Text element in the builder and change its text to:

Categories: {echo:bl_get_post_categories}

References

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

/wp-content/themes/bricks/includes/integrations/dynamic-data/providers/provider-wp.php