Add new style options
Adding new style options The following hook will allow the add of a new accordion option inside the styling tab of every elements of the builder add_action( ‘zionbuilder/schema/style_options’, [ $this, ‘add_style_options’ ] );public function add_style_options( $options ) {$my_accordion = $options->get_option( ‘_styles.pseudo_selectors’ );if ( $my_acc ) { $this->attach_my_options( $my_accordion );}}public function attach_my_options( $options ) { $options->add_option( ‘new-option’, [ ‘type’ => ‘accordion_menu’, ‘title’ => __( ‘My option’, ‘zionbuilder-pro’ ), ‘description’ => __( ‘My option contains’, ‘zionbuilder-pro’ ), ] ); }
Default options structure
Every option has the following default arguments: Name Type Default Description type * String Name of the vue component description String Text that appears on popup explaining what the option does. title * String Text that displays as a title above the option * Mandatory argument They also support the following arguments which are optional: […]
text
The following extra arguments may be added to the option id ‘text’ Name Type Default Description dynamic Array The text option supports dynamic content such as post title, excerpt, post id etc. $options->add_option( ‘option_text’, [ ‘type’ => ‘text’, ‘description’ => __( ‘Set text description’, ‘zionbuilder’ ), ‘title’ => __( ‘Title text’, ‘zionbuilder’ ), ‘dynamic’ => […]
colorpicker
The following extra attributes can be added to the option: Name Type Default Description showLibrary Boolean true The property shows the library of colors or not. Below is the following example of how the option can be used public function options( $options ) { $options->add_option( ‘stroke_color’, [ ‘type’ => ‘colorpicker’, ‘title’ => __( ‘Line color’, ‘zionbuilder’ ), ‘layout’ => ‘inline’, ‘default’ =>’#06bee1′, ‘css_style’ => [ [ ‘selector’ => ‘{{ELEMENT}} .className’, ‘value’ => ‘border-top-color: {{VALUE}}’, ], ], ] ); […]
slider
This option allows user to show a slider for easily input a number value. It supports the following properties: Name Type Default Description min Number The property shows the minimum input value max Number The property shows the maximum input value step Number 1 Step to the next value shiftStep Number 10 Step when pressing shift key content String […]
dynamic_slider
This option allows the user to add a number value with a unit. It supports the following properties: Name Type Default Description options Array The property allows multiple number types. Example: [ [ ‘unit’ => ‘px’, ‘min’ => 0, ‘max’ => 9999, ‘step’ => 1, ],] default String The property adds the default value for number and unit:’default’ => ‘100%’, Below is the following example of how the […]
select
This option displays a select input and it has the following properties: Name Type Default Description options Array The property allows multiple number types. Example: [ [ ‘id’ => ‘option_id’, ‘name’ => esc_html__( ‘Option’, ‘zionbuilder’ ), ], ] default String The property adds the default value:’default’ => ‘option_id’, Below is the following example of how the option can be used: $options->add_option( ‘option_name’, [ ‘type’ => ‘select’, ‘description’ => esc_html__( ‘Select the desired’, ‘zionbuilder’ ), ‘title’ => esc_html__( ‘Title’, ‘zionbuilder’ ), ‘default’ => ‘option_id_1’, ‘options’ => [ [ […]
image
Option type image supports the following properties: Name Type Default Description show_size Boolean false The property shows also the image width and height emptyText String ‘No Image Selected’ Text to appear when no image selected $options->add_option( ‘image’, [ ‘type’ => ‘image’, ‘id’ => ‘image’, ‘description’ => ‘Choose the desired image.’, ‘title’ => esc_html__( ‘Image’, ‘zionbuilder’ ), ‘show_size’ => true, ‘default’ => [ ‘image’ => Utils::get_file_url( ‘assets/img/no-image.jpg’ ), ], ] );
custom_selector
Name Type Default Description columns Number The property allows multiple number types. Example:’columns’ => 2, options Array Supported properties are: id name icon $options->add_option( ‘show_user’, [ ‘type’ => ‘custom_selector’, ‘title’ => __( ‘Show user?’, ‘zionbuilder’ ), ‘columns’ => 2, ‘options’ => [ [ ‘name’ => __( ‘Yes’, ‘zionbuilder’ ), ‘id’ => true, ], [ ‘name’ => __( […]
image_gallery
This option allows the user to add multiple images. It supports the following properties: Name Type Default Description preview_holder String The String which will appear as a placeholder button_title String The string which will appear on the button
Render attributes
The function is used to render custom attributes on an element such as classes and data-attrbiutes. It supports the following properties: Name Type Default Description tag_id String ‘wrapper’ Creates render attribute for tag id if doesn’t exists attribute String ‘class’ Adds an attribute to the tag_id value String Adds the value to the mentioned attribute In php files, render attributes function is used […]
Options helpers
When rendering attributes, the following parameters will be replaced with the saved value. {{ELEMENT}} {{ELEMENT}} will register the style options for the wrapper For example, when adding css_style, {{ELEMENT}} will be replaced by the generated ID : $options->add_option( ‘title_border_color’, [ ‘type’ => ‘colorpicker’, ‘width’ => 50, ‘title’ => __( ‘Title border color’, ‘zionbuilder’ ), ‘css_style’ => [ [ ‘selector’ => ‘{{ELEMENT}} .zb-el-alert__title’, ‘value’ => ‘border-color: {{VALUE}}’, ], ], ] ); This code will compile the following css: #uid680420617611 .zb-el-alert__title { border-color: hsl(53, […]
