Easily change a website page’s template in Bricks Builder using custom fields (without leaving the edit screen)

I absolutely LOVE Bricks Builder as my WordPress theme and page builder. I’ve been using it now for over two years across many of my sites, and it really is a professional-grade builder.

But like anything, it has its quirks, and one that’s been bothering me for a while is easily changing the template for a website page.

By default for my pages, I have a template with a page title block, followed by Bricks content, called “Title + Bricks”.

But I also have three other page templates I like to create for my websites:

• Basic WordPress – Page title + any WordPress content
• Full Bricks – No content except whatever I build using Bricks, but with the standard header and footer
• Landing Page – Custom landing page header and footer + full Bricks content

And it kind of drives me nuts that any time I want to switch a page’s template away from the default, I have to:

1. Edit the template I want to apply
2. Go into the template’s settings
3. Change the conditions for the template (usually using “Individual” and
4. Then save the template

And for a landing page, it gets worse, because I have to edit conditions for three templates – the header, the footer and the page content itself.

Yuck.

I really miss the way many other WordPress themes do it – with a dropdown on the page itself.

After all, that’s the context you’re in when you decide you want to use a different layout for the page.

So having to switch context and edit a bunch of template conditions was kind of driving me up the wall.

There might be an existing simpler way to do this in Bricks, but I’ve yet to stumble across it.

But I recently discovered a way, using a filter that was introduced in Nov 2023, to recreate this exact experience.

It does require Advanced Custom Fields and some custom PHP code, but that’s right up my alley :)

I’m going to show you how I used this to set up a select box on my edit page screen, that I can use to select a page template, and have it apply all of the correct elements to the page, without ever having to leave the page edit screen.

Heavenly!

Dynamically applying a different template to a page

Step 1 – Create your Bricks templates

Before you can set any of this up, you’ll need to create your templates in Bricks Builder.

Set the conditions on the default templates to ‘post type equals page’ or ‘entire website’ depending on what’s appropriate.

When you’re setting the conditions for your alternative templates, choose “Individual” but don’t add any pages to the list.

This will help you remember that this template is being applied on a page-by-page basis, but won’t actually apply it to any pages using the conditions on the template.

This seems especially important for headers and footers, because if you don’t give it a condition, it applies to the entire website by default, and MAY clash with your default header and footer.

After you’ve created the templates for your non-standard page layouts, note the ID’s for each of them and which templates they refer to. You’ll need these later.

The template ID is simply the post_id for the template AKA the number after the ?post_id=XXXX when you hover over the “edit” link in the list of templates.

e.g. https://yourdomain.com/wp-admin/post.php?post=1234&action=edit

Step 2 – Set up an ACF custom select field for pages

Now install and activate the Advanced Custom Fields (ACF) plugin if you haven’t already.

You don’t have to use ACF for this exercise, it’s just the way I chose to do it.

You can use any code or plugin to add custom fields to your pages, but you’ll need to figure out the syntax for extracting that value later on.

Here’s the steps to do it using ACF:

1. Create a field group for “Page details” (or similar).
2. Add a field with Field Type = Select
3. Add a label e.g. “Page Template”
4. Add a field name e.g. page_template
5. Add your list of values to the “Choices” field
6. Set a default value

Here’s what I put in my “Choices” field:

default : Default
landing-page : Landing page
full-bricks : Full Bricks
basic-wordpress : Basic WordPress

but you’ll need to change yours to suit your templates.

I set a default value of ‘default’ so that there’s always a value for any page, and this means that the template will default to whichever Bricks templates are set to apply to all of my pages.

The value on the left is the ‘value’ of the select that will be returned, while the value after the colon is the label that will be displayed.

I chose a Return Format of Value, but you could also use Label if you prefer. Just make sure to match it in the code below (Step 3).

In the Location Rules for this field group, show this field group if Post Type is equal to Page.

Save your changes, and your custom field should now appear when you’re editing any page.

Step 3 – Add Custom PHP code to programmatically select templates

Now you need to add custom PHP code to select a different page template (or templates) based on the value in this custom field.

All of this custom code will need to be added to your site, via either:

• Your theme’s functions.php file
• A code snippet plugin such as Code Snippets or WPCode
• Your own custom-rolled plugin

Before you proceed, be warned:

You can break your entire site with custom PHP code.

All it takes it one wrong character, and your website is toast.

So make sure you have an emergency way back in to your site (like FTP or web host file manager access) just in case you make a mistake.

(You most likely will, so be prepared!)

Here’s the code I used to modify the template dynamically based on the ACF custom field. Read below for an explanation.

function nhs_choose_templates_dynamically( $active_templates, $post_id, $content_type ) {
    // Only run this on the frontend
    if ( !bricks_is_frontend() ) {
      return $active_templates;
    }

    // Only run if current post type is 'page'
    $post_type = get_post_type( $post_id );
    if ( $post_type !== 'page' ) {
      return $active_templates;
    }

    // Get page data from ACF
    $page_template = get_field('page_template');
      
    // Set templates
    switch ( $page_template ) {
        case 'landing-page' :
            $active_templates['content'] = 2242;
            $active_templates['header'] = 2243;
            $active_templates['footer'] = 2245;
            break;
        case 'full-bricks' :
            $active_templates['content'] = 2341;
            break;
        case 'basic-wordpress' :
            $active_templates['content'] = 2478;
            break;		
    }

    return $active_templates;
}
add_filter( 'bricks/active_templates', 'nhs_choose_templates_dynamically', 10, 3 );

We only want to run this code when we’re rendering a page on the front end, hence the first two checks.

After that, we get the page_template value for the current post from the ACF field using get_field.

If you’re using a different plugin or method for your custom field, you’ll need to figure out how to extract that value here for the current page.

We then use a PHP switch structure to choose the right templates. You’ll need to change the ‘case’ text strings to match your select box values (or labels) that you used in Step 2.

And then you update the numbers at the end of each line to match the template ID’s you saved earlier, from Step 1.

There are three template parts I’ve used here:

1. Header
2. Footer
3. Content – The body of the page

You’ll see that for ‘landing-page’, I’ve changed all three, but for ‘full-bricks’ I’ve only changed the content template.

Whatever template you want to use for a given selected page_template value, add the ID on the appropriate line.

If the default template is selected in the page settings, the Bricks templates will be loaded unchanged, as per the existing Bricks template conditions.

Note: I also wrap this function in a separate function that first checks if Bricks is active before running any of this code.

This step is optional, but helps avoid code issues if you ever deactivate the theme.

Step 4 – Edit a page and update your page template setting

Now go edit one of your pages and see the select box you’ve added with the different page templates to choose from.

Pick a different page template, update (save) your page, and view it on the front end.

Magic!

Now you have a quick and easy way to change your page template WHILE you’re editing your page.

This is ideal if you’re building sites for clients, so that they have an easy way to change which template a page uses, without going near your Bricks templates.

Of course, if you add a new template, or remove one, you’ll need to make sure you update the settings on this custom field, and any pages that used that template to avoid any display issues.

So there will be a very small amount of maintenance as your templates evolve over time.

But it’s so much easier than constantly editing Bricks template conditions!

I’d love to hear how this goes for you, and if it makes your life any easier.