Beaver Builder 2.1.4+ CSS class selector integration

beaver-builder-css-class-selector.php

<?php

// START COPYING HERE...
// Requires Beaver Builder v2.1.4 and newer!

/**
 * Populates CSS classes dropdown selector with custom classes selection.
 *
 * Hooks onto `fl_builder_field_js_config` filter hook. See Beaver Builder code directly
 * for filter hook attributes (in `classes/class-fl-builder-ui-settings-forms.php` file).
 *
 * @param  array  $field      An array of setup data for the field.
 * @param  string $field_key  The field name/key.
 */
function beaver_builder_css_class_dropdown( $field, $field_key ) {

	// Processing

		if ( 'class' == $field_key ) {
			$field['options'] = array(

				/*
				 * First value must be empty, it's mandatory!
				 * To prevent any possible "automatic" CSS class setup (taken from the first
				 * value of dropdown selector).
				 */
				'' => esc_html__( '- Choose from predefined classes -', 'textdomain' ),

				// Optgroup 1

					'optgroup-id-1' => array(
						'label'   => esc_html__( 'Optgroup 1 title:', 'textdomain' ),
						'options' => array(
							'my-class-1' => esc_html__( 'My custom class 1', 'textdomain' ),
							'my-class-2' => esc_html__( 'My custom class 1', 'textdomain' ),
						),
					),

				// Optgroup 2

					'optgroup-id-2' => array(
						'label'   => esc_html__( 'Optgroup 2 title:', 'textdomain' ),
						'options' => array(
							'my-class-3' => esc_html__( 'My custom class 3', 'textdomain' ),
						),
					),

			);
		}


	// Output

		return $field;

} // /beaver_builder_css_class_dropdown
		
add_filter( 'fl_builder_field_js_config', 'beaver_builder_css_class_dropdown', 10, 2 );

// ...STOP COPYING HERE. NOW YOU CAN INSERT THE CODE INTO YOUR PHP FILE.

What is this and how to use?

Description

Since Beaver Builder 2.1.4 it is possible to set up custom CSS classes for a helper dropdown selector displayed below the "Class" field in Beaver Builder row/column/module settings form. That way users do not need to remember the custom CSS classes, they can simply select them from the dropdown and the class will be inserted into the "Class" field.

Implementation

This code is an example of how to set up the custom CSS classes dropdown selector in a theme or a plugin. CSS classes are grouped in optgroups in this example, but that is optional.

To integrate the code into your theme/plugin, just copy and paste it into a PHP file in your theme/plugin (and don't forget to remove the opening <?php if necessary then).

Make sure to change the textdomain to match your theme/plugin one, and tweak the code to your needs ;)

License

Licensed under GPL