Module Settings Groups
Learn how to configure the toggle groups in the module settings modal.
Note: This tutorial series is intended for advanced users. At least a basic understanding of coding in PHP and JavaScript is required.
When editing modules inside the Divi Builder, their settings appear in collapsable groups . You can assign a setting to a specific group using the toggle_slug parameter in the setting definition. You can use one of the builder』s predefined settings groups or you can use a custom group.
Predefined Settings Groups
The following groups are predefined and can be used by simply including one of their slugs as the toggle_slug parameter in a setting definition.
Display Name
Slug
Admin Label
admin_label
Alignment
alignment
Animation
animation
Arrows Color
arrows_color
Attributes
attributes
Audio
audio
Background
background
Bar Counter
bar
Body Text
body
Border
border
Box Shadow
box_shadow
Bullet
bullet
Button One
button_one
Button Two
button_two
Button
button
CSS ID & Classes
classes
Caption Text
caption
Categories
categories
Circle
circle
Color
color
Conditional Logic
conditional_logic
Content Text
content
Controls Colors
colors
Controls
controls
Currency & Frequency Text
currency_frequency
Custom CSS
custom_css
Dividers
dividers
Dropdown Menu
dropdown
Elements
elements
Email Account
provider
Email
email
Exceptions
exceptions
Excluded Item
excluded
Featured Image
featured_image
Field Options
field_options
Field Text
form_field
Fields
fields
Filter Criteria Text
filter
Filters
filters
Icon
icon
Image & Icon
icon_settings
Image & Video
image_video
Images
images
Image
image
Input Text
input
Label Text
label
Layout
layout
Links
links
Link
link
Map
child_filters
Map
map
Menu Text
menu
Meta Text
meta
Module Text
module
Navigation
navigation
Number Text
number
Numbers Text
numbers
Overlay
overlay
Pagination Text
pagination
Percentage Text
percent
Play Icon
play_icon
Player Pause
player_pause
Portfolio Title Text
portfolio_header
Price Text
price
Redirect
redirect
Result Message Text
result_message
Rotation
rotation
Sale Badge
badge
Scroll Down Icon
scroll_down
Search Field
field
Sizing
width
Spacing
margin_padding
State
state
Styles
styles
Subhead Text
subhead
Subheader Text
subheader
Success Action
success_action
Tab Text
tab
Text
main_content
Text
text
Title Text
header
Title Text
title
Toggle Text
toggle
Visibility
visibility
Custom Settings Groups
Settings can be assigned to a custom group in the same way that you would assign them to predefined groups. However, you must also define all custom groups in the get_settings_modal_toggles() method of your module』s PHP class.
Settings Group Definition
tab_slug (array)
toggles (array) — All settings group definitions for the tab
toggle_slug (array) — Settings group definition
priority (int) — Groups are sorted based on this number (from lowest to highest)
sub_toggles (array) — Sub groups for this group (optional)
sub_toggle_slug (array) — Sub group definition
icon (string) — The slug of a predefined icon (optional)
icon_svg (string) — Raw SVG icon (optional)
name (string) — Display Name (only shown when no icon is defined)
tabbed_subtoggles (bool) — Whether or not to display sub groups as tabs
title (string) — Display name (localized)
Custom Settings Groups Example
array(
'label' => esc_html__('Add Mushroom?', 'simp-simple-extension'),
'type' => 'yes_no_button',
'option_category' => 'basic_option',
'description' => esc_html__('Toggle whether mushroom will be added to the pizza.', 'simp-simple-extension'),
'toggle_slug' => 'pizza',
'options' => array(
'on' => esc_html__( 'Yes', 'simp-simple-extension'),
'off' => esc_html__( 'No', 'simp-simple-extension'),
),
'sub_toggle' => 'pizza_toppings_mushroom',
),
'quantity_toppings_mushroom' => array(
'label' => esc_html__('How Much Mushroom?', 'simp-simple-extension'),
'type' => 'range',
'option_category' => 'basic_option',
'description' => esc_html__('Dropdown menu with various options.', 'simp-simple-extension'),
'toggle_slug' => 'pizza',
'range_settings' => array(
'min' => '1',
'max' => '5',
'step' => '1',
),
'show_if' => array(
'toggle_toppings_mushroom' => 'on',
),
'sub_toggle' => 'pizza_toppings_mushroom',
),
'toggle_toppings_anchovy' => array(
'label' => esc_html__('Add Anchovies?', 'simp-simple-extension'),
'type' => 'yes_no_button',
'option_category' => 'basic_option',
'description' => esc_html__('Toggle whether anchovies will be added to the pizza.', 'simp-simple-extension'),
'toggle_slug' => 'pizza',
'options' => array(
'on' => esc_html__( 'Yes', 'simp-simple-extension'),
'off' => esc_html__( 'No', 'simp-simple-extension'),
),
'sub_toggle' => 'pizza_toppings_anchovy',
),
'quantity_toppings_anchovy' => array(
'label' => esc_html__('How Many Anchovies?', 'simp-simple-extension'),
'type' => 'range',
'option_category' => 'basic_option',
'description' => esc_html__('Dropdown menu with various options.', 'simp-simple-extension'),
'toggle_slug' => 'pizza',
'range_settings' => array(
'min' => '1',
'max' => '30',
'step' => '1',
),
'show_if' => array(
'toggle_toppings_anchovy' => 'on',
),
'sub_toggle' => 'pizza_toppings_anchovy',
),
'toggle_toppings_pineapple' => array(
'label' => esc_html__('Add Pineapple?', 'simp-simple-extension'),
'type' => 'yes_no_button',
'option_category' => 'basic_option',
'description' => esc_html__('Toggle whether pineapple will be added to the pizza.', 'simp-simple-extension'),
'toggle_slug' => 'pizza',
'options' => array(
'on' => esc_html__( 'Yes', 'simp-simple-extension'),
'off' => esc_html__( 'No', 'simp-simple-extension'),
),
'default' => 'on',
'sub_toggle' => 'pizza_toppings_pineapple',
),
'quantity_toppings_pineapple' => array(
'label' => esc_html__('How Much Pineapple?', 'simp-simple-extension'),
'type' => 'range',
'option_category' => 'basic_option',
'description' => esc_html__('Dropdown menu with various options.', 'simp-simple-extension'),
'toggle_slug' => 'pizza',
'range_settings' => array(
'min' => '1',
'max' => '9001',
'step' => '1',
),
'default' => '9001',
'show_if' => array(
'toggle_toppings_pineapple' => 'on',
),
'sub_toggle' => 'pizza_toppings_pineapple',
),
'toppings_other' => array(
'label' => esc_html__('Content', 'simp-simple-extension'),
'type' => 'text',
'option_category' => 'basic_option',
'description' => esc_html__('Add any special requests for toppings not in the list.', 'simp-simple-extension'),
'toggle_slug' => 'pizza',
'sub_toggle' => 'pizza_toppings_other',
),
);
}
public function get_settings_modal_toggles() {
return array(
'advanced' => array(
'toggles' => array(
'pizza' => array(
'priority' => 24,
'sub_toggles' => array(
'pizza_toppings_mushroom' => array(
'name' => 'Mushroom',
'icon_svg' => '',
),
'pizza_toppings_anchovy' => array(
'name' => 'Anchovies',
'icon_svg' => '',
),
'pizza_toppings_pineapple' => array(
'name' => 'Pineapple',
'icon_svg' => '',
),
'pizza_toppings_other' => array(
'name' => 'Other',
'icon' => 'text-quote',
),
),
'tabbed_subtoggles' => true,
'title' => 'Special Toppings',
),
),
),
);
}
...
view raw
settings-groups--custom-settings-groups.php
hosted with by GitHub