23rd May '22
/
5 comments

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;
} );
Get access to all 626 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 your comment

 

Related Tutorials..

Pro
How to programmatically add a class to an element in Bricks

How to programmatically add a class to an element in Bricks

This Pro tutorial shows how a dynamic class can be added to a query loop element in Bricks programmatically. Let's take an example where posts…
Pro
How to add a Class to all Images in Bricks Galleries

How to add a Class to all Images in Bricks Galleries

Learn how to add a custom class to all the images rendered by Bricks' Gallery elements so these images can be excluded from Perfmatters' Lazy…
Pro
Filtering a Bricks Terms query on Term archive pages

Filtering a Bricks Terms query on Term archive pages

On product category archives, how to show product type names but only those that the current product category has.
Pro
ACF Relationship Select Filter in Bricks

ACF Relationship Select Filter in Bricks

In the BricksLabs Facebook group, a user asks: I'm learning about ACF relationships and attempting to output a list of posts on any given page,…
Categories:
Removing Action/Filter Inside a Plugin’s Namespaced Class Constructor

Removing Action/Filter Inside a Plugin’s Namespaced Class Constructor

Recently worked with a friend figuring out how to remove/undo/cancel an add_action() line that's inside a plugin's constructor inside a PHP Class with the file…
Categories:
Tags:
Pro
Programmatically populating ACF field values in WordPress

Programmatically populating ACF field values in WordPress

An example of how to set the values of a Select-type field with the names and labels of all public post types.
Categories: