This plugin integrates GeneratePress's Global Color Palette with Beaver Builder, allowing you to maintain consistent branding across your website when WordPress Global Styles are disabled.
It automatically makes your GeneratePress theme Global Color Palette available in Beaver Builder's color picker ensuring color consistency throughout your site.
The plugin provides two main functions:
-
Color Integration: Makes your GeneratePress Global Colors automatically available in Beaver Builder's color picker by adding the correct block editor prefix '--wp--preset--color--'.
-
Color Documentation: Includes a shortcode
[gp_global_color_grid]
for use on a style guide which creates a visual display of your color palette, perfect for style guides or documentation pages.
The plugin works automatically once activated. You don't need to:
- Set up a separate Global Color Palette in Beaver Builder
- Make any changes to your existing GeneratePress color settings
- Configure any plugin settings
Just set your colors in GeneratePress, and they'll be available in Beaver Builder's color picker automatically.
To display your color palette anywhere on your site, use the shortcode:
[gp_global_color_grid]
This creates a responsive grid showing all your GeneratePress Global Colors with their names, CSS variables, and hex values.
When installing this plugin from GitHub:
- Go to the Releases page
- Download the latest release ZIP file
- Extract the ZIP file on your computer
- Rename the extracted folder to remove the version number
(e.g., from
gp-beaver-colors-0.3.0
togp-beaver-colors
) - Create a new ZIP file from the renamed folder
- In your WordPress admin panel, go to Plugins → Add New → Upload Plugin
- Upload your new ZIP file and activate the plugin
- Plugin should then auto-update moving forward if there are any changes.
Note: The folder renaming step is necessary for WordPress to properly handle plugin updates and functionality.
- GeneratePress theme
- Beaver Builder plugin
- WordPress Global Styles disabled (recommended for performance)
For optimal performance, add this code to your theme's functions.php file or use something like Perfmatters.
add_action("wp_enqueue_scripts", "remove_global_styles");
function remove_global_styles()
{
wp_dequeue_style("global-styles");
For more information about removing global inline styles, see: https://perfmatters.io/docs/remove-global-inline-styles-wordpress/
- Added color grid shortcode for displaying color palettes in style guides
- Updated plugin name for clarity
- Improved code organization and inline documentation
- Enhanced compatibility checks
- Minified CSS output for better performance
- Removed unnecessary comments and whitespace in generated styles