Beaver Builder Global Settings can be overridden including the Media Query breakpoints via the Tools > Global Settings in the Beaver Builder interface.
If you have a starter theme you can permanently override these settings by using the fl_builder_register_settings_form filter which will allow you to set the modified global settings permanently so you don’t have to remember to go and do it in future projects.
You can do this in one of 3 ways – filter all the settings, merge the settings, return specific values only…
Filter All The Settings
So in functions.php you can apply the filter like so…
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php // <~ don't add me in | |
| add_filter( 'fl_builder_register_settings_form', 'wb_builder_register_settings_form', 10, 2 ); | |
| /* | |
| * Filter the Global Settings Options. | |
| * Media breakpoints and form title have been changed. | |
| */ | |
| function wb_builder_register_settings_form( $form, $id ) { | |
| if ( 'global' == $id ) { | |
| // Modify the Global $form config array. | |
| $form = array( | |
| 'title' => __( 'Beavertron Global Settings', 'fl-builder' ), | |
| 'tabs' => array( | |
| 'general' => array( | |
| 'title' => __('General', 'fl-builder'), | |
| 'description' => __('<strong>Note</strong>: These settings apply to all posts and pages.', 'fl-builder'), | |
| 'sections' => array( | |
| 'page_heading' => array( | |
| 'title' => __('Default Page Heading', 'fl-builder'), | |
| 'fields' => array( | |
| 'show_default_heading' => array( | |
| 'type' => 'select', | |
| 'label' => _x( 'Show', 'General settings form field label. Intended meaning: "Show page heading?"', 'fl-builder' ), | |
| 'default' => '0', | |
| 'options' => array( | |
| '0' => __('No', 'fl-builder'), | |
| '1' => __('Yes', 'fl-builder') | |
| ), | |
| 'toggle' => array( | |
| '0' => array( | |
| 'fields' => array('default_heading_selector') | |
| ) | |
| ), | |
| 'help' => __('Choosing no will hide the default theme heading for the "Page" post type. You will also be required to enter some basic CSS for this to work if you choose no.', 'fl-builder'), | |
| ), | |
| 'default_heading_selector' => array( | |
| 'type' => 'text', | |
| 'label' => __('CSS Selector', 'fl-builder'), | |
| 'default' => '.fl-post-header', | |
| 'help' => __('Enter a CSS selector for the default page heading to hide it.', 'fl-builder') | |
| ) | |
| ) | |
| ), | |
| 'rows' => array( | |
| 'title' => __('Rows', 'fl-builder'), | |
| 'fields' => array( | |
| 'row_margins' => array( | |
| 'type' => 'unit', | |
| 'label' => __('Margins', 'fl-builder'), | |
| 'default' => '0', | |
| 'placeholder' => '0', | |
| 'responsive' => true, | |
| 'description' => 'px' | |
| ), | |
| 'row_padding' => array( | |
| 'type' => 'unit', | |
| 'label' => __('Padding', 'fl-builder'), | |
| 'default' => '20', | |
| 'placeholder' => '0', | |
| 'responsive' => true, | |
| 'description' => 'px' | |
| ), | |
| 'row_width' => array( | |
| 'type' => 'text', | |
| 'label' => __('Max Width', 'fl-builder'), | |
| 'default' => '1100', | |
| 'maxlength' => '4', | |
| 'size' => '5', | |
| 'description' => 'px', | |
| 'help' => __('All rows will default to this width. You can override this and make a row full width in the settings for each row.', 'fl-builder') | |
| ), | |
| 'row_width_default' => array( | |
| 'type' => 'select', | |
| 'label' => __( 'Default Row Width', 'fl-builder' ), | |
| 'default' => 'fixed', | |
| 'options' => array( | |
| 'fixed' => __( 'Fixed', 'fl-builder' ), | |
| 'full' => __( 'Full Width', 'fl-builder' ) | |
| ), | |
| 'toggle' => array( | |
| 'full' => array( | |
| 'fields' => array('row_content_width_default') | |
| ) | |
| ), | |
| ), | |
| 'row_content_width_default' => array( | |
| 'type' => 'select', | |
| 'label' => __( 'Default Row Content Width', 'fl-builder' ), | |
| 'default' => 'fixed', | |
| 'options' => array( | |
| 'fixed' => __( 'Fixed', 'fl-builder' ), | |
| 'full' => __( 'Full Width', 'fl-builder' ) | |
| ), | |
| ) | |
| ) | |
| ), | |
| 'modules' => array( | |
| 'title' => __('Modules', 'fl-builder'), | |
| 'fields' => array( | |
| 'module_margins' => array( | |
| 'type' => 'unit', | |
| 'label' => __('Margins', 'fl-builder'), | |
| 'default' => '20', | |
| 'placeholder' => '0', | |
| 'responsive' => true, | |
| 'description' => 'px' | |
| ) | |
| ) | |
| ), | |
| 'responsive' => array( | |
| 'title' => __('Responsive Layout', 'fl-builder'), | |
| 'fields' => array( | |
| 'responsive_enabled' => array( | |
| 'type' => 'select', | |
| 'label' => _x( 'Enabled', 'General settings form field label. Intended meaning: "Responsive layout enabled?"', 'fl-builder' ), | |
| 'default' => '1', | |
| 'options' => array( | |
| '0' => __('No', 'fl-builder'), | |
| '1' => __('Yes', 'fl-builder') | |
| ), | |
| 'toggle' => array( | |
| '1' => array( | |
| 'fields' => array('auto_spacing', 'responsive_breakpoint', 'medium_breakpoint') | |
| ) | |
| ) | |
| ), | |
| 'auto_spacing' => array( | |
| 'type' => 'select', | |
| 'label' => _x( 'Enable Auto Spacing', 'General settings form field label. Intended meaning: "Enable auto spacing for responsive layouts?"', 'fl-builder' ), | |
| 'default' => '1', | |
| 'options' => array( | |
| '0' => __('No', 'fl-builder'), | |
| '1' => __('Yes', 'fl-builder') | |
| ), | |
| 'help' => __('When auto spacing is enabled, the builder will automatically adjust the margins and padding in your layout once the small device breakpoint is reached. Most users will want to leave this enabled.', 'fl-builder') | |
| ), | |
| 'medium_breakpoint' => array( | |
| 'type' => 'text', | |
| 'label' => __('Medium Device Breakpoint', 'fl-builder'), | |
| 'default' => '1200', | |
| 'maxlength' => '4', | |
| 'size' => '5', | |
| 'description' => 'px', | |
| 'help' => __('The browser width at which the layout will adjust for medium devices such as tablets.', 'fl-builder') | |
| ), | |
| 'responsive_breakpoint' => array( | |
| 'type' => 'text', | |
| 'label' => __('Small Device Breakpoint', 'fl-builder'), | |
| 'default' => '767', | |
| 'maxlength' => '4', | |
| 'size' => '5', | |
| 'description' => 'px', | |
| 'help' => __('The browser width at which the layout will adjust for small devices such as phones.', 'fl-builder') | |
| ) | |
| ) | |
| ) | |
| ) | |
| ), | |
| 'css' => array( | |
| 'title' => __('CSS', 'fl-builder'), | |
| 'sections' => array( | |
| 'css' => array( | |
| 'title' => '', | |
| 'fields' => array( | |
| 'css' => array( | |
| 'type' => 'code', | |
| 'label' => '', | |
| 'editor' => 'css', | |
| 'rows' => '18', | |
| 'preview' => array( | |
| 'type' => 'none' | |
| ) | |
| ) | |
| ) | |
| ) | |
| ) | |
| ), | |
| 'js' => array( | |
| 'title' => __('JavaScript', 'fl-builder'), | |
| 'sections' => array( | |
| 'js' => array( | |
| 'title' => '', | |
| 'fields' => array( | |
| 'js' => array( | |
| 'type' => 'code', | |
| 'label' => '', | |
| 'editor' => 'javascript', | |
| 'rows' => '18', | |
| 'preview' => array( | |
| 'type' => 'none' | |
| ) | |
| ) | |
| ) | |
| ) | |
| ) | |
| ) | |
| )); | |
| } | |
| return $form; | |
| } |
So 2 arguments are passed in the $form and the $id, so here if global which is the $form is equal to the $id, then please use the new values as below – you can change what values you like – specifically what is different in mine is the media break points and the form title.
This filter fl_builder_register_settings_form can be used anywhere throughout the Beaver Builder plugin to modify the values where the settings forms are available.
Any form registered with ‘FLBuilder::register_settings_form‘ can have the fl_builder_register_settings_form filter applied to it, do a find in the plugin files to see which ones can be filtered.
Merging the Array
One of the issues of doing it the way above is that you are not future proofing any changes that may come in upcoming releases of Global Settings as we have filtered in one monolithic set of options – instead we could merge our changes in with the original settings which can be done with array_merge
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php //<~ don't add me in | |
| add_filter( 'fl_builder_register_settings_form', 'wb_builder_register_settings_form', 10, 2 ); | |
| /** | |
| * Filter the Global Settings Options with array_merge. | |
| * Media breakpoints and form title have been changed. | |
| */ | |
| function wb_builder_register_settings_form( $form, $id ) { | |
| $form2 = array(); | |
| if ( 'global' == $id ) { | |
| // Modify the Global $form config array. | |
| $form2 = array( | |
| 'title' => __( 'Beavertron Global Settings', 'fl-builder' ), | |
| 'tabs' => array( | |
| 'general' => array( | |
| 'title' => __('General', 'fl-builder'), | |
| 'description' => __('<strong>Note</strong>: These settings apply to all posts and pages.', 'fl-builder'), | |
| 'sections' => array( | |
| 'page_heading' => array( | |
| 'title' => __('Default Page Heading', 'fl-builder'), | |
| 'fields' => array( | |
| 'show_default_heading' => array( | |
| 'type' => 'select', | |
| 'label' => _x( 'Show', 'General settings form field label. Intended meaning: "Show page heading?"', 'fl-builder' ), | |
| 'default' => '0', | |
| 'options' => array( | |
| '0' => __('No', 'fl-builder'), | |
| '1' => __('Yes', 'fl-builder') | |
| ), | |
| 'toggle' => array( | |
| '0' => array( | |
| 'fields' => array('default_heading_selector') | |
| ) | |
| ), | |
| 'help' => __('Choosing no will hide the default theme heading for the "Page" post type. You will also be required to enter some basic CSS for this to work if you choose no.', 'fl-builder'), | |
| ), | |
| 'default_heading_selector' => array( | |
| 'type' => 'text', | |
| 'label' => __('CSS Selector', 'fl-builder'), | |
| 'default' => '.fl-post-header', | |
| 'help' => __('Enter a CSS selector for the default page heading to hide it.', 'fl-builder') | |
| ) | |
| ) | |
| ), | |
| 'rows' => array( | |
| 'title' => __('Rows', 'fl-builder'), | |
| 'fields' => array( | |
| 'row_margins' => array( | |
| 'type' => 'unit', | |
| 'label' => __('Margins', 'fl-builder'), | |
| 'default' => '0', | |
| 'placeholder' => '0', | |
| 'responsive' => true, | |
| 'description' => 'px' | |
| ), | |
| 'row_padding' => array( | |
| 'type' => 'unit', | |
| 'label' => __('Padding', 'fl-builder'), | |
| 'default' => '20', | |
| 'placeholder' => '0', | |
| 'responsive' => true, | |
| 'description' => 'px' | |
| ), | |
| 'row_width' => array( | |
| 'type' => 'text', | |
| 'label' => __('Max Width', 'fl-builder'), | |
| 'default' => '1100', | |
| 'maxlength' => '4', | |
| 'size' => '5', | |
| 'description' => 'px', | |
| 'help' => __('All rows will default to this width. You can override this and make a row full width in the settings for each row.', 'fl-builder') | |
| ), | |
| 'row_width_default' => array( | |
| 'type' => 'select', | |
| 'label' => __( 'Default Row Width', 'fl-builder' ), | |
| 'default' => 'fixed', | |
| 'options' => array( | |
| 'fixed' => __( 'Fixed', 'fl-builder' ), | |
| 'full' => __( 'Full Width', 'fl-builder' ) | |
| ), | |
| 'toggle' => array( | |
| 'full' => array( | |
| 'fields' => array('row_content_width_default') | |
| ) | |
| ), | |
| ), | |
| 'row_content_width_default' => array( | |
| 'type' => 'select', | |
| 'label' => __( 'Default Row Content Width', 'fl-builder' ), | |
| 'default' => 'fixed', | |
| 'options' => array( | |
| 'fixed' => __( 'Fixed', 'fl-builder' ), | |
| 'full' => __( 'Full Width', 'fl-builder' ) | |
| ), | |
| ) | |
| ) | |
| ), | |
| 'modules' => array( | |
| 'title' => __('Modules', 'fl-builder'), | |
| 'fields' => array( | |
| 'module_margins' => array( | |
| 'type' => 'unit', | |
| 'label' => __('Margins', 'fl-builder'), | |
| 'default' => '20', | |
| 'placeholder' => '0', | |
| 'responsive' => true, | |
| 'description' => 'px' | |
| ) | |
| ) | |
| ), | |
| 'responsive' => array( | |
| 'title' => __('Responsive Layout', 'fl-builder'), | |
| 'fields' => array( | |
| 'responsive_enabled' => array( | |
| 'type' => 'select', | |
| 'label' => _x( 'Enabled', 'General settings form field label. Intended meaning: "Responsive layout enabled?"', 'fl-builder' ), | |
| 'default' => '1', | |
| 'options' => array( | |
| '0' => __('No', 'fl-builder'), | |
| '1' => __('Yes', 'fl-builder') | |
| ), | |
| 'toggle' => array( | |
| '1' => array( | |
| 'fields' => array('auto_spacing', 'responsive_breakpoint', 'medium_breakpoint') | |
| ) | |
| ) | |
| ), | |
| 'auto_spacing' => array( | |
| 'type' => 'select', | |
| 'label' => _x( 'Enable Auto Spacing', 'General settings form field label. Intended meaning: "Enable auto spacing for responsive layouts?"', 'fl-builder' ), | |
| 'default' => '1', | |
| 'options' => array( | |
| '0' => __('No', 'fl-builder'), | |
| '1' => __('Yes', 'fl-builder') | |
| ), | |
| 'help' => __('When auto spacing is enabled, the builder will automatically adjust the margins and padding in your layout once the small device breakpoint is reached. Most users will want to leave this enabled.', 'fl-builder') | |
| ), | |
| 'medium_breakpoint' => array( | |
| 'type' => 'text', | |
| 'label' => __('Medium Device Breakpoint', 'fl-builder'), | |
| 'default' => '1200', | |
| 'maxlength' => '4', | |
| 'size' => '5', | |
| 'description' => 'px', | |
| 'help' => __('The browser width at which the layout will adjust for medium devices such as tablets.', 'fl-builder') | |
| ), | |
| 'responsive_breakpoint' => array( | |
| 'type' => 'text', | |
| 'label' => __('Small Device Breakpoint', 'fl-builder'), | |
| 'default' => '767', | |
| 'maxlength' => '4', | |
| 'size' => '5', | |
| 'description' => 'px', | |
| 'help' => __('The browser width at which the layout will adjust for small devices such as phones.', 'fl-builder') | |
| ) | |
| ) | |
| ) | |
| ) | |
| ), | |
| 'css' => array( | |
| 'title' => __('CSS', 'fl-builder'), | |
| 'sections' => array( | |
| 'css' => array( | |
| 'title' => '', | |
| 'fields' => array( | |
| 'css' => array( | |
| 'type' => 'code', | |
| 'label' => '', | |
| 'editor' => 'css', | |
| 'rows' => '18', | |
| 'preview' => array( | |
| 'type' => 'none' | |
| ) | |
| ) | |
| ) | |
| ) | |
| ) | |
| ), | |
| 'js' => array( | |
| 'title' => __('JavaScript', 'fl-builder'), | |
| 'sections' => array( | |
| 'js' => array( | |
| 'title' => '', | |
| 'fields' => array( | |
| 'js' => array( | |
| 'type' => 'code', | |
| 'label' => '', | |
| 'editor' => 'javascript', | |
| 'rows' => '18', | |
| 'preview' => array( | |
| 'type' => 'none' | |
| ) | |
| ) | |
| ) | |
| ) | |
| ) | |
| ) | |
| )); | |
| } | |
| $form3 = array_merge($form, $form2); | |
| return $form3; | |
| } | |
So here a new array is defined $form2 and at the end is merged with the original $form to become $form3 which is returned this way any new additions to $form will be available.
Returning the exact values only
If you want to return only the exact values, you can return a shorthand array cascade, so in the respect of just returning the media breakpoints only…
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <?php //<~ don't add me in | |
| add_filter( 'fl_builder_register_settings_form', 'wb_builder_register_settings_form_short', 10, 2 ); | |
| /** | |
| * Filter the Global Settings Options. | |
| * Media breakpoints and form title have been changed. | |
| */ | |
| function wb_builder_register_settings_form_short( $form, $id ) { | |
| if ( 'global' == $id ) { | |
| // Modify the form title and media breakpoints. | |
| $form['title'] = 'Beaverton Global Settings'; | |
| $form['tabs']['general']['sections']['rows']['fields']['row_width']['default'] = '1200'; | |
| $form['tabs']['general']['sections']['responsive']['fields']['responsive_breakpoint']['default'] = '767'; | |
| $form['tabs']['general']['sections']['responsive']['fields']['medium_breakpoint']['default'] = '1200'; | |
| } | |
| return $form; | |
| } |
Also added to the filter above is the value for the max-width on a row – set to 1200px
So this way for just a few changed values is a lot less verbose and cleaner to do – but you need to see the original array first to work out the nested array pattern to add in the new value.
6 comments
Al Avery
I wonder how this might also be applied to the BB child theme’s css. Even though the page builder breakpoints can be adjusted, the theme’s default breakpoints remain at 767px and 1199px. Since the BB theme now supports responsive headings and text style changes it would be ideal if they did so at the breakpoints defined in the page builder – so that the sizing changes occur in tandem. The BB team tells me they are working on a way for that to happen in the future.
Maeve McClelland
HI
I have changed the global settings to have a medium breakpoint of 1100px but it does not seem to change anything. The cache has been cleared and the themes and plugins are up to date. Is there anything that could be overriding these settings? or any reason you have come across that prevents this from working?
Neil Gowran
I use the last example in my child themes which works fine for me – the only thing I do differently than above is to wrap most of my child themes in a after_setup_theme function – see this as an example – https://gist.github.com/neilgee/3ce6489d001a5e0504cd91888c817c60
Craig
Thank you!
Craig
Thank you for this! Just wondering if, in your opinion, adding additional breakpoints is a bad idea for maintaining compatibility with all the BB modules and addon modules. I know I can use media queries, but I’d like to add a couple of native breakpoints for landscape orientation of ipad pro and iphone X.
Neil Gowran
I normally change the existing breakpoints to 767 and 1024, then if needed use additional media queries