A User Friendly Customizer for the Beaver Builder Theme

 

Now that we are using Beaver Themer for most header,footers, archive and single post pages I thought it was time to look again at what the Beaver Builder Theme adds to the WordPress customizer. For a long time I have not been using Beaver Builders theme presets and have hidden that section from the customizer. Also I been getting frustrated with colour picking in the customizer particularly when it comes to hover states.

Fortunately the WordPress API allows us to make changes (so anything shown here could be done with other themes). However I use the Beaver Builder theme which has good knowledge base documentation to help.

Remove Beaver Builder Customizer Panels and Sections

Add to the child themes functions.php file.

// Custom Action (remove BB theme customizer options when using Beaver Themer)

function my_customize_register() {
global $wp_customize;
// Remove Panels
$wp_customize->remove_panel( 'fl-header' );
$wp_customize->remove_panel( 'fl-footer' );
$wp_customize->remove_panel( 'fl-content' );
$wp_customize->remove_panel( 'widgets' );
// Remove Sections
$wp_customize->remove_section( 'fl-presets' );
$wp_customize->remove_section( 'fl-social-links' );
// Rename Panels
$wp_customize->get_panel('fl-general')->title = __( 'General (Branding)' );
// Rename Sections
$wp_customize->get_section('fl-heading-font')->title = __( 'Heading Text' );
$wp_customize->get_section('fl-body-font')->title = __( 'Body Text' );
}
add_action( 'customize_register', 'my_customize_register', 11 );

Hide the Themer Notice and added Custom styling

Add to the child themes functions.php file ( thanks to Jamie from the BB team for tweaking my snippet)

// Hides Beaver Themers header/footer note with CSS and can be used for other customizer styles
add_action( 'customize_controls_print_styles', function() { 
?> 
<style> 
#theme-builder-header-footer-message { 
display: none; 
} 
</style>
<?php
}, 999);

 

Adding a Colour Palette to the Customizer (any theme)

Add to the child themes functions.php file.

//Change the Customizer color palette presets
add_action('customize_controls_print_footer_scripts', function () {
?>
<script>
jQuery(document).ready(function($){
$('.wp-picker-container').iris({
mode: 'hsl',
controls: { 
horiz: 'h', // square horizontal displays hue
vert: 's', // square vertical displays saturation
strip: 'l' // slider displays lightness
},
palettes: ['#333','#000','#FFF','#F0F0F0','#21C2F8', '#1cbaef','#95C623','#81b220']
})
});
</script>
<?php
});

 

Note: “Color Sync” from Beaver.Team Pro Plugin   is a much better solution as it automatically make makes colours set in  the page builder available in the customizer (and visa versa). Genius!

I am not an affiliate, but Tom from  www.beaver.team kindly give us this (updated since the video) 20% off coupon “Junction”.  It will  last for the rest of the 2018.  I will do something later on his pro plugin, but Bulk Updates is amazing.

 

Links:

https://kb.wpbeaverbuilder.com/article/357-remove-a-customizer-panel
https://kb.wpbeaverbuilder.com/article/553-add-color-presets-to-customizer
https://developer.wordpress.org/themes/customize-api/customizer-objects/
https://aristath.github.io/blog/modifying-wordpress-customizer
https://www.beaver.team/product/beaver-team-pro/

david-waumsley-web-developer-150x150-circle

David Waumsley

A British chap who helps with websites and whatnot.  Some refer to him as a digital nomad, but he will accepts the term "fugitive" or "international bag lady".  He actually builds websites for a living. Yeah, I know!

Leave a Comment