The Perfect Bricks Page Template

Updated on 5 Feb 2025

I don’t know about you but this is how I want Pages to be rendered when using Bricks:

• When a Page has only WordPress content (Gutenberg blocks), the title and the WP content should show.
• When a Page has only Bricks content, Bricks content should show.
• When a Page has both WordPress and Bricks content, the Page title + WP content AND Bricks content should show.

This tutorial shows how such a (what I consider the) perfect Page template can be set up in Bricks.

First, some sample screenshots.

WP content only

Bricks content only

WP and Bricks content

This one-time setup does not involve a custom fields plugin or constant Page-by-Page maintenance/decision-making.

Step 1

Whitelist has_blocks function by adding the following in the child theme’s functions.php (preferred) or a code snippets plugin:

add_filter( 'bricks/code/echo_function_names', function() {
  return [
    'has_blocks',
  ];
} );

You should also add any other functions (native or custom) being used in your Bricks instance in addition to has_blocks. This can be checked at Bricks → Settings → Custom code by clicking the Code review button.

More info on whitelisting can be found here.

Step 2

(JSON export near the end)

Create a Bricks template named say, “Page” of type Single.

Edit it with Bricks.

Set a condition to make it apply to all Pages.

Set up the structure like this:

Add a class of wp-content-section to ‘WP Content Section’ at STYLE → CSS → CSS classes.

Data source for the Post content element inside the “WP Content Section” should be the default i.e., WordPress.

The “Bricks Content” is another Post content element whose Data source is set to Bricks.

Apply this Dynamic data condition on WP Content Section:

{echo:has_blocks}

That’s it!

JSON Export of the Page (can be imported on the Bricks template screen)

Note: There is no need to apply a condition on the ‘Post content’ element whose source is set to Bricks. It will automatically only be output if there is Bricks content.

Step 3

Bricks 1.12 began showing outer Post Content elements in the builder (reference). This means when editing Pages that have only Bricks content, the unwanted ‘WP Content Section’ will now show up in the builder.

The reason for adding a class to ‘WP Content Section’ in the previous step is to hide this unwanted WordPress content section on such Pages.

Let’s use WPCodeBox for this.

Add a new CSS snippet titled say, “Custom CSS in Bricks editor canvas”.

In the Description, paste:

<?php 

bricks_is_builder() && ! bricks_is_builder_main() && ! has_blocks() && ! empty ( get_post_meta( get_the_ID(), BRICKS_DB_PAGE_CONTENT, true ) );

Open the condition builder, select ‘Custom PHP Condition’ and paste the same.

bricks_is_builder() && ! bricks_is_builder_main()

targets the Bricks builder canvas (reference).

! has_blocks()

targets posts that do not have Gutenberg content.

! empty ( get_post_meta( get_the_ID(), BRICKS_DB_PAGE_CONTENT, true ) )

targets posts that have Bricks content (reference).

Putting it all together, we are saying run the CSS (given below) only in the Bricks editor for posts (Pages are of concern for us) that have only Bricks content.

The reason for adding the above in Description field is because WPCodeBox would (does?) not retain the conditions when snippets are uploaded to cloud and downloaded.

Paste this for the snippet code:

.wp-content-section {
    display: none;
}

Save the snippet and enable it.

After:

For those using classic editor

If you are not using the Gutenberg/block editor, you’d need to replace has_blocks with a custom function.

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

<?php

function bl_has_wp_content(): bool {
    $id = is_home() ? get_option( 'page_for_posts' ) : get_the_ID();
		
    return '' !== get_post( $id )->post_content;
}

We defined a custom function that returns true if the current single post (can be of any post type, but we are using it here only for Pages) has WordPress content and false if it does not.

We’ve also made this function useful for the Posts page (typically called “Blog”) – meaning, WP content (if present) added in the Page designated as the Posts page will appear at the top or before the Bricks content.

References

https://brickslabs.com/bricks-setup-guide/#page

https://wagepirate.com/blog/bricks-gutenberg-content-same-template/