Changing the Customizer Values & Presets for the Beaver Builder Theme
Here is a quick way to override the active preset that comes with the Beaver Builder Theme in the Customizer. This may come in handy if you need to start off with your own preset settings and perhaps remove all the other presets so the theme cannot be drastically changed.
You can obviously override the preset settings by changing values afterwards in the customizer, this tutorial looks at changing the actual value settings prior to changing in the customizer.
Override the Active Preset
So to change the initial values of the actual presets is done by using the fl_default_theme_mods filter in which you can pass in new values to the active preset. The filter used is referenced in the class_fl_customizer.php file in the parent theme and applied as below.
add_filter( 'fl_default_theme_mods', 'prefix_default_theme_preset');
// Change the default preset values
function prefix_default_theme_preset( $mods ) {
$mods2 = array(
'fl-layout-width' => 'full-width',
'fl-content-width' => '1020', // Container width
'fl-scroll-to-top' => 'enable',
'fl-body-bg-color' => '#fff',
'fl-accent' => '#c3251d',
'fl-accent-hover' => '#999999',
'fl-heading-text-color' => '#555555',
'fl-topbar-bg-color' => '#222222',
'fl-topbar-text-color' => '#cccccc',
'fl-topbar-link-color' => '#999999',
'fl-topbar-hover-color' => '#ffffff',
'fl-header-bg-color' => '#000',
'fl-header-text-color' => '#cccccc',
'fl-header-link-color' => '#999999',
'fl-header-hover-color' => '#ffffff',
'fl-nav-bg-color' => '#000000',
'fl-nav-link-color' => '#cccccc',
'fl-nav-hover-color' => '#ffffff',
'fl-footer-widgets-bg-color' => '#000000',
'fl-footer-widgets-text-color' => '#cccccc',
'fl-footer-widgets-link-color' => '#999999',
'fl-footer-widgets-hover-color' => '#ffffff',
'fl-footer-bg-color' => '#000000',
'fl-footer-text-color' => '#cccccc',
'fl-footer-link-color' => '#999999',
'fl-footer-hover-color' => '#ffffff',
'fl-h1-font-size' => '36',
'fl-h2-font-size' => '30',
'fl-h3-font-size' => '24',
'fl-h4-font-size' => '20',
'fl-h5-font-size' => '18',
'fl-h6-font-size' => '16',
'fl-body-text-color' => '#555555',
'fl-body-font-weight' => '400',
'fl-body-font-size' => '18',
'fl-body-line-height' => '1.3'
);
$mods3 = array_merge($mods, $mods2);
return $mods3;
}
In this filter I have used array_merge to merge a new array which is a variable named $mods2 and merged it with the original array $mods to produce $mods3 which is then filtered as the new set of values which you will see in the backend in the customizer.
Add as little or as many keys and values as you like. If you make changes to the array, before you select the preset it won’t show straight away you will need to toggle to another preset and back again to show the new value.
The values used above are not exhaustive, you can see all of them in the parent theme in customizer-presets.php file. Just merge in the ones you need. The code snippets are added into your childs’ theme functions.php
For a full list of available theme mods in the presets see the end of the article.
Removing other complete Presets
You can optionally remove other presets apart from the default one if you have no need for them, there are nine other presets that come bundled with the theme other than than the default one. You can also even add your own completely new preset. Here is how to remove the existing ones, which is done with FLCustomizer.
add_action( 'after_setup_theme', 'prefix_remove_all_presets', 11 );
function prefix_remove_all_presets() {
//Remove all the builtin presets apart from default.
FLCustomizer::remove_preset(
array('default-dark' , 'classic' , 'modern' , 'bold' ,
'stripe' , 'deluxe' , 'premier' , 'dusk' , 'midnight'
)
);
}
S0 the other presets are removed by adding them to the array, you can choose to get rid of them all, some or just leave them all as is.
However one important thing is to leave one other preset, as if you will be further changing the default you need to toggle to another preset and back to make the new changes kick in.
Setting a Preset As Permanently Active
You can set a preset as the active preset permanently so it cannot be changed.
set_theme_mod( 'fl-preset', 'yourpresetname' );
Pass the preset name in to set_theme_mod
Removing parts of the preset from view in the Customizer
You can further refine which items are visible in the active preset (and other presets) in the Customizer.
add_action( 'customize_register', 'prefix_remove_parts_customizer', 20 );
/**
* Register for the Customizer
*/
function prefix_remove_parts_customizer( $wp_customize ) {
//Remove Panels and Sections by uncommenting.
$wp_customize->remove_section( 'fl-presets' );
$wp_customize->remove_panel( 'fl-general' );
$wp_customize->remove_section( 'fl-layout' );
$wp_customize->remove_section( 'fl-body-bg' );
$wp_customize->remove_section( 'fl-accent-color' );
$wp_customize->remove_section( 'fl-heading-font' );
$wp_customize->remove_section( 'fl-body-text' );
$wp_customize->remove_panel( 'fl-header' );
$wp_customize->remove_section( 'fl-topbar-layout' );
$wp_customize->remove_section( 'fl-topbar-style' );
$wp_customize->remove_section( 'fl-header-layout' );
$wp_customize->remove_section( 'fl-header-style' );
$wp_customize->remove_section( 'fl-header-logo' );
$wp_customize->remove_section( 'fl-nav-layout' );
$wp_customize->remove_section( 'fl-nav-style' );
$wp_customize->remove_panel( 'fl-content' );
$wp_customize->remove_section( 'fl-content-bg ' );
$wp_customize->remove_section( 'fl-content-blog' );
$wp_customize->remove_section( 'fl-content-archives' );
$wp_customize->remove_section( 'fl-content-posts' );
$wp_customize->remove_section( 'fl-content-woo' );
$wp_customize->remove_section( 'fl-lightbox-layout' );
$wp_customize->remove_panel( 'fl-footer' );
$wp_customize->remove_section( 'fl-footer-widgets-layout' );
$wp_customize->remove_section( 'fl-footer-widgets-style' );
$wp_customize->remove_section( 'fl-footer-layout' );
$wp_customize->remove_section( 'fl-footer-style' );
$wp_customize->remove_section( 'fl-footer-effect' );
$wp_customize->remove_panel( 'fl-code' );
$wp_customize->remove_section( 'fl-css-code-section' );
$wp_customize->remove_section( 'fl-js-code-section' );
$wp_customize->remove_section( 'fl-head-code-section' );
$wp_customize->remove_section( 'fl-header-code-section' );
$wp_customize->remove_section( 'fl-footer-code-section' );
$wp_customize->remove_panel( 'fl-settings' );
$wp_customize->remove_section( 'fl-social-links' );
$wp_customize->remove_section( 'title_tagline' );
$wp_customize->remove_section( 'static_front_page' );
// $wp_customize->remove_panel( 'nav_menus' );
// $wp_customize->remove_section( 'custom_css' );
// $wp_customize->remove_panel( 'widgets' );
// $wp_customize->remove_section( 'fl-export-import' );
}
This is done with the customize_register action, I have listed all of the Customizer panels and sections that correspond to what you see in the Customizer if you used the code snippet as it is above it would remove everything apart from the last 3 items, you wouldn’t want to remove all, so you just comment out // which values what you want to show.
I have indented the code snippet in a way to show the parent panel and then the sections that belong to it.
The Beaver Theme makes a lot of use of the customizer, sure you can override everything in your child CSS style but it also makes sense to work with the customizer and set a lot of CSS there so overall you are reducing the amount of CSS output.
List of all settings that can be used in the preset
'fl-layout-width' => full-width,
'fl-content-width' => 1020,
'fl-layout-spacing' => 0,
'fl-layout-shadow-size' => 0,
'fl-layout-shadow-color' => #d9d9d9,
'fl-scroll-to-top' => enable,
'fl-body-bg-color' => #fff,
'fl-body-bg-image' => ,
'fl-body-bg-repeat' => no-repeat,
'fl-body-bg-position' => center top,
'fl-body-bg-attachment' => scroll,
'fl-body-bg-size' => auto,
'fl-accent' => #c3251d,
'fl-accent-hover' => #666666,
'fl-heading-text-color' => #555555,
'fl-heading-font-family' => Helvetica,
'fl-heading-font-weight' => 400,
'fl-heading-font-format' => none,
'fl-heading-font-line1' => ,
'fl-h1-font-size' => 36,
'fl-h1-line-height' => 1.4,
'fl-h1-letter-spacing' => 0,
'fl-h1-line' => ,
'fl-h2-font-size' => 30,
'fl-h2-line-height' => 1.4,
'fl-h2-letter-spacing' => 0,
'fl-h2-line' => ,
'fl-h3-font-size' => 24,
'fl-h3-line-height' => 1.4,
'fl-h3-letter-spacing' => 0,
'fl-h3-line' => ,
'fl-h4-font-size' => 20,
'fl-h4-line-height' => 1.4,
'fl-h4-letter-spacing' => 0,
'fl-h4-line' => ,
'fl-h5-font-size' => 18,
'fl-h5-line-height' => 1.4,
'fl-h5-letter-spacing' => 0,
'fl-h5-line' => ,
'fl-h6-font-size' => 16,
'fl-h6-line-height' => 1.4,
'fl-h6-letter-spacing' => 0,
'fl-body-text-color' => #555555,
'fl-body-font-family' => -apple-system,
'fl-body-font-weight' => 300,
'fl-body-font-size' => 18,
'fl-body-line-height' => 1.6,
'fl-social-icons-color' => mono,
'fl-social-facebook' => http: //facebook.com,
'fl-social-twitter' => ,
'fl-social-google' => ,
'fl-social-linkedin' => ,
'fl-social-yelp' => ,
'fl-social-xing' => ,
'fl-social-pinterest' => ,
'fl-social-tumblr' => ,
'fl-social-vimeo' => ,
'fl-social-youtube' => ,
'fl-social-flickr' => ,
'fl-social-instagram' => ,
'fl-social-skype' => ,
'fl-social-dribbble' => ,
'fl-social-500px' => ,
'fl-social-blogger' => ,
'fl-social-github' => ,
'fl-social-rss' => ,
'fl-social-email' => ,
'fl-topbar-layout' => none,
'fl-topbar-line1' => ,
'fl-topbar-col1-layout' => text,
'fl-topbar-col1-text' => ,
'fl-topbar-line2' => ,
'fl-topbar-col2-layout' => menu,
'fl-topbar-col2-text' => ,
'fl-topbar-bg-color' => #222222,
'fl-topbar-bg-opacity' => 100,
'fl-topbar-bg-gradient' => 0,
'fl-topbar-bg-image' => ,
'fl-topbar-bg-repeat' => no-repeat,
'fl-topbar-bg-position' => center top,
'fl-topbar-bg-attachment' => scroll,
'fl-topbar-bg-size' => auto,
'fl-topbar-text-color' => #cccccc,
'fl-topbar-link-color' => #999999,
'fl-topbar-hover-color' => #ffffff,
'fl-header-layout' => right,
'fl-inline-logo-side' => right,
'fl-vertical-header-width' => 230,
'fl-header-padding' => 30,
'fl-fixed-header' => fadein,
'fl-hide-until-scroll-header' => disable,
'fl-scroll-distance' => 200,
'fl-header-line1' => ,
'fl-header-content-layout' => social-text,
'fl-header-content-text' => Call Us! 1-800-555-5555,
'fl-header-bg-color' => #000,
'fl-header-bg-opacity' => 100,
'fl-nav-shadow-size' => 4,
'fl-nav-shadow-color' => #cecece,
'fl-header-bg-gradient' => 0,
'fl-header-bg-image' => ,
'fl-header-bg-repeat' => no-repeat,
'fl-header-bg-position' => center top,
'fl-header-bg-attachment' => scroll,
'fl-header-bg-size' => auto,
'fl-header-text-color' => #cccccc,
'fl-header-link-color' => #999999,
'fl-header-hover-color' => #ffffff,
'fl-logo-type' => text,
'fl-logo-image' => ,
'fl-logo-image-retina' => ,
'fl-sticky-header-logo' => ,
'fl-logo-text' => beavertron.dev,
'fl-logo-font-family' => Helvetica,
'fl-logo-font-weight' => 400,
'fl-logo-font-size' => 30,
'fl-header-logo-top-spacing' => 50,
'fl-nav-item-spacing' => 15,
'fl-nav-menu-top-spacing' => 30,
'fl-nav-item-align' => left,
'fl-header-nav-search' => visible,
'fl-mobile-nav-toggle' => button,
'fl-nav-breakpoint' => mobile,
'fl-nav-submenu-indicator' => disable,
'fl-nav-bg-color' => #000000,
'fl-nav-bg-opacity' => 100,
'fl-nav-bg-gradient' => 0,
'fl-nav-bg-image' => ,
'fl-nav-bg-repeat' => no-repeat,
'fl-nav-bg-position' => center top,
'fl-nav-bg-attachment' => scroll,
'fl-nav-bg-size' => auto,
'fl-nav-link-color' => #cccccc,
'fl-nav-hover-color' => #ffffff,
'fl-nav-font-family' => Helvetica,
'fl-nav-font-weight' => 400,
'fl-nav-font-format' => none,
'fl-nav-font-size' => 16,
'fl-content-bg-color' => #ffffff,
'fl-content-bg-opacity' => 100,
'fl-content-bg-image' => ,
'fl-content-bg-repeat' => no-repeat,
'fl-content-bg-position' => center top,
'fl-content-bg-attachment' => scroll,
'fl-content-bg-size' => auto,
'fl-blog-layout' => sidebar-right,
'fl-blog-sidebar-size' => 3,
'fl-blog-custom-sidebar-size' => 25,
'fl-blog-sidebar-display' => desktop,
'fl-blog-sidebar-location' => single,blog,search,archive,
'fl-blog-sidebar-location-post-types' => all,
'fl-blog-line1' => ,
'fl-blog-post-author' => hidden,
'fl-blog-post-date' => visible,
'fl-blog-comment-count' => visible,
'fl-archive-show-full' => 0,
'fl-archive-readmore-text' => Read More,
'fl-archive-show-thumbs' => beside,
'fl-archive-thumb-size' => beside,
'fl-posts-show-thumbs' => ,
'fl-posts-thumb-size' => thumbnail,
'fl-posts-show-cats' => visible,
'fl-posts-show-tags' => visible,
'fl-posts-show-nav' => hidden,
'fl-post-author-box' => hidden,
'fl-woo-layout' => no-sidebar,
'fl-woo-sidebar-size' => 4,
'fl-woo-custom-sidebar-size' => 25,
'fl-woo-sidebar-display' => desktop,
'fl-woo-sidebar-location' => single,shop,
'fl-woo-line1' => ,
'fl-woo-columns' => 4,
'fl-woo-line2' => ,
'fl-woo-gallery' => enabled,
'fl-woo-line3' => ,
'fl-woo-cart-button' => hidden,
'fl-woo-line4' => ,
'fl-woo-css' => enabled,
'fl-lightbox' => enabled,
'fl-footer-widgets-display' => all,
'fl-footer-widgets-bg-color' => #000000,
'fl-footer-widgets-bg-opacity' => 100,
'fl-footer-widgets-bg-gradient' => 0,
'fl-footer-widgets-bg-image' => ,
'fl-footer-widgets-bg-repeat' => no-repeat,
'fl-footer-widgets-bg-position' => center top,
'fl-footer-widgets-bg-attachment' => scroll,
'fl-footer-widgets-bg-size' => auto,
'fl-footer-widgets-text-color' => #cccccc,
'fl-footer-widgets-link-color' => #999999,
'fl-footer-widgets-hover-color' => #ffffff,
'fl-footer-layout' => 1-col,
'fl-footer-line1' => ,
'fl-footer-col1-layout' => text,
'fl-footer-col1-text' => ,
'fl-footer-line2' => ,
'fl-footer-col2-layout' => text,
'fl-footer-col2-text' => 1-800-555-5555 • [email protected],
'fl-footer-bg-color' => #000000,
'fl-footer-bg-opacity' => 100,
'fl-footer-bg-gradient' => 0,
'fl-footer-bg-image' => ,
'fl-footer-bg-repeat' => no-repeat,
'fl-footer-bg-position' => center top,
'fl-footer-bg-attachment' => scroll,
'fl-footer-bg-size' => auto,
'fl-footer-text-color' => #cccccc,
'fl-footer-link-color' => #999999,
'fl-footer-hover-color' => #ffffff,
'fl-footer-parallax-effect' => disable,
'fl-css-code' => ,
'fl-js-code' => ,
'fl-head-code' => ,
'fl-header-code' => ,
'fl-footer-code' => ,
'fl-favicon' => ,
'fl-apple-touch-icon' =>,
Thats a lora lora presets.
