How to Exclude Elements from Bricks Editor

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;
} );
Instant access to 390+ Bricks code tutorials with BricksLabs Pro

5 comments

  • Amanda Lucas

    Sridhar, this is throwing an error on latest version of bricks saying
    'PHP class doesnt exist: for section and container'

    • A
      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.

Leave a Reply to Keviin Cosmos (Cancel Reply)