Take full control of your Bricks Builder templates with this powerful PHP snippet that integrates seamlessly with WordPress native page template selector.
When working with Bricks Builder, you might encounter situations where you need specific pages to use unique templates while maintaining a default template system for others. This tutorial shows you how to create a solution that bridges WordPress native page templates with Bricks Builder’s template system.
The Problem We’re Solving
Default WordPress Challenge: WordPress page templates typically only affect the PHP template file used, not the Bricks Builder content template.
Complex Template Conditions: Setting up multiple template conditions in Bricks can become unwieldy for larger sites.
Client-Friendly Solution: Content creators need an easy way to select templates without understanding Bricks Builder’s template conditions system.
The Solution: Native WordPress Integration
Our solution creates virtual page templates in WordPress’s native template selector and programmatically applies corresponding Bricks Builder templates based on the selection.
Complete PHP Implementation
<?php
class BricksNativeTemplateSelector {
/**
* Your Bricks template ID for full width pages
* Change this to your actual template ID
*/
private $full_width_template_id = 1234; // Replace with your template ID
/**
* Initialize the class
*/
public function __construct() {
add_filter('theme_page_templates', [$this, 'add_page_templates']);
add_filter('bricks/active_templates', [$this, 'set_active_templates_by_page_template'], 10, 3);
}
/**
* Add virtual page templates to WordPress native selector
*/
public function add_page_templates($templates) {
$templates['bricks-page-default.php'] = 'Bricks Page Default';
$templates['bricks-full-width.php'] = 'Bricks Full Width';
return $templates;
}
/**
* Set active templates based on selected WordPress page template
*/
public function set_active_templates_by_page_template($active_templates, $post_id, $content_type) {
// Return if content type is not 'content'
if ($content_type !== 'content') {
return $active_templates;
}
// Return if current post type is not 'page'
if (get_post_type($post_id) !== 'page') {
return $active_templates;
}
// Get the selected page template
$page_template = get_page_template_slug($post_id);
/**
* Apply Bricks template based on selected WordPress template
*/
switch ($page_template) {
case 'bricks-full-width.php':
// Use our programmatic Bricks template
$active_templates['content'] = $this->full_width_template_id;
break;
case 'bricks-page-default.php':
// Use default behavior - normal Bricks template conditions work
break;
}
return $active_templates;
}
}
// Initialize the class
new BricksNativeTemplateSelector();
Installation Methods
Method 1: FluentSnippets/WPCodeBox (Recommended)
Using FluentSnippets or WPCodeBox or similar code snippet managers provides the safest implementation:
- Install your snippet manager (FluentSnippets, Code Snippets, etc.)
- Go to Snippets → Add New
- Configure the snippet:
- Title: “Bricks Template Selector”
- Type: PHP
- Location: Everywhere
- Paste the complete code above
- Save and activate
Benefits: Safe activation/deactivation, survives theme updates, organized code management.
Method 2: Bricks Child Theme
Add the code to your Bricks child theme’s functions.php:
<?php
/**
* Bricks Child Theme Functions
*/
// Prevent direct access
if (!defined('ABSPATH')) {
exit;
}
// Bricks Template Selector Integration
class BricksNativeTemplateSelector {
// ... paste the complete class code here
}
// Initialize the template selector
new BricksNativeTemplateSelector();
Benefits: Theme-specific functionality, integrates well with Bricks workflow.
Configuration Steps
1. Find Your Bricks Template ID
- Go to WordPress Admin → Templates (Bricks)
- Edit your template
- Look at the URL:
/wp-admin/post.php?post=1234&action=edit - The number
1234is your template ID
2. Update the Template ID
private $full_width_template_id = 1234; // Replace with your actual ID
3. Set Up Default Template Conditions
Important: For the default template that will be used automatically, you need to set up proper template conditions in Bricks:
- Edit your default Bricks template
- Go to Template Settings → Conditions
- Add condition: “Post Type” → “==” → “Page”
- Save the template
This ensures your default template only applies to pages that don’t use the specific template selector options.
How to Use
For Content Creators:
- Edit any page in WordPress admin
- Find “Page Attributes” meta box (right sidebar)
- Select “Template” dropdown
- Choose your desired template:
- Bricks Page Default – Uses normal Bricks template conditions
- Bricks Full Width – Uses your specified full-width template
Adding More Templates:
public function add_page_templates($templates) {
$templates['bricks-page-default.php'] = 'Bricks Page Default';
$templates['bricks-full-width.php'] = 'Bricks Full Width';
$templates['bricks-landing-page.php'] = 'Bricks Landing Page';
return $templates;
}
Then add the corresponding case in the switch statement:
case 'bricks-landing-page.php':
$active_templates['content'] = 2345; // Your landing page template ID
$active_templates['header'] = 0; // Disable header if needed
$active_templates['footer'] = 0; // Disable footer if needed
break;
Troubleshooting
Template Not Loading: Verify template ID is correct and template is published in Bricks.
Wrong Template Loads: Check existing Bricks template conditions don’t conflict with your setup.
Template Not in Dropdown: Clear caching and verify code is properly loaded.
Conclusion
This solution provides a clean bridge between WordPress’s familiar interface and Bricks Builder’s template system. It’s particularly valuable for agencies managing multiple client sites and teams with varying technical skill levels.
Choose FluentSnippets for safer, organized code management, or use child theme integration for theme-specific implementations. Both methods create a more intuitive workflow while maintaining full control over your site’s design system.