How to render Bricks Builder template with PHP

In this tutorial we will take a look how can we render Bricks Template dynamically with PHP code. We will learn how to do it without rendering it with a shortcode and we will also change some data inside dynamically.

You can skip to the last part if you already have Bricks template created and have the ID of it.

Creating Bricks template

I’m sure you know how to create a template, but I will still create one, so you can follow along.

First, we will create new template by going to “Bricks -> Templates ->Add New”

In the next window, we set following settings:

1. Name: Dynamic template (you can pick anything you want)
2. Template type: Section (we will create section that we will insert it into the page somewhere)

After we do this, we click “Publish” and then “Edit with Bricks”. And that’s it, we have now a template that we can edit.

Let’s just create very basic template with only 1 element (Basic text). So, the structure should look like this:

Now, while we are here, we can also get the ID of this element, that we will use later on. You can find the ID on the right side in the input box at the top. Keep in mind that the element ID is only the second part (underlined in the picture below). In my case, the ID that we need is thinxz. You will have different one.

That’s it. We can now save the template and close it. Congratulations, you have new template 🙂

What we want to achieve and preparations

We want to be able to call/render our template with code from Bricks builder with just a line of code. Example, of how our code could look is shown below.

<?php
echo get_custom_template()
?>

To prepare your code, please insert code element in the part of the page you would like to render the template and insert this code inside. Don’t run it for now, because this function does not exists yet, but we will create it in the next chapter.

For the following chapters I suggest you use code snippet plugin or put your code into functions.php. I will use code snippet plugin, but it should work anyway.

Finding template ID

For our method to work, we must find template ID.

If you go to Bricks -> Templates you will see a list of all available templates. Find the one you created earlier (My dynamic template in my case) and there you are, shortcode is on the right. If you look carefully, you can see that we have ID written inside Shortcode. If you click on it, you will copy full shortcode, but you can also just remember it. In my case, the ID is 3597.

Code we need

I will put this code inside code snippet plugin (I use WPCodeBox), but it should work anywhere – you can also put it in functions.php.

Basic code and rendering

function get_custom_template()
{

    
    $output = ""; //HTML code that we will output/return
    $template_id = 3597; //our template ID

    //get all elements from template with ID 3597
    $elements = get_post_meta($template_id, BRICKS_DB_PAGE_CONTENT, true);


    //Updating element in html code
    foreach ($elements as $key => $element){
        if($element['id'] == 'bngoxr'){ //thinxz is the ID of our basic text element, that we will change dynamically 
            $element['settings']['text'] = "It works";
            $elements[$key] = $element;
        }
    }

    //adding template HTML code
    $output .= \Bricks\Frontend::render_data($elements);;

    //returning HTML code that we will render
    return $output;
}

So, this is very basic code that does 3 things:

1. Get elements from template with ID 3597
2. Updates the element inside template with some custom data, in our case we set the text to be “It works”
3. Renders the template and returns it as a HTML code.

Now, this works, right? Let’s try!

That’s great, it looks like our simple rendering method works. Now, let’s try to add some padding and background color to our template and see how it will look.

Ok, you updated the template, saved it and go back to the page and refreshed the page and…. nothing. The page still looks the same. That is because we need to render the styles also, and we will learn how to do that in next chapter.

Improving our code

First, we could make some checks, for example we could check if template is empty or if template includes itself and in those two cases, we would not render it. But because we are coding, I suspect you will make sure that you wont have those two bugs, so I will not cover this here for now 🙂

I will first write code step by step and put full source code at the end of tutorial. If you want, you can just skip there.

1) Icons and global elements

If your template contains icons, it will not load them, that why we need to enqueue scripts for them using following line of code. When you insert the code, you should see all the icons you may have.

\Bricks\Assets::enqueue_setting_specific_scripts( $elements );

2) Adding styles

We need to register, enqueue and add styles. In our example, we will add style as inline. Make sure that $template_id is available when you execute this code.

wp_register_style( "bricks-shortcode-template-".$template_id, false );
wp_enqueue_style( "bricks-shortcode-template-".$template_id );
wp_add_inline_style( "bricks-shortcode-template-".$template_id, \Bricks\Templates::generate_inline_css( $template_id, $elements ) );

Once you add that code, you can got to Bricks Builder and see if it works. You will find out that it still doesn’t render good on the backend, but it renders just fine on the frontend.We will fix this also in a next chapter.

3) Fixing rendering in builder

To fix rendering in the builder, we must use following code. It will generate and append the style we need for rendering template in builder.

if (bricks_is_builder_call()) {
        $inline_css = \Bricks\Templates::generate_inline_css(
            $template_id,
            $elements
        );
        $inline_css .= \Bricks\Assets::$inline_css_dynamic_data;
        $output .= "<style id=\"bricks-inline-css-template-{$template_id}\">{$inline_css}</style>";
    }

Final thoughts

Below you can see full code that I used to render template dynamically with PHP, including changing some part of the text.

Keep in mind that this code is not “battle tested” and you should be careful when using it, because this is not official way to render templates in Bricks Builder. Before using this method, please make sure that you try all other officially supported methods like using shortcode, template element or even only query loop and filters, if you need a list of something.

But anyway, if nothing else, this tutorial could be a nice exercise and if you find some mistakes or bugs, please let me know.

I hope you enjoy reading it! 😉

<?php

function get_custom_template()
{
    $output = ""; //HTML code that we will output/return
    $template_id = 3597; //our template ID

    //get all elements from template with ID 3597
    $elements = get_post_meta($template_id, BRICKS_DB_PAGE_CONTENT, true);

    //Makeing icons works
    \Bricks\Assets::enqueue_setting_specific_scripts($elements);

    //Updating element in html code
    foreach ($elements as $key => $element) {
        if ($element["id"] == "thinxz") {
            //thinxz is the ID of our basic text element, that we will change dynamically
            $element["settings"]["text"] = "It works";
            $elements[$key] = $element;
        }
    }

    //Registering, enqueueing and adding styles
    wp_register_style("bricks-shortcode-template-" . $template_id, false);
    wp_enqueue_style("bricks-shortcode-template-" . $template_id);
     wp_add_inline_style(
        "bricks-shortcode-template-$template_id",
        \Bricks\Templates::generate_inline_css($template_id, $elements)
    );

    
    //Fixing render in builder
    if (bricks_is_builder_call()) {
        $inline_css = \Bricks\Templates::generate_inline_css(
            $template_id,
            $elements
        );
        $inline_css .= \Bricks\Assets::$inline_css_dynamic_data;
        $output .= "<style id=\"bricks-inline-css-template-{$template_id}\">{$inline_css}</style>";
    }

   

    //adding template HTML code
    $output .= \Bricks\Frontend::render_data($elements);

    //returning HTML code that we will render
    return $output;
}