What would you like to know?
Collection: Developer
Filter: bricks/builder/i18n
Place and customize the following filter to add translatable string to the builder. add_filter( 'bricks/builder/i18n', function( $i18n ) { //… ...
Query Control
The query control lets you set query arguments to retrieve items of any post type. Use the returned value to… ...
Border Control
The border control lets you set the following border properties: Border width (top/right/bottom/left)Background style (top/right/bottom/left)Background color (none/solid/double/dotted/dashed)Border radius (top/right/bottom/left) The example below… ...
Filter: bricks/builder/save_messages
Place and customize the following filter to display different save message every time you manually save your progress when editing… ...
Filter: bricks/builder/map_styles
This filter allows you to define your own custom map styles for the Map element. The example below shows how… ...
Background Control
The background control lets you set the following background properties: Background colorBackground imageBackground video (requires bricksBackgroundVideoInit script. See code example… ...
Icon Control
The icon control lets you select and output icons from the following icon font libraries: Fontawesome 6Ionicons 4Themify The user… ...
Checkbox Control
The checkbox control is a simple on/off switch. If enabled it outputs a boolean value of true. Disabled it returns… ...
Info Control
The info control does not affect the HTML or CSS on the frontend. It serves as a builder-only helper controls… ...
Editor Control
The editor control provides the default WordPress editor. To directly edit content in the builder preview set the inlineEditing properties.… ...
Dimensions Control
The dimensions control is perfect for adding multi-directional CSS properties such as margin and padding (top/right/bottom/left). You can set the… ...
Code Control
The code control embeds a code editor utilizing the amazing CodeMirror library. Users for which you've enabled "Code Execution" in… ...
Link Control
The link control give you the choice of different link types: Internal post/pageExternal URLPopup (image, video) ...
Number Control
The number control represents a simple number input field. It has the following custom properties: units (optional: boolean or array)unit… ...
Textarea Control
The textarea control displays a textarea input field. You can set the following parameters: rows (number. Default: 5)readonly (true/false. Default: false)spellcheck (true/false.… ...
Audio Control
The audio control lets you select an audio file from the media library. It also gives you various options to… ...
Box Shadow Control
The box-shadow control is a CSS control and you can set the following properties: Offset XOffset YSpreadBlurColorInset Resources https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow ...
Datepicker Control
The datepicker control provides a great interface for selecting a specific date and time and outputting it in the format… ...
Image Control
The image control lets you select a single image from your media library. Once an image has been selected you… ...
Image Gallery Control
The image gallery control lets you select multiple images from your media library. Once images have been selected you can… ...
Typography Control
The typography control provides the following CSS properties: colorfont-sizetext-aligntext-transformfont-familyfont-weightfont-styleline-heightletter-spacingtext-shadowtext-decoration Use the exclude parameter to hide specific typography properties. Set popup to… ...
Color Control
The color control is a custom-built color picker that you won't find anywhere else. It lets you pick and adjust… ...
Repeater Control
The repeater control lets you create repeatable fields. Fields can be cloned, deleted, and sorted via Drag & Drop. Use… ...
Filters Control
The filters control offers the following CSS filters: blur, brightness, contrast, hue, invert, opacity, saturation, sepia. All sections, rows, columns,… ...
SVG Control
The SVG control lets you select an SVG (Scalable Vector Graphic) file from the media library. The selected SVG returns… ...
Text Shadow Control
The text-shadow control displays a popup that lets you set the CSS text-shadow of a specified HTML text element. Resources… ...
Slider Control
The slider control shows a draggable range input field. Default units are px, em and rem. You can set the… ...
Select Control
The select control lets you select an option from a dropdown. It can be used to render content or CSS… ...
Text Control
The text control displays a text input field. You can set the following parameters: spellcheck: true/false. (Default: false)trigger: 'keyup'/'enter'. (Default:… ...
Child Theme
Please do not edit any of the Bricks theme core files directly, as updating the theme will cause all your changes… ...
Element Controls
Element controls allow the user to change the content and appearance of an element. You can define the controls of an… ...
Filter: bricks/builder/color_palette
Place and customize the following filter to display a different default color palette for the color control. add_filter( 'bricks/builder/color_palette', function(… ...
Filter: bricks/builder/standard_fonts
Place and customize the following filter to display a different set of web-safe fonts in the typography control. add_filter( 'bricks/builder/standard_fonts',… ...
Create Your Own Elements
The Bricks child theme, which you can download from your Bricks account includes a simple custom element for demonstration purposes.… ...
Gradient Control
The gradient control lets you define an unlimited number of gradients that you can apply to text, background, and as… ...
Filter: bricks/builder/elements
Determine which elements to use in Bricks by out-commenting the ones you don't want to use. There is a full… ...
Apply Control
The apply control saves your settings. You can set the reload control property to true in order to trigger a… ...
Align Items Control (Flexbox)
Use the align-items control to allow users to set the align-items CSS property (alignment along the cross-axis) of your CSS… ...
Justify Content Control (Flexbox)
Use the justify-content control to allow users to set the justify-content CSS property (alignment along the main-axis) of your CSS… ...
Direction Control (Flexbox)
Use the direction control to allow users to set the flex-direction CSS property of your CSS flexbox layout. ...
Text Align Control
Use the text-align control to allow users to set the text-align CSS property like so: ...
Text Decoration Control
Use the text-decoration control to allow users to set the text-decoration CSS property like so: ...
Text Transform Control
Use the text-transform control to allow users to set the text-transform CSS property like so: ...
Filter: bricks/dynamic_data/post_terms_separator
Programmatically set the post term separator like so: ...
Filter: bricks/elements/{element_name}/controls
Since Bricks 1.3.2 it is possible to add custom controls to any element like so: Note: the above example adds… ...
Filter: bricks/posts/query_vars
Since Bricks 1.3.2 you may manipulate the posts, products, or Query Loop elements query vars before the query is performed… ...
Filter: bricks/dynamic_data/replace_nonexistent_tags
Dynamic data tags are strings with a special syntax wrapped by curly brackets. Sometimes this syntax has conflicts with other… ...
Filter: bricks/dynamic_data/exclude_tags
Dynamic data tags are strings with a special syntax wrapped by curly brackets. Sometimes this syntax has conflicts with other… ...
Filter: bricks/related_posts/query_vars
Since Bricks 1.3.5 you may manipulate the related posts element query vars before the query is performed like so: The filter callback… ...
Filter: bricks/dynamic_data/read_more
If you use the dynamic data tag Read more you'll get an anchor tag (link) to the post with the label… ...
Filter: bricks/element/render_attributes
Starting with Bricks 1.3.7 you may manipulate the HTML attributes of a given element using the following filter: The filter… ...
Filter: bricks/posts/merge_query
Since Bricks 1.3.7 you'll be able to decide if a certain element query should be merged with the WordPress main… ...
Filter: bricks/code/disallow_keywords
This filter introduces another level of security when using the Code element to run code. With the filter bricks/code/disallow_keywords you'll… ...
Filter: bricks/code/allow_execution
An alternative to the Disable code execution setting under Bricks > Settings > Builder Access. You can use this PHP… ...
Filter: bricks/assets/load_webfonts
Bricks 1.4 introduces the possibility to "Disable Google Fonts". Either via the Bricks settings under "Performance" or programmatically using the… ...
Filter: bricks/setup/control_options
Bricks offers a WordPress filter to add or remove control options. The control options are used throughout Bricks and allow… ...
Filter: bricks/query/run
The Bricks Query Loop supports 3 types of queries by default (Posts, Terms and Users). But it can be extended… ...
Filter: bricks/terms/query_vars
Bricks terms query variables can be manipulated before the query runs like so: The filter callback receives three arguments: Example… ...
Filter: bricks/users/query_vars
Bricks users query variables can be manipulated before the query runs like so: The filter callback receives three arguments: ...
Filter: bricks/query/loop_object
The Bricks Query Loop supports 3 types of queries by default (Posts, Terms, and Users). But it can be extended… ...
Filter: bricks/elements/{element_name}/control_groups
Since Bricks 1.4 it is possible to add custom control groups to a specific element like so: Note: the above… ...
Filter: bricks/element/render
Bricks 1.5 introduces the new bricks/element/render filter. This filter enables you to implement your own conditional display logic programmatically. This… ...
Nestable Elements (API)
Bricks 1.5 introduces Nestable Elements. Plus an API that allows you to programmatically define your own custom elements that can… ...
Filter: bricks/element/set_root_attributes
Bricks 1.4 with its improved & slimmer DOM structure now requires to add the element ID, root classes, and other… ...
Filter: bricks/element/settings
Bricks 1.5 adds the possibility to change the element settings before it is rendered. This allows you to change a… ...
Filter: bricks/link_css_selectors
Use this filter in your child theme to overwrite/extend the CSS selectors the "Theme Styles > Link" settings are applied… ...
Filter: bricks/is_layout_element
Allows to define your custom elements as a layout element, so they are recognised like the section, container, block, div… ...
Filter: bricks/content/attributes
Programmatically add HTML attributes to the main tag. ...
Filter: bricks/header/attributes
Programmatically add HTML attributes to the header tag. ...
Filter: bricks/footer/attributes
Programmatically add HTML attributes to the footer tag. ...
Filter: bricks/dynamic_data/post_terms_links
When rendering the terms assigned to a post using the dynamic data tag {post_terms_my_taxonomy}, Bricks wraps each term with a… ...
Filter: bricks/body/attributes
Filter to add HTML attributes to the body tag (@since 1.5). ...
Filter: bricks/comments/timestamp
When using the Bricks Post Comments element, the comment default timestamp text will show the time difference since it was… ...
Function: bricks_render_dynamic_data
This helper function will render the dynamic data tags inside of a content string (@since 1.5.5). Parameters: $content - a… ...
Filter: builder/settings/{type}/controls_data
This filter allows you to add new controls to the Page Settings or Template Settings panels in the builder. To… ...
Filter: bricks/screen_conditions/scores
Bricks selects the template & theme style for a specific page according to the conditions you've defined. Internally this is… ...
Filter: bricks/registered_post_types_args
Available since version 1.6, this filter allows you to customise the post type args that are used to query the… ...
Filter: bricks/content/html_after_begin
Available since version 1.6, this filter allows you to customize or insert HTML strings after main tag, before rendering bricks… ...
Filter: bricks/content/html_before_end
Available since version 1.6, this filter allows you to customize or insert HTML strings before closing main tag. ...
Action: bricks/query/before_loop
If you are creating a custom query loop or a custom plugin, you might want to perform some additional tasks… ...
Action: bricks/query/after_loop
If you are creating a custom query loop or a custom plugin, you might want to perform some additional tasks… ...
Filter: bricks/default_page_title
Since 1.8, Bricks automatically adds default page titles to all non-Bricks pages. However, if you wish to customize or remove… ...
Filter: bricks/query/result
Available since 1.8, this filter lets you customize the query results and implement additional logic. Like modifying the post, term,… ...
Filter: bricks/query/result_count
This filter allows you to modify the query result count (@since 1.8). ...
Bricks CLI
Bricks 1.8.1+ integrates with the WP-CLI (WordPress Command Line Interface). Allowing you to perform specific tasks from your server's command… ...
Create Your Own Dynamic Data Tag
This article is intended for developers who wish to create a custom dynamic data tag within the builder. The desired… ...
Filter: bricks/active_templates
Modify the templates applied on a page programmatically (@since 1.8.4) This is an alternative to setting an active template via… ...
Filter: bricks/frontend/render_data
The filter allows you to modify the rendered content for different areas like header, content, and footer before it's displayed… ...
Filter: bricks/query/result_max_num_pages
This filter allows you to modify the query result maximum number of pages (@since 1.9.1). This value is used for… ...
Filter: bricks/query/force_run
Bricks has enhanced query performance in 1.9.1. Now, each unique query is executed only once per page load, and subsequently,… ...
Filter: bricks/assets/generate_css_from_element
This filter allows you to include your custom query loop supported element to generate the children styles in Bricks. (@since… ...
Filter: bricks/search_form/home_url
The bricks/search_form/home_url filter allows developers to customize the action URL of the search form within the Bricks theme. This filter… ...
Filter: bricks/builder/image_size_options
The bricks/builder/image_sizes hook gives developers the ability to customize image size options in the builder. By default, when working within… ...
Filter: bricks/auth/custom_redirect_url
This filter is distinct from other authentication-related filters in that it provides a broad scope for customizing redirections during authentication… ...
Filter: bricks/auth/custom_login_redirect
This filter allows customization of the redirect page ID for the login page. Example Usage: Parameters: Return: ...
Filter: bricks/auth/custom_lost_password_redirect
This filter enables the modification of the redirect page ID for the lost password page. Example Usage: Parameters: Return: ...
Filter: bricks/auth/custom_registration_redirect
This filter allows for the customization of the redirect page ID for the registration page. Example Usage: Parameters: Return: ...
Filter: bricks/auth/custom_reset_password_redirect
This filter provides a way to change the redirect page ID for the reset password page. Example Usage: Parameters: Return: ...
Action: bricks/generate_css_file
If your CSS loading method is set to External files, this hook will be triggered when a CSS file is… ...
Steps to identify and repair a compromised Bricks site
In this post, we'll discuss the security vulnerability discovered in Bricks on February 10th, 2024, for which we provided a… ...
Filter: bricks/code/echo_function_names
Starting at Bricks 1.9.7, you must explicitly allow any function names you want to call via Bricks' dynamic data echo… ...
Custom JavaScript events in Bricks
Bricks offers a range of custom JavaScript events that you can leverage to enhance the functionality and interactivity of your… ...
Filter: bricks/nav_menu/menu
The bricks/nav_menu/menu filter allows you to modify the navigation menu dynamically in Bricks Builder based on your conditions. In the… ...
Filter: bricks/code/disable_execution
This PHP filter allows you to disable code execution within the Bricks builder programmatically. It takes precedence over the bricks/code/allow_execution… ...
Filter: bricks/allowed_html_tags
Starting at version 1.10.2 Bricks restricts the allowed HTML tags to the WordPress core logic for wp_kses_allowed_html( 'post' ). This… ...
Filter: bricks/get_element_data/maybe_from_post_id
The bricks/get_element_data/maybe_from_post_id filter, available @since 1.11, allows you to specify an additional post ID from which to retrieve element data.… ...
Filter: bricks/query/init_loop_index
The bricks/query/init_loop_index filter, available @since 1.11, allows you to modify the initial loop index when using various query types in… ...
Filter: bricks/builder/codemirror_config
Use this filter to customize the configuration of CodeMirror 5, the code editor used within the builder. CodeMirror 5 is… ...
Filter: bricks/render_query_loop_trail
The bricks/render_query_loop_trail (@since 1.11.1) filter controls the output of the query loop trail node in Bricks. This node is automatically… ...
Filter: bricks/password_protection/cookie_expires
Adjust the expiration time for the password cookie used by the password protection template. By default, when a password is… ...
Filter: bricks/password_protection/is_active
Use this filter to add custom rules that determine whether a password protection template should be active. By default, the… ...
Filter: bricks/content/tag
The bricks/content/tag (@since 1.11.1) filter lets you set the HTML tag for the #brx-content node that your Bricks content data… ...
Filter: bricks/use_duplicate_content
Duplicate content is available for all users with the edit_post capability. Use this feature to duplicate any post or page… ...
Filter: bricks/form/action/{form_action}
The bricks/form/action/{form_action} filter is triggered when a custom action (one that is not reserved by Bricks) is selected in a… ...
Filter: bricks/maintenance/should_apply
Use this filter to override whether maintenance mode should be enforced for the current request. By default, Bricks checks if… ...
Filter: bricks/frontend/render_element
The bricks/frontend/render_element filter allows you to modify the HTML output of any element in Bricks on the frontend. This powerful… ...