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/