Bricks Builder’s default AJAX filters use basic <select> dropdowns. While functional, these dropdowns lack searchability and a better user experience. This guide will show you how to replace Bricks’ default select fields with Select2, while keeping full AJAX filtering functionality.
Why Use Select2 for Bricks Builder Filters?
- Enhances usability with a searchable, styled dropdown.
- Ensures Bricks’ AJAX filtering continues to work properly.
- Keeps the default select hidden to prevent UI flickering.
- Re-initialises Select2 after filtering to ensure it stays applied.
By default, this method will target all Bricks Builder AJAX filter select fields. If you only want to apply Select2 to a specific filter, follow the instructions at the end of this guide.
What You’ll Need
Before you start, make sure you have:
- A WordPress site running Bricks Builder with its native AJAX filters already set up on a query loop.
- A way to add custom code – a child theme, or a code snippets plugin – for the PHP, JavaScript and CSS below.
- The Select2 library, which we load from a CDN in Step 1, so there is nothing to download.
- Basic familiarity with jQuery selectors, so you can point the script at the right filter.
Step 1: Load Select2 on Your Site
Before applying Select2 to Bricks filters, ensure Select2 is loaded on your site.
If Select2 is not already enqueued, add this to your theme’s functions.php:
function enqueue_select2_for_bricks_filters() {
wp_enqueue_style('select2-css', 'https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css');
wp_enqueue_script('select2-js', 'https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_select2_for_bricks_filters');
Step 2: Add the JavaScript to Replace Bricks’ Select Fields
To convert Bricks’ filter dropdowns into Select2, add this JavaScript.
jQuery(document).ready(function($) {
const filterSelect = $('.brxe-filter-select'); // Targets all Bricks filter select fields
function initSelect2() {
if (!filterSelect.hasClass("select2-hidden-accessible")) {
filterSelect.select2({
placeholder: 'Select an option',
allowClear: true,
width: '100%'
}).on('select2:select select2:unselect', function() {
simulateUserSelection();
});
}
filterSelect.addClass('select2-hidden-accessible')
.attr('aria-hidden', 'true')
.css({ visibility: 'hidden', position: 'absolute' });
}
filterSelect.attr('data-brx-filter', 'true');
initSelect2();
document.addEventListener('bricks/ajax/query_result/displayed', function() {
setTimeout(initSelect2, 100);
});
function simulateUserSelection() {
const selectedValue = filterSelect.val();
filterSelect[0].dispatchEvent(new Event('input', { bubbles: true }));
filterSelect[0].dispatchEvent(new Event('change', { bubbles: true }));
document.dispatchEvent(new CustomEvent('bricks/ajax/start', { detail: { queryId: 'filter_123' } }));
document.dispatchEvent(new CustomEvent('bricks/ajax/query_result/completed', { detail: { queryId: 'filter_123' } }));
document.dispatchEvent(new CustomEvent('bricks/ajax/query_result/displayed', { detail: { queryId: 'filter_123' } }));
document.dispatchEvent(new CustomEvent('bricks/ajax/end', { detail: { queryId: 'filter_123' } }));
filterSelect.closest('form').submit();
}
});
Step 3: Hide the Default Select Field to Prevent Flickering
Bricks reloads the filter select after AJAX updates, which can make the default select briefly reappear. To prevent this, hide it permanently using CSS:
.brxe-filter-select {
display: none;
}Step 4: Targeting a Specific Select Field Instead of All Filters
If you only want to apply Select2 to a specific Bricks filter select field, you need to modify the selector in both JavaScript and CSS.
Find the ID or Class of Your Specific Select Field
Inspect the HTML source code of your filter select field in your browser’s developer tools (F12). Look for an ID or a unique class name inside the <select> tag.
For example, if your select field has the ID brxe-business-type, modify the JavaScript and CSS like this:
Updated JavaScript for a Specific Select Field
jQuery(document).ready(function($) {
const filterSelect = $('#brxe-business-type'); // Only targets this specific filter
function initSelect2() {
if (!filterSelect.hasClass("select2-hidden-accessible")) {
filterSelect.select2({
placeholder: 'Select a business type',
allowClear: true,
width: '100%'
}).on('select2:select select2:unselect', function() {
simulateUserSelection();
});
}
filterSelect.addClass('select2-hidden-accessible')
.attr('aria-hidden', 'true')
.css({ visibility: 'hidden', position: 'absolute' });
}
filterSelect.attr('data-brx-filter', 'true');
initSelect2();
document.addEventListener('bricks/ajax/query_result/displayed', function() {
setTimeout(initSelect2, 100);
});
function simulateUserSelection() {
const selectedValue = filterSelect.val();
filterSelect[0].dispatchEvent(new Event('input', { bubbles: true }));
filterSelect[0].dispatchEvent(new Event('change', { bubbles: true }));
document.dispatchEvent(new CustomEvent('bricks/ajax/start', { detail: { queryId: 'filter_123' } }));
document.dispatchEvent(new CustomEvent('bricks/ajax/query_result/completed', { detail: { queryId: 'filter_123' } }));
document.dispatchEvent(new CustomEvent('bricks/ajax/query_result/displayed', { detail: { queryId: 'filter_123' } }));
document.dispatchEvent(new CustomEvent('bricks/ajax/end', { detail: { queryId: 'filter_123' } }));
filterSelect.closest('form').submit();
}
});
Updated CSS for a Specific Select Field
Instead of hiding all select fields, only hide your specific select field:
#brxe-business-type {
display: none;
}
The Full Code, in One Place
Here is the complete setup for turning every Bricks AJAX filter into a searchable Select2 dropdown – the three pieces from the steps above, ready to copy.
1. Enqueue Select2 in your theme’s functions.php:
function enqueue_select2_for_bricks_filters() {
wp_enqueue_style('select2-css', 'https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/css/select2.min.css');
wp_enqueue_script('select2-js', 'https://cdn.jsdelivr.net/npm/select2@4.0.13/dist/js/select2.min.js', array('jquery'), null, true);
}
add_action('wp_enqueue_scripts', 'enqueue_select2_for_bricks_filters');
2. Initialise Select2 on the filters (add as a script):
jQuery(document).ready(function($) {
const filterSelect = $('.brxe-filter-select'); // Targets all Bricks filter select fields
function initSelect2() {
if (!filterSelect.hasClass("select2-hidden-accessible")) {
filterSelect.select2({
placeholder: 'Select an option',
allowClear: true,
width: '100%'
}).on('select2:select select2:unselect', function() {
simulateUserSelection();
});
}
filterSelect.addClass('select2-hidden-accessible')
.attr('aria-hidden', 'true')
.css({ visibility: 'hidden', position: 'absolute' });
}
filterSelect.attr('data-brx-filter', 'true');
initSelect2();
document.addEventListener('bricks/ajax/query_result/displayed', function() {
setTimeout(initSelect2, 100);
});
function simulateUserSelection() {
const selectedValue = filterSelect.val();
filterSelect[0].dispatchEvent(new Event('input', { bubbles: true }));
filterSelect[0].dispatchEvent(new Event('change', { bubbles: true }));
document.dispatchEvent(new CustomEvent('bricks/ajax/start', { detail: { queryId: 'filter_123' } }));
document.dispatchEvent(new CustomEvent('bricks/ajax/query_result/completed', { detail: { queryId: 'filter_123' } }));
document.dispatchEvent(new CustomEvent('bricks/ajax/query_result/displayed', { detail: { queryId: 'filter_123' } }));
document.dispatchEvent(new CustomEvent('bricks/ajax/end', { detail: { queryId: 'filter_123' } }));
filterSelect.closest('form').submit();
}
});
3. Hide the default dropdown so it does not flicker (add to your CSS):
.brxe-filter-select {
display: none;
}To target just one filter instead of all of them, swap the selector for its ID, exactly as shown in Step 4 above.
Final Thoughts
By default, this guide applies Select2 to all Bricks filter select fields. However, if you want to apply Select2 to only one specific filter, use the instructions in Step 4.
This method ensures that Select2 works seamlessly with Bricks’ AJAX filtering system, maintaining full functionality while providing a modern, interactive UI.
By following these steps, you now have fully functional Select2 fields for Bricks Builder’s native AJAX filters, giving your users a better way to navigate and filter content.
Working with paginated results as well? If filtered items start appearing on more than one page, here is our fix for duplicate results in Bricks pagination.
Would you rather have this handled for you? If you want a WordPress site built and looked after with Bricks, see our Bricks Builder web design.
