This Pro tutorial provides the steps for showing child categories if the current category has children or posts, if otherwise on category archives when using Bricks.
Step 1
Add an image-type of custom field for setting up an image for the categories.
We are using ACF in this example.
Edit the categories and select/upload an image for each.
Step 2
Create a template named, say, “Category” of type Archive.
Edit it with Bricks.
Apply it to categories.
When we are done, the structure would look something like this:
If you’d like to import the template from our test site instead of building it yourself or for reference, it can be found near the end of this tutorial. You’d still need to add a couple of custom PHP functions mentioned in the steps below.
Add a Section and inside its Container, a h1 Heading having
{term_name}
Add a Basic Text or a Text link element and set its text to “← Parent Category”.
Set its link to be dynamic and
{echo:bl_get_parent_category_url}
We also want to ensure that this element gets output only if the current category has a parent.
Set a dynamic condition like this:
Next, define the custom function bl_get_parent_category_url that we used above.
Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:
<?php
// Function to get parent category's URL on a category archive
function bl_get_parent_category_url(): string {
return get_category_link( get_queried_object()->parent );
}Step 3
Add a(nother) Section for showing the categories.
Set the Section’s Container tag to be ul.
Add a Block inside and set its tag to li.
Enable query loop on the block.
Type: Terms
Taxonomies: Categories (Post)
Add an Image element and set its source to your custom field.
Add a h3 Heading having
{term_name}
Set it to link to the dynamic data of
{term_url}
Define another function to check if current category has at least 1 child category.
Add the following in child theme‘s functions.php (w/o the opening PHP tag) or a code snippets plugin:
<?php
// Function to check if current category has at least 1 child category
function bl_has_child_category(): bool {
$categories = get_categories( [
'parent' => get_queried_object_id(),
'hide_empty' => false,
] );
return count( $categories ) > 0;
}Set a condition on the Section to render it only for parent categories.
{bl_has_child_category}
Step 4
Add a(nother) Section for showing the posts.
Inside the Section’s Container, add a Posts element or set up a query loop.
Leave the query as default.
Set a condition on the Section to render it only for non-parent categories.
