Bricks has a handy bricks/builder/elements
filter using which the available elements that show up after clicking + (or ⌃/⌘ + ⇧ + E) in the editor can be filtered.
First, we need to get the list of available element names. This can be done by adding the following in child theme’s functions.php
or a code snippets manager plugin like WPCodeBox:
/**
* To show all available Bricks elements on the frontend for admins.
*/
add_filter( 'bricks/builder/elements', function( $elements ) {
if ( current_user_can( 'manage_options' ) && ! is_admin() ) {
print( '<pre>' . print_r( $elements, true ) . '</pre>' );
}
return $elements;
} );
Visit any page on the front end (as an admin user) and you should see an array printed like this:
Click here to see the array
Array
(
[0] => container
[1] => heading
[2] => text-basic
[3] => text
[4] => button
[5] => icon
[6] => image
[7] => video
[8] => divider
[9] => icon-box
[10] => social-icons
[11] => list
[12] => accordion
[13] => tabs
[14] => form
[15] => map
[16] => alert
[17] => animated-typing
[18] => countdown
[19] => counter
[20] => pricing-tables
[21] => progress-bar
[22] => pie-chart
[23] => team-members
[24] => testimonials
[25] => html
[26] => code
[27] => template
[28] => logo
[29] => facebook-page
[30] => image-gallery
[31] => audio
[32] => carousel
[33] => slider
[34] => svg
[35] => wordpress
[36] => posts
[37] => pagination
[38] => nav-menu
[39] => sidebar
[40] => search
[41] => shortcode
[42] => post-title
[43] => post-excerpt
[44] => post-meta
[45] => post-content
[46] => post-sharing
[47] => related-posts
[48] => post-author
[49] => post-comments
[50] => post-taxonomy
[51] => post-navigation
)
Now let’s say you want to exclude a few elements, add this sample code:
/**
* To exclude the specified elements from Bricks Builder.
*/
add_filter( 'bricks/builder/elements', function( $elements ) {
$elements_to_exclude = [
'text-basic',
'facebook-page'
];
return array_diff( $elements, $elements_to_exclude );
} );
Specify the elements you want to exclude in the $elements_to_exclude
array.
Alternatively, you could use the following code and comment out the ones you do not want to be included:
/**
* To exclude the commented elements from Bricks Builder.
*/
add_filter( 'bricks/builder/elements', function( $elements ) {
$elements = [
'section',
'block',
'container',
'heading',
'text-basic',
'text',
'button',
'icon',
'image',
'video',
'divider',
'icon-box',
'social-icons',
'list',
'accordion',
'tabs',
'form',
'map',
'alert',
'animated-typing',
'countdown',
'counter',
'pricing-tables',
'progress-bar',
'pie-chart',
'team-members',
'testimonials',
'html',
'code',
'template',
'logo',
'facebook-page',
'image-gallery',
'audio',
'carousel',
'slider',
'svg',
'wordpress',
'posts',
'pagination',
'nav-menu',
'sidebar',
'search',
'shortcode',
'post-title',
'post-excerpt',
'post-meta',
'post-content',
'post-sharing',
'related-posts',
'post-author',
'post-comments',
'post-taxonomy',
'post-navigation'
];
return $elements;
} );
Example
/**
* To exclude the commented elements from Bricks Builder.
*/
add_filter( 'bricks/builder/elements', function( $elements ) {
$elements = [
'section',
'block',
'container',
'heading',
// 'text-basic',
'text',
'button',
'icon',
'image',
'video',
'divider',
'icon-box',
'social-icons',
'list',
'accordion',
'tabs',
'form',
'map',
'alert',
'animated-typing',
'countdown',
'counter',
'pricing-tables',
'progress-bar',
'pie-chart',
'team-members',
'testimonials',
'html',
'code',
'template',
'logo',
// 'facebook-page',
'image-gallery',
'audio',
'carousel',
'slider',
'svg',
'wordpress',
'posts',
'pagination',
'nav-menu',
'sidebar',
'search',
'shortcode',
'post-title',
'post-excerpt',
'post-meta',
'post-content',
'post-sharing',
'related-posts',
'post-author',
'post-comments',
'post-taxonomy',
'post-navigation'
];
return $elements;
} );
5 comments
Amanda Lucas
Sridhar, this is throwing an error on latest version of bricks saying
'PHP class doesnt exist: for section and container'
David Browne
Hi Amanda,
I updated the tutorial to include 'section' and 'block' elements that didn't exist when this was written.
Pavel Janovec
Hi, hiding elements is great, but could you make a tutorial on hiding the "Styles" tab for regular editors so that they can edit only the basic content of the element?
Keviin Cosmos
Can i do this for certain post types?
I've created 5 custom widgets customers will use for single products (instead of ACF flexible content), but i want to hide all others.
I've tried to use WP codebox to only execute PHP/CSS for product pages, but it does not seems to work. The code does not have any effect, but if i add into chrome (the css) it works.
Sridhar Katakam
Yes.
See https://brickslabs.com/conditionally-excluding-elements-from-bricks-editor/.