The Perfect Bricks Page Template

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:

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 whose source is set to Bricks. It will automatically only be output if there is Bricks content.

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/

Instant access to 390+ Bricks code tutorials with BricksLabs Pro

4 comments

  • Nice tutorial, question:

    Where you say "Whitelist has_blocks function" in step 1, what do you mean by "whitelist"?
    Do you just mean we need to add the code in the box to our functions.php?

    • A

      That is correct. But depending on what other functions (WordPress native or custom) may be in use on your site already (if any), those would need to included as well.

      I have just updated the tutorial to make the whitelisting part more clear.

  • Benjamin Ogg

    Wow, that's super awsome, Sridhar! ❤️

Leave your comment