Contributors: Luke Watts
Tags: customizer, customizer framework, theme, theme customizer, mods, theme
Requires Wordpress: >=6.5
Requires PHP: >=8.2
The easiest framework for Theme Developer in using WordPress Customizer.
Simplified static wrapper for the Wordpress Customizer API. Removes the need to define a seperate setting
and control
, and instead adds a field
method which does configures both the setting
and control
in one method. Also The Cusomizer Framework adds many new control types which can be used.
- Audio Uploader
- Button Set
- Checkbox Multiple
- Checkbox Pill
- Checkbox
- Code Editor
- Color Picker
- Color Set
- Content Editor
- Date Picker
- Dropdown Custom Post
- Dropdown Page
- Dropdown Post
- File Uploader
- Image Uploader
- Markup
- Numeric
- Radio
- Range
- Select
- Size
- Switch
- Tagging Select
- Tagging
- Text
- Textarea
- Timepicker
- Toggle
- URL
- Video Uploader
There are two ways to install Customizer Framework in your wordpress project. The first option is to download Customizer Framework plugin version and install in your WordPress Directory. The second option is to download Customizer Framework library version and include in your theme.
- Copy the folder
customizer-framework
to your plugins directory (or zip and upload through Dashboard). - Activate.
Note: If using as a plugin, it is recommended to check check first if the \\CustomizerFramework\\Core\\Customizer
class exists.
// Check if Customizer class exists
if (class_exists('\\CustomizerFramework\\Core\\Customizer')) {
// in here you can add panel, section, fields
}
You can also write in this way.
// Check if Customizer class exists
if (class_exists('\\CustomizerFramework\\Core\\Customizer') ) {
// call the function inside
customizer_fields();
}
// Holds all the field
function customizer_fields() {
// panel
\CustomizerFramework\Core\Customizer::panel( 'panel_id', [
'title' => 'Panel title',
'description' => 'Panel description',
'priority' => 1
] );
// section
\CustomizerFramework\Core\Customizer::section( 'section_id', [
'title' => 'Section title',
'description' => 'Section description',
'priority' => 1,
'panel' => 'panel_id'
] );
// Text Field
\CustomizerFramework\Core\Customizer::field( 'text', [
'id' => 'textdb1',
'label' => 'Text Title',
'description' => 'Text Description',
'section' => 'section_id',
'priority' => 1,
'placeholder' => 'Write text'
]);
}
- Copy folder
customizer-framework
anywhere inside your theme - Require
customizer-framework/customizer-framework.php
in yourfunctions.php
file - Add
use CustomizerFramework\Core\Customizer;
to the top of yourfunctions.php
file.
Example functions.php
file:
// in functions.php
// include customizer-framework.php
require get_parent_theme_file_path('/customizer-framework/customizer-framework.php');
// after requiring
// check if Customizer Class Exists
if (class_exists('\CustomizerFramework\Core\Customizer')) {
// in here you can add panel, section, fields
// the same as example in above
}
Panels are containers for section, they allow you to group multiple sections. You can add panel using Customizer::panel()
method.
Customizer::panel('panel_id', [
'title' => 'Panel title',
'description' => 'Panel description',
'priority' => 1
]);
id
string | required
A unique slug-like string to use as an id.
title
string | required
The visible name of the panel.
description
string | optional
The description of the panel, displayed at the top of the panel, hidden behind the help icon.
priority
integer | optional
The order of panels appears in the Theme Customizer Sizebar.
Sections are where the Fields reside, you can have multiple Field in each Section. Also Section can be added in panel. You can add section using Customizer::section()
method.
Customizer::section('section_id', [
'title' => 'Section title',
'description' => 'Section description',
'priority' => 1,
]);
Adding section inside a panel, you just need to add panel
in section and copy the panel id
.
Customizer::section('section_id', [
'title' => 'Section title',
'description' => 'Section description',
'priority' => 1,
'panel' => 'panel_id'
]);
Here are the parameters for creating section.
id
string | required
A unique slug-like string to use as an id.
title
string | required
The visible name of the panel.
description
string | optional
The description of the section, displayed at the top of the section.
priority
integer | optional
The order of panels appears in the Theme Customizer Sizebar.
panel
string | optional
The id of Panel where this section will be reside.
Note: value must be existing Panel id.
The audio-uploader
lets you add a field for uploading and selecting audio files in WordPress Media Library.
Here are the parameters in adding audio-uploader.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
integer | optional
The default value of the field.
Note: default value must be valid or existing "attachment ID"
priority
integer | optional
Determines the order of fields in section.
placeholder
string | optional
Display placeholder in the field.
extensions
array | optional
Allowing to set the allowed audio extensions.
Note: here are the list of allowed extensions [ 'mp3', 'm4a', 'ogg', 'wav', 'mpg' ]
Customizer::field('audio-uploader', [
'id' => 'audiodb1',
'label' => 'Select Audio',
'description' => 'Description Here.',
'section' => 'section_id',
'priority' => 1,
'placeholder' => 'Select Audio'
]);
Example with default
value! note: default value can only be supplied of the attachment
ID.
Customizer::field( 'audio-uploader', [
'id' => 'audiodb1',
'label' => 'Select Audio',
'description' => 'Description Here.',
'section' => 'section_id',
'default' => 123,
'priority' => 1,
'placeholder' => 'Select Audio'
] );
Example with extensions
value! note: here are the list of allowed extensions mp3
, m4a
, ogg
, wav
and mpg
.
Customizer::field( 'audio-uploader', [
'id' => 'audiodb1',
'label' => 'Select Audio',
'description' => 'Description Here.',
'section' => 'section_id',
'default' => 123,
'priority' => 1,
'placeholder' => 'Select Audio',
'extensions' => [ 'mp3', 'wav' ]
] );
The get_theme_mod()
function is recommended to retrieve data.
wp_get_attachment_url(get_theme_mod('audiodb1'));
The button-set lets you add a field for selecting data in a set of button.
Here are the parameters in adding button-set.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
string | optional
The default value of the field.
Note: default value must exist in choices.
priority
integer | optional
Determines the order of fields in section.
choices
array | optional
List of choices.
Customizer::field('button-set', [
'id' => 'buttonsetdb1',
'label' => 'List of Fruits',
'description' => 'Fruit List Description',
'section' => 'section_id',
'priority' => 1,
'choices' => [
'apple' => 'Apple',
'grape' => 'Grape',
'orange' => 'Orange'
]
]);
Example with default value! note: default value must exist in choices.
Customizer::field( 'button-set', [
'id' => 'buttonsetdb1',
'label' => 'List of Fruits',
'description' => 'Fruit List Description',
'section' => 'section_id',
'default' => 'grape',
'priority' => 1,
'choices' => [
'apple' => 'Apple',
'grape' => 'Grape',
'orange' => 'Orange'
]
]);
The get_theme_mod()
function is recommended to retrieve data.
// Return a string
echo get_theme_mod('buttonsetdb1');
The checkbox
lets you add a field checkbox.
Here are the parameters in adding checkbox.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
boolean | optional
The default value of the field.
Note: default value must be provided boolean.
priority
integer | optional
Determines the order of fields in section.
Customizer::field('checkbox', [
'id' => 'checkboxdb1',
'label' => 'Are you single?',
'description' => 'Select if your single',
'section' => 'section_id',
'priority' => 1,
]);
Example with default
value! note: default value must be provided boolean
.
Customizer::field('checkbox', [
'id' => 'checkboxdb1',
'label' => 'Are you single?',
'description' => 'Select if your single',
'section' => 'section_id',
'default' => true,
'priority' => 1,
]);
The get_theme_mod()
function is recommended to retrieve data.
// Return a boolean
$is_checked = get_theme_mod('checkboxdb1');
The checkbox-multiple
lets you add a checkbox where you can check multiple checkbox.
Here are the parameters in adding checkbox-multiple.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
array | optional
The default value of the field.
Note: default value must exist in choices.
priority
integer | optional
Determines the order of fields in section.
choices
array | optional
List of choices.
Customizer::field('checkbox-multiple', [
'id' => 'multiplecheckboxdb1',
'label' => 'List of Fruits',
'description' => 'Fruit List Description',
'section' => 'section_id',
'priority' => 1,
'choices' => [
'apple' => 'Apple',
'grape' => 'Grape',
'orange' => 'Orange'
]
]);
Example with default
value! note: default value must exist in choices
.
Customizer::field('checkbox-multiple', [
'id' => 'multiplecheckboxdb1',
'label' => 'List of Fruits',
'description' => 'Fruit List Description',
'section' => 'section_id',
'default' => [ 'apple', 'grape' ],
'priority' => 1,
'choices' => [
'apple' => 'Apple',
'grape' => 'Grape',
'orange' => 'Orange'
]
]);
The get_theme_mod()
function is recommended to retrieve data.
NOTE: The choices will be returned in a comma seperated string of the keys e.g. "apple, orange"
// Return a array
$choices = json_decode(get_theme_mod(('multiplecheckboxdb1')));
The checkbox-pill
lets you add a field for selecting data.
Inline style.
Checkbox Pill Inline List Style.
Checkbox Pill List Parameters Here are the parameters in adding checkbox-pill.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | required
The section where the field will be displayed.
default
array | optional
The default value of the field.
Note: default value must exist in choices.
priority
integer | optional
Determines the order of fields in section.
choices
array | optional
List of choices.
style
string | optional
The style of the checkbox pill.
Note: style values are 'inline' and 'list' default is 'list'
Customizer::field('checkbox-pill', [
'id' => 'checkboxpilldb1',
'label' => 'Select Fruits',
'description' => 'Fruit list description',
'section' => 'section_id',
'priority' => 1,
'choices' => [
'apple' => 'Apple',
'orange' => 'Orange',
'grape' => 'Grape',
'mango' => 'Mango',
'cherry' => 'Cherry',
'berry' => 'Berry',
'melon' => 'Melon'
]
]);
Example with default
value! note: default value must exist in choices
.
Customizer::field('checkbox-pill', [
'id' => 'checkboxpilldb1',
'label' => 'Select Fruits',
'description' => 'Fruit list description',
'section' => 'section_id',
'default' => [ 'apple', 'orange' ],
'priority' => 1,
'choices' => [
'apple' => 'Apple',
'orange' => 'Orange',
'grape' => 'Grape',
'mango' => 'Mango',
'cherry' => 'Cherry',
'berry' => 'Berry',
'melon' => 'Melon'
]
]);
Example with style
. Style can be inline
or list
.
Customizer::field('checkbox-pill', [
'id' => 'checkboxpilldb1',
'label' => 'Select Fruits',
'description' => 'Fruit list description',
'section' => 'section_id',
'default' => [ 'apple', 'orange' ],
'priority' => 1,
'style' => 'inline',
'choices' => [
'apple' => 'Apple',
'orange' => 'Orange',
'grape' => 'Grape',
'mango' => 'Mango',
'cherry' => 'Cherry',
'berry' => 'Berry',
'melon' => 'Melon'
]
]);
The get_theme_mod()
function is recommended to retrieve data.
// Returns a array
$choices = json_decode(get_theme_mod('checkboxpilldb1'));
The code-editor
lets you add a code editor field.
Here are the parameters in adding code-editor.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
string | optional
The default value of the field.
priority
integer | optional
Determines the order of fields in section.
language
string | optional | default: html
Allowing to set programming language for the editor
Note: here are the list of allowed language [ 'html', 'css', 'javascript', 'php' ]
Customizer::field('code-editor', [
'id' => 'codedb1',
'label' => 'Add Your Code',
'description' => 'Description Here.',
'section' => 'section_id',
'priority' => 1
]);
Example with default
value! note: default value must exist in choices
.
Customizer::field('code-editor', [
'id' => 'codedb1',
'label' => 'Add Your Code',
'description' => 'Description Here.',
'section' => 'section_id',
'default' => 'Hello World'
'priority' => 1
]);
Example with langauage
! note: here are the list of allowed language html
, css
, javascript
and php
.
Customizer::field('code-editor', [
'id' => 'codedb1',
'label' => 'Add Your Code',
'description' => 'Description Here.',
'section' => 'section_id',
'default' => 'console.log(\'Hello World\')',
'priority' => 1,
'language' => 'javascript'
]);
The get_theme_mod()
function is recommended to retrieve data.
// Return a string
echo get_theme_mod('codedb1');
The color-picker
lets you add a field for selecting colors.
Here are the parameters in adding color-picker.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
string | optional
The default value of the field.
priority
integer | optional
Determines the order of fields in section.
format
string | required
The format color return 'hex or rgba'.
Note: format only accept 'hex' and 'rgba'.
opacity
boolean | optional
Allow to add opacity control.
Customizer::field('color-picker', [
'id' => 'colorpickerdb1',
'label' => 'Select your color',
'description' => 'Please select a color',
'section' => 'section_id',
'priority' => 1,
'format' => 'hex',
]);
Example with opacity
! note: opacity value is boolean
.
Customizer::field('color-picker', [
'id' => 'colorpickerdb1',
'label' => 'Select your color',
'description' => 'Please select a color',
'section' => 'section_id',
'default' => 'rgba( 0, 0, 0, 0.5 )',
'priority' => 1,
'format' => 'rgba',
'opacity' => true
]);
The get_theme_mod()
function is recommended to retrieve data.
// Return a string
echo get_theme_mod('colorpickerdb1');
The color-set
lets you add a field for selecting color.
Here are the parameters in adding color-set.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
string | required
The default value of the field.
Note: default value must exist in colors.
priority
integer | optional
Determines the order of fields in section.
colors
array | required
The list array of colors to be used.
shape
string | optional | default: square
The actual shape of color radio.
Note: shape valid values are 'square' and 'circle'.
size
integer | optional
The actual size of color radio, unit size is "px".
Customizer::field( 'color-set', [
'id' => 'colorsetdb1',
'label' => 'Choose Color 1',
'description' => 'Some description',
'section' => 'section_id',
'default' => '#000000',
'priority' => 14,
'colors' => [ '#000000', '#ffffff', '#eeeeee' ],
'shape' => 'square',
'size' => 20
] );
The Customizer provides material colors. Here are material color set : all
, primary
, a100
, a200
, a400
, a700
, red
, pink
, purple
, deepPurple
, indigo
, lightBlue
, cyan
, teal
, green
, lightGreen
, lime
, yellow
, amber
, orange
, deepOrange
, brown
, grey
and blueGrey
.
use CustomizerFramework\Core\Customizer;
use CustomizerFramework\Lib\Util;
Customizer::field('color-set', [
'id' => 'colorsetdb1',
'label' => 'Choose Color 1',
'description' => 'Some description',
'section' => 'sectisection_idon_1',
'default' => '#000000',
'priority' => 14,
'colors' => Util::_get_material_colors( 'all' ),
'shape' => 'square',
'size' => 20
]);
The get_theme_mod()
function is recommended to retrieve data.
// Return a string
echo get_theme_mod('colorsetdb1');
The content-editor
lets you add a Content Editor Field.
Here are the parameters in adding content-editor.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
string | optional
The default value of the field.
priority
integer | optional
Determines the order of fields in section.
uploader
boolean | optional | default: false
Add a media uploader button.
toolbars
array | optional
Allowing to add controls in toolbars.
Note: here are the list of toolbars available [ 'bold', 'italic', 'strikethrough', 'bullist', 'numlist', 'blockquote', 'hr', 'alignleft', 'aligncenter', 'alignright', 'link', 'unlink', 'wp_more', 'spellchecker', 'fullscreen', 'wp_adv', 'formatselect', 'underline', 'alignjustify', 'forecolor', 'pastetext', 'removeformat', 'charmap', 'outdent', 'indent', 'undo', 'redo', 'wp_help' ]
Customizer::field( 'content-editor', [
'id' => 'editor1',
'label' => 'Write Your Content',
'description' => 'Description Here.',
'section' => 'section_id',
'priority' => 1,
] );
Example with default value! note: default value can only be supplied of string or html.
Customizer::field( 'content-editor', [
'id' => 'editor1',
'label' => 'Write Your Content',
'description' => 'Description Here.',
'section' => 'section_id',
'default' => 'Hello World',
'priority' => 1,
] );
Example with uploader! note: uploader can be supplied only in boolean.
Customizer::field( 'content-editor', [
'id' => 'editor1',
'label' => 'Write Your Content',
'description' => 'Description Here.',
'section' => 'section_id',
'default' => 'Hello World',
'priority' => 1,
'uploader' => true
] );
Example with toolbars! here are the list of toolbars available bold, italic, strikethrough, bullist, numlist, blockquote, hr, alignleft, aligncenter, alignright, link, unlink, wp_more, spellchecker, fullscreen, wp_adv, formatselect, underline, alignjustify, forecolor, pastetext, removeformat, charmap, outdent, indent, undo, redo, wp_help.
Customizer::field( 'content-editor', [
'id' => 'editor1',
'label' => 'Write Your Content',
'description' => 'Description Here.',
'section' => 'section_id',
'default' => 'Hello World',
'priority' => 1,
'uploader' => true,
'toolbars' => [ 'bold', 'italic' ]
] );
The get_theme_mod()
function is recommended to retrieve data.
// Return a string
echo get_theme_mod('editor1');
The date-picker
lets you add a field for selecting date.
Here are the parameters in adding button-set.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
string | optional
The default value of the field.
priority
integer | optional
Determines the order of fields in section.
placeholder
string | optional
Display placeholder in the field.
mode
string | optional :: single | range
Set the type of mode single or range.
enable_time
boolean | optional | default : false
Allows to add time in calendar.
Notes
- The default value will be depending on the mode
if mode is set to single so the default value must be supplied string if mode is set to range so the default value must be supplied array with two date the START DATE and END DATE 2. The date format in default value also depending on enable_time.
if enable_time is set to false the format will be Y-m-d YEAR-MONTH-DATE if enable_time is set to true the format will be Y-m-d H:i YEAR-MONTH-DATE HOUR-MINUTE
Customizer::field( 'date-picker', [
'id' => 'datepickerdb1',
'label' => 'Set The Date',
'description' => 'Please add date you want.',
'section' => 'section_id',
'default' => '2020-05-30',
'priority' => 1,
'placeholder' => 'Date',
'mode' => 'single',
] );
Example with mode: range and enable_time: true.
Customizer::field( 'date-picker', [
'id' => 'datepickerdb1',
'label' => 'Set The Date',
'description' => 'Please add date you want.',
'section' => 'section_id',
'default' => ['2020-01-05', '2020-01-10'],
'mode' => 'range',
'priority' => 1,
'enable_time' => true,
'placeholder' => 'Date',
] );
The get_theme_mod()
function is recommended to retrieve data.
// Return a array
$date = explode(',', get_theme_mod('datepickerdb1'));
The dropdown-custom-post
lets you add a select field where the options is custom post.
Here are the parameters in adding dropdown-custom-post.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
integer | optional
The default value of the field.
Note: default value must be a post id.
priority
integer | optional
Determines the order of fields in section.
post_type
string | required
Name of custom post type.
Note: post_type value must be existing custom post.
order
string | optional
Sets the order to ascending and descending.
Note: order only accept 'asc' and 'desc'.
Customizer::field('dropdown-custom-post', [
'id' => 'dropdowncustompostdb1',
'label' => 'Select Custom Post',
'description' => 'You can select a custom post in here.',
'section' => 'section_id',
'priority' => 1,
'post_type' => 'project',
'order' => 'asc'
]);
Example with default value! note: default value must existing post id.
Customizer::field('dropdown-custom-post', [
'id' => 'dropdowncustompostdb1',
'label' => 'Select Custom Post',
'description' => 'You can select a custom post in here.',
'section' => 'section_id',
'default' => 100,
'priority' => 1,
'post_type' => 'project',
'order' => 'asc'
]);
The get_theme_mod()
function is recommended to retrieve data.
// Get the post by id
$post = get_post(get_theme_mod('dropdowncustompostdb1'));
The dropdown-page
lets you add a select field with list of pages.
Here are the parameters in adding dropdown-page.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
integer | optional
The default value of the field.
Note: default value must be a page id.
priority
integer | optional
Determines the order of fields in section.
order
string | optional
Sets the order to ascending and descending.
Note: order only accept 'asc' and 'desc'.
Customizer::field('dropdown-page', [
'id' => 'dropdownpagedb1',
'label' => 'Select Page',
'description' => 'You can select a page in here.',
'section' => 'section_id',
'priority' => 1,
'order' => 'asc'
]);
Example with default value! note: default value must existing page id.
Customizer::field('dropdown-page', [
'id' => 'dropdownpagedb1',
'label' => 'Select Page',
'description' => 'You can select a page in here.',
'section' => 'section_id',
'default' => 100,
'priority' => 1,
'order' => 'desc'
]);
The get_theme_mod()
function is recommended to retrieve data.
// Get the page by id
$page = get_post(get_theme_mod('dropdownpagedb1'));
The dropdown-post
lets you add a select field with list of posts.
Here are the parameters in adding dropdown-post.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
integer | optional
The default value of the field.
Note: default value must be a post id.
priority
integer | optional
Determines the order of fields in section.
order
string | optional
Sets the order to ascending and descending.
Note: order only accept 'asc' and 'desc'.
Customizer::field('dropdown-post', [
'id' => 'dropdownpostdb1',
'label' => 'Select Post',
'description' => 'You can select a page in here.',
'section' => 'section_id',
'priority' => 1,
'order' => 'asc'
]);
Example with default
value! note: default value must existing post id
.
Customizer::field('dropdown-post', [
'id' => 'dropdownpostdb1',
'label' => 'Select Post',
'description' => 'You can select a post in here.',
'section' => 'section_id',
'default' => 100,
'priority' => 1,
'order' => 'desc'
]);
The get_theme_mod()
function is recommended to retrieve data.
// Get the post by id
$post = get_post(get_theme_mod('dropdownpostdb1'));
The email
lets you add a email field.
Here are the parameters in adding email.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
string | optional
The default value of the field.
Note: default value must be provided with a valid email.
priority
integer | optional
Determines the order of fields in section.
placeholder
string | optional
Display placeholder in the control.
Customizer::field('email', [
'id' => 'emaildb1',
'label' => 'Enter Email',
'description' => 'Write your valid email address.',
'section' => 'section_id',
'priority' => 1,
'placeholder' => 'Email Address'
]);
Example with default value! note: default value must be a valid email.
Customizer::field('email', [
'id' => 'emaildb1',
'label' => 'Enter Email',
'description' => 'Write your valid email address.',
'section' => 'section_id',
'default' => '[email protected]',
'priority' => 1,
'placeholder' => 'Email Address'
]);
The get_theme_mod()
function is recommended to retrieve data.
// Returns a string
echo get_theme_mod('emaildb1');
The file-uploader
lets you add a field for uploading and selecting document files in WordPress Media Library.
Here are the parameters in adding file-uploader.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
integer | optional
The default value of the field.
Note: default value must be valid or existing "attachment ID"
priority
integer | optional
Determines the order of fields in section.
placeholder
string | optional
Display placeholder in the field.
extensions
array | optional
Allowing to set the allowed file extensions.
Note: here are the list of allowed extensions [ 'pdf', 'doc', 'docx', 'ppt', 'pptx', 'pps', 'ppsx', 'odt', 'xls', 'xlsx', 'psd' ]
Customizer::field('file-uploader', [
'id' => 'filedb1',
'label' => 'Select File',
'description' => 'Description Here.',
'section' => 'section_id',
'priority' => 1,
'placeholder' => 'Select File'
]);
Example with default value! note: default value can only be supplied of the attachment ID.
Customizer::field('file-uploader', [
'id' => 'filedb1',
'label' => 'Select File',
'description' => 'Description Here.',
'section' => 'section_id',
'default' => 123,
'priority' => 1,
'placeholder' => 'Select File'
]);
Example with extensions! Note: here are the list of allowed extensions pdf, doc, docx, ppt, pptx, pps, ppsx, odt, xls, xlsx, psd.
Customizer::field('file-uploader', [
'id' => 'filedb1',
'label' => 'Select File',
'description' => 'Description Here.',
'section' => 'section_id',
'default' => 123,
'priority' => 1,
'placeholder' => 'Select File',
'extensions' => [ 'pdf', 'doc' ]
]);
The get_theme_mod()
function is recommended to retrieve data.
// Getting the url
wp_get_attachement_url(get_theme_mod('filedb1'));
The image-uploader
lets you add a field for uploading and selecting images in WordPress Media Library.
Here are the parameters in adding image-uploader.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
integer | optional
The default value of the field.
Note: default value must be valid or existing "attachment ID"
priority
integer | optional
Determines the order of fields in section.
placeholder
string | optional
Display placeholder in the field.
extensions
array | optional
Allowing to set the allowed audio extensions.
Note: here are the list of allowed extensions [ 'png', 'jpg', 'jpeg', 'ico', 'gif' ]
Customizer::field('image-uploader', [
'id' => 'imageuploaderdb1',
'label' => 'Select Image',
'description' => 'Description Here.',
'section' => 'section_id',
'priority' => 1,
'placeholder' => 'Select Image'
]);
Example with default value! note: default value can only be supplied of the attachment ID.
Customizer::field('image-uploader', [
'id' => 'imageuploaderdb1',
'label' => 'Select Image',
'description' => 'Description Here.',
'section' => 'section_id',
'default' => 123,
'priority' => 1,
'placeholder' => 'Select Image'
]);
Example with extensions value! note: here are the list of allowed extensions png, jpg, jpeg, ico, gif.
Customizer::field('image-uploader', [
'id' => 'imageuploaderdb1',
'label' => 'Select Image',
'description' => 'Description Here.',
'section' => 'section_id',
'default' => 123,
'priority' => 1,
'placeholder' => 'Select Image',
'extensions' => [ 'png', 'ico' ]
]);
The get_theme_mod()
function is recommended to retrieve data.
// Getting the url
wp_get_attachement_url(get_theme_mod('imageuploaderdb1'));
The markup
lets you add a HTML in Theme Customizer Sizebar.
Here are the parameters in adding markup.
id
string | required
A unique slug-like string to use as an id.
section
string | required
The section where the field will be displayed.
priority
integer | optional
Determines the order of fields in section.
html
string | required
Html code to be display in Theme Customizer Sidebar.
Note: add html markup in here.
Customizer::field('markup', [
'id' => 'markup1',
'section' => 'section_1',
'priority' => 1,
'html' => 'HTML Markup in here...'
]);
The get_theme_mod()
function is recommended to retrieve data.
// Returns a string
echo get_theme_mod('markup1');
The numeric
lets you add a field for number.
Here are the parameters in adding numeric.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
integer | optional
The default value of the field.
priority
integer | optional
Determines the order of fields in section.
options
array | optional
Set of options.
options['min']
integer | required
Minimum value set.
options['max']
integer | required
Maximum value set.
options['step']
int | optional
Stepper value.
Customizer::field('numeric', [
'id' => 'numericdb1',
'label' => 'Enter Number',
'description' => 'Some description',
'section' => 'section_id',
'priority' => 1,
'options' => [
'min' => 0,
'max' => 100,
'step' => 1
]
]);
Example with default
value.
Note: The default
value must be numeric type.
Customizer::field('numeric', [
'id' => 'numericdb1',
'label' => 'Enter Number',
'description' => 'Some description',
'section' => 'section_id',
'default' => 50,
'priority' => 1,
'options' => [
'min' => 0,
'max' => 100,
'step' => 1
]
]);
The get_theme_mod()
function is recommended to retrieve data.
// Returns a string
echo get_theme_mod('numericdb1');
The radio
lets you add a field radio.
Here are the parameters in adding radio.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | required
The section where the field will be displayed.
default
string | optional
The default value of the field.
Note: default value must exist within the choices.
priority
integer | optional
Determines the order of fields in section.
choices
array | required
List of choices.
Customizer::field('radio', [
'id' => 'radiodb1',
'label' => 'Choose your country',
'description' => 'Select your country.',
'section' => 'section_id',
'priority' => 1,
'choices' => [
'america' => __( 'America' ),
'philippines' => __( 'Philippines' ),
'peru' => __( 'Peru' )
]
]);
Example with default value! note: default value must exist in choices.
Customizer::field('radio', [
'id' => 'radiodb1',
'label' => 'Choose your country',
'description' => 'Select your country.',
'section' => 'section_id',
'default' => 'philippines',
'priority' => 1,
'choices' => [
'america' => __( 'America' ),
'philippines' => __( 'Philippines' ),
'peru' => __( 'Peru' )
]
]);
The get_theme_mod()
function is recommended to retrieve data.
// Returns a string
echo get_theme_mod('radiodb1');
The range
lets you add a range field.
Here are the parameters in adding range.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
integer | optional
The default value of the field.
priority
integer | optional
Determines the order of fields in section.
options
array | optional
Set of options.
options['min']
integer | required
Minimum value set.
options['max']
integer | required
Maximum value set.
options['step']
int | optional
Stepper value.
Stepper value.
Customizer::field('range', [
'id' => 'rangedb1',
'label' => 'Set Limit Of Visitor',
'description' => 'Limit Number Of Visitor.',
'section' => 'section_id',
'priority' => 1,
'options' => [
'min' => 0,
'max' => 100,
'step' => 1
]
]);
Example with default value! note: default value must be numeric.
Customizer::field('range', [
'id' => 'rangedb1',
'label' => 'Set Limit Of Visitor',
'description' => 'Limit Number Of Visitor.',
'section' => 'section_id',
'default' => 50,
'priority' => 1,
'options' => [
'min' => 0,
'max' => 100,
'step' => 1
]
]);
The get_theme_mod()
function is recommended to retrieve data.
// Return a integer
echo get_theme_mod('rangedb1');
The select
lets you add a select field.
Here are the parameters in adding select.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
string | optional
The default value of the field.
Note: default value must exist in choices.
priority
integer | optional
Determines the order of fields in section.
choices
array | required
List of choices
Customizer::field('select', [
'id' => 'selectdb1',
'label' => 'Select Fruits',
'description' => 'Select your favorite fruits.',
'section' => 'section_id',
'priority' => 1,
'choices' => [
'apple' => 'Apple',
'orange' => 'Orange',
'grape' => 'Grape'
]
]);
Example with default value! note: default value must exist in choices.
Customizer::field('select', [
'id' => 'selectdb1',
'label' => 'Select Fruits',
'description' => 'Select your favorite fruits.',
'section' => 'section_id',
'default' => 'apple',
'priority' => 1,
'choices' => [
'apple' => 'Apple',
'orange' => 'Orange',
'grape' => 'Grape'
]
]);
The get_theme_mod()
function is recommended to retrieve data.
// Return a integer
echo get_theme_mod('selectdb1');
The size
lets you add a input field for size.
Here are the parameters in adding size.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
string | optional
The default value of the field.
priority
integer | optional
Determines the order of fields in section.
units
array | required
List of valid units 'px', 'em', 'ex', 'ch', 'rem', 'vw', 'vh', 'vmin', 'vmax', '%'.
Note: units value must be valid
placeholder
string | optional
This will be display as placeholder.
Customizer::field('size', [
'id' => 'sizedb1',
'label' => 'Enter Padding Size',
'description' => 'Add size in here.',
'section' => 'section_id',
'priority' => 1,
'placeholder' => 'Enter size',
'units' => [ 'px', 'em' ],
]);
Example of default value!
Customizer::field('size', [
'id' => 'sizedb1',
'label' => 'Enter Padding Size',
'description' => 'Add size in here.',
'section' => 'section_id',
'default' => '2em',
'priority' => 1,
'placeholder' => 'Enter size',
'units' => [ 'px', 'em' ],
]);
The get_theme_mod()
function is recommended to retrieve data.
// Return a integer
echo get_theme_mod('sizedb1');
The switch
lets you add a field switch.
Here are the parameters in adding switch.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
boolean | optional
The default value of the field.
priority
integer | optional
Determines the order of fields in section.
Customizer::field('switch', [
'id' => 'switchdb1',
'label' => 'Do you want to show?',
'description' => 'Some description',
'section' => 'section_id',
'priority' => 1,
]);
Example with default value! note: default value must be provided boolean.
Customizer::field('switch', [
'id' => 'switchdb1',
'label' => 'Do you want to show?',
'description' => 'Some description',
'section' => 'section_id',
'default' => true,
'priority' => 1,
]);
The get_theme_mod()
function is recommended to retrieve data.
// Returns boolean
$is_checked = get_theme_mod('switchdb1');
The text
lets you add a text field.
Here are the parameters in adding text.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
string | optional
The default value of the field.
priority
integer | optional
Determines the order of fields in section.
placeholder
string | optional
Display placeholder in field.
Customizer::field('text', [
'id' => 'textdb1',
'label' => 'Short Story',
'description' => 'Write short story in here.',
'section' => 'section_id',
'priority' => 1,
'placeholder' => 'Your story in here...'
]);
Example with default value.
Customizer::field('text', [
'id' => 'textdb1',
'label' => 'Short Story',
'description' => 'Write short story in here.',
'section' => 'section_id',
'default' => 'hello world',
'priority' => 1,
'placeholder' => 'Your story in here...'
]);
The get_theme_mod()
function is recommended to retrieve data.
// Return a string
echo get_theme_mod('textdb1');
The textarea
lets you add a textarea field.
Here are the parameters in adding textarea.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
string | optional
The default value of the field.
priority
integer | optional
Determines the order of fields in section.
placeholder
string | optional
Display placeholder in field.
Customizer::field('textarea', [
'id' => 'textareadb1',
'label' => 'Short Story',
'description' => 'Write short story in here.',
'section' => 'section_id',
'priority' => 1,
'placeholder' => 'Your story in here...'
]);
Example with default value.
Customizer::field('textarea', [
'id' => 'textareadb1',
'label' => 'Short Story',
'description' => 'Write short story in here.',
'section' => 'section_id',
'default' => 'hello world',
'priority' => 1,
'placeholder' => 'Your story in here...'
]);
The get_theme_mod()
function is recommended to retrieve data.
// Return a string
echo get_theme_mod('textareadb1');
The time-picker
lets you add a time picker field.
Here are the parameters in adding time-picker.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | required
The section where the field will be displayed.
default
string | optional
The default value of the field.
priority
integer | optional
Determines the order of fields in section.
placeholder
string | optional
Display placeholder in field.
military_format
boolean | optional | default : false
Set if the time picker will be in military time format.
Note The value will return string and in military format. Default format must be in correct format "H:i" examples: 01:01, 12:30, 23:08 and also set as military time.
Customizer::field('time-picker', [
'id' => 'timepickerdb1',
'label' => 'Set The Time',
'description' => 'Please add time you want.',
'section' => 'section_id',
'placeholder' => 'Time',
'priority' => 1
]);
Example with default and military_format.
Customizer::field('time-picker', [
'id' => 'timepickerdb1',
'label' => 'Set The Time',
'description' => 'Please add time you want.',
'section' => 'section_id',
'default' => '01:00',
'military_format' => true,
'placeholder' => 'Time',
'priority' => 1
]);
The get_theme_mod()
function is recommended to retrieve data.
// Return a string
echo get_theme_mod('timepickerdb1');
The toggle
lets you add a field toggle.
Here are the parameters in adding toggle.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
boolean | optional
The default value of the field.
priority
integer | optional
Determines the order of fields in section.
Customizer::field('toggle', [
'id' => 'toggledb1',
'label' => 'Do you want to show?',
'description' => 'Some description',
'section' => 'section_id',
'priority' => 1,
]);
Example with default value! note: default value must be provided boolean.
Customizer::field('toggle', [
'id' => 'toggledb1',
'label' => 'Do you want to show?',
'description' => 'Some description',
'section' => 'section_id',
'default' => true,
'priority' => 1,
]);
The get_theme_mod()
function is recommended to retrieve data.
// Returns boolean
$is_checked = get_theme_mod('toggledb1');
The url
lets you add a url field.
Here are the parameters in adding url.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
string | optional
The default value of the field.
Note: default value must be provided with a valid url.
priority
integer | optional
Determines the order of fields in section.
placeholder
string | optional
Display placeholder in the control.
Customizer::field( 'url', [
'id' => 'urldb1',
'label' => 'Enter URL',
'description' => 'Some description.',
'section' => 'section_id',
'priority' => 1,
'placeholder' => 'Enter Your URL'
]);
Example with default value! note: default value must be a valid url.
Customizer::field( 'url', [
'id' => 'urldb1',
'label' => 'Enter URL',
'description' => 'Some description.',
'section' => 'section_id',
'default' => 'https://www.facebook.com',
'priority' => 1,
'placeholder' => 'Enter Your URL'
]);
The get_theme_mod()
function is recommended to retrieve data.
// Returns a string
echo get_theme_mod('urldb1');
The video-uploader
lets you add a field for uploading and selecting video files in WordPress Media Library.
Here are the parameters in adding video-uploader.
id
string | required
A unique slug-like string to use as an id and also as index in saving data in database.
label
string | optional
The label of the field.
description
string | optional
The description of the field and display under the label.
section
string | requiredl
The section where the field will be displayed.
default
integer | optional
The default value of the field.
Note: default value must be valid or existing "attachment ID"
priority
integer | optional
Determines the order of fields in section.
placeholder
string | optional
Display placeholder in the field.
extensions
array | optional
Allowing to set the allowed audio extensions.
Note: here are the list of allowed extensions [ 'mp4', 'm4v', 'mov', 'wmv', 'avi', 'mpg', 'ogv', '3gp', '3g2', 'webm', 'mkv' ]
Customizer::field('video-uploader', [
'id' => 'videuploaderdb1',
'label' => 'Select Video',
'description' => 'Description Here.',
'section' => 'section_id',
'priority' => 1,
'placeholder' => 'Select Video'
]);
Example with default value! note: default value can only be supplied of the attachment ID.
Customizer::field('video-uploader', [
'id' => 'videuploaderdb1',
'label' => 'Select Video',
'description' => 'Description Here.',
'section' => 'section_id',
'default' => 123,
'priority' => 1,
'placeholder' => 'Select Video'
]);
Example with extensions value! note: here are the list of allowed extensions mp4, m4v, mov, wmv, avi, mpg, ogv, 3gp, 3g2, webm, mkv.
Customizer::field('video-uploader', [
'id' => 'videuploaderdb1',
'label' => 'Select Video',
'description' => 'Description Here.',
'section' => 'section_id',
'default' => 123,
'priority' => 1,
'placeholder' => 'Select Video',
'extensions' => [ 'mp4', 'mkv' ]
]);
The get_theme_mod()
function is recommended to retrieve data.
// Getting the url
wp_get_attachement_url(get_theme_mod('videuploaderdb1'));
The active_callback can be use to set if field will be display under a condition. For more information you can read Customizer APIs.
In this example the text field will be display if toggle is equal to true.
/**
* Creating a toggle field
*/
Customizer::field('toggle', [
'id' => 'toggledb1c',
'label' => 'Do you want to show text field ?',
'description' => 'If you want to display the text.',
'section' => 'section_id',
'priority' => 1
]);
/**
* Creating a text field
*
* Only Show textdb1c field if toggledb1c is equal to true
*/
Customizer::field('text', [
'id' => 'textdb1c',
'label' => 'Text',
'section' => 'active',
'priority' => 2,
'active_callback' => fn () => (get_theme_mod('toggledb1c') === true );
]);
Example 2: in this example the text field will only show at front page.
/**
* Creating text field
*/
Customizer::field( 'text', [
'id' => 'textdb1c',
'label' => 'Text',
'section' => 'active',
'priority' => 2,
'active_callback' => fn () => (is_front_page() == true)
]);
The Customizer Framework also provide useful methods that will help in common tasks.
The Util::_get_pages()
returns all the pages in an array
use CustomizerFramework\Core\Customizer;
use CustomizerFramework\Lib\Util;
$pages = Util::_get_pages(); // this will return the page id and page title
/**
* Using in field
*
* In this example we will going to use this in select field in choices
*/
Customizer::field('select', [
'id' => 'selectdb1',
'label' => 'Select Page',
'section' => 'section_id',
'priority' => 1,
'choices' => Util::_get_pages()
]);
The Util::_get_posts()
returns all the posts in an array.
use CustomizerFramework\Core\Customizer;
use CustomizerFramework\Lib\Util;
/**
* Lets assume that we have a custom post "project"
*/
$projects = Util::_get_post('project'); // this will return the post id and post title in post "project"
/**
* Using in field
*
* In this example we will going to use this in select field in choices
*/
Customizer::field('select', [
'id' => 'selectdb1',
'label' => 'Select Projects',
'section' => 'section_id',
'priority' => 1,
'choices' => Util::_get_post( 'project' )
]);
The Util::_get_taxonomies()
returns taxonomy slug and name.
use CustomizerFramework\Core\Customizer;
use CustomizerFramework\Lib\Util;
$taxonomies = Util::_get_taxonomies(); // this will return the taxonomy slug and name
/**
* Using in field
*
* In this example we will going to use this in select field in choices
*/
Customizer::field('select', [
'id' => 'selectdb1',
'label' => 'Select Taxonomy',
'section' => 'section_id',
'priority' => 1,
'choices' => Util::_get_taxonomies()
]);
The Util::_get_post_types()
returns post type slug and name.
use CustomizerFramework\Core\Customizer;
use CustomizerFramework\Lib\Util;
$post_types = Util::_get_post_types(); // this will return post type slug and name
/**
* Using in field
*
* In this example we will going to use this in select field in choices
*/
Customizer::field( 'select', [
'id' => 'selectdb1',
'label' => 'Select Post Type',
'section' => 'section_id',
'priority' => 1,
'choices' => Util::_get_post_types()
]);
The Util::_get_material_colors($type)
returns a set of material colors. It has 1 parameter $type
and here are the valid types all
, primary
, a100
, a200
, a400
, a700
, red
, pink
, purple
, deepPurple
, indigo
, lightBlue
, cyan
, teal
, green
, lightGreen
, lime
, yellow
, amber
, orange
, deepOrange
, brown
, grey
, blueGrey
.
use CustomizerFramework\Core\Customizer;
use CustomizerFramework\Lib\Util;
/**
* In this example we will going to use in color set field
*/
// Example 1: return all material color
Customizer::field( 'color-set', [
'id' => 'colorsetdb1',
'label' => 'Choose Color 1',
'description' => 'Some description',
'section' => 'sectisection_idon_1',
'default' => '#000000',
'priority' => 14,
'colors' => Util::_get_material_colors( 'all' ), // returns all the material color
'shape' => 'square',
'size' => 20
]);
// Example 2: return primary color only
Customizer::field( 'color-set', [
'id' => 'colorsetdb1',
'label' => 'Choose Color 1',
'description' => 'Some description',
'section' => 'sectisection_idon_1',
'default' => '#000000',
'priority' => 14,
'colors' => Util::_get_material_colors( 'primary' ), // returns all the primary color
'shape' => 'square',
'size' => 20
]);
// Example 3: return purple color only
Customizer::field( 'color-set', [
'id' => 'colorsetdb1',
'label' => 'Choose Color 1',
'description' => 'Some description',
'section' => 'sectisection_idon_1',
'default' => '#000000',
'priority' => 14,
'colors' => Util::_get_material_colors( 'purple' ), // returns all the purple color
'shape' => 'square',
'size' => 20
]);
The validations
allows you to add validation to a certain field. It will print an error message regarding on the validation you set. For more information you can read in Customizer APIs.
Example a text field added required validation, the error message will print if the text field is empty.
Its easy to add a validation all you need is to add validations and supply it with validations.
Customizer::field('text', [
'id' => 'firstnamedb1',
'label' => 'Enter Your Firstname',
'description' => 'Some description',
'priority' => 1,
'validations' => [ 'required' ]
]);
Example 2: multiple validations, you can add validations as many as you can.
/**
* This example we will going to use the Customizer Framework's built in validation rules.
* required - print error message if the field is empty
* is_integer - print error message if the field value is not integer
* less_than[18] - print error message if the field value is greater than or equal to "parameter" 18
*/
Customizer::field( 'text', [
'id' => 'agedb1',
'label' => 'Enter Age',
'description' => 'Some description',
'priority' => 1,
'validations' => [ 'required', 'is_integer', 'less_than[18]' ]
]);
You can also create your own custom function for validations. Note the custom function name must end with _customizer_validation example is_number_customizer_validation.
/**
* In this example we will going to print error message if
* the field value is equal to "John"
*/
Customizer::field('text', [
'id' => 'name',
'label' => 'Enter Your Name',
'description' => 'Some description',
'priority' => 1,
'validations' => [ 'required', 'is_valid_name_customizer_validation' ]
]);
/**
* Note dont for get to add "_customizer_validation" in the end custom function name.
* @param object $validity holds your custom error message
* @param any $value the value of the field
* @return $validity error message
*/
function is_valid_name_customizer_validation( $validity, $value ) {
if( $value == 'John' ) {
// printing error message
$validity->add( 'error', 'John is invalid name.' );
}
// dont for get to return $validity
return $validity;
}
Here are the list of available validation rules. The following are the list of all native validations that are available to use.
required
parameter: (none) error message: "Required Field"
Print error message is the value is empty
valid_email
parameter: (none) error message: "Invalid email address"
Print error message if the value is not valid email
valid_url
parameter: (none) error message: "Invalid url"
Print error message if the value is invalid url
valid_ip
parameter: (none) error message: "Invalid IP address"
Print error message if the value is invalid IP Address
numeric
parameter: (none) error message: "Value must be numeric" Print error message if the value is invalid number
is_integer
parameter: (none) error message: "Invalid integer" Print error message if the value contains not integer
min_length
parameter: (integer) error message: "Characters must not lesser #parameter#" example: min_length[10]
Print error message if character length is less than #parameter#
max_length
parameter: (integer) error message: "Characters must not exceed #parameter#" example: max_length[10]
print error message if character length is greater than #parameter#
exact_length
parameter (integer) error message - "Characters must not exceed #parameter#" example: exact_length[10]
print error message if character length is not equal to #parameter#
greater_than
parameter (float) error message - "Value must greater than #parameter#" example: greater_than[10]
print error message if value is less than or equal to #parameter# note: can be only used to number value
greater_than_equal_to
parameter (float) error message - "Value must greater than #parameter#" example: greater_than_equal_to[10]
print error message if value is less than to #parameter# note: can be only used to number value
less_than
parameter (float) error message - "Value must less than #parameter#" example: less_than[10]
print error message if value is greater than or equal to #parameter# note: can be only used to number value
less_than_equal_to
parameter (float) error message - "Value must less than #parameter#" example: less_than_equal_to[10]
print error message if value is greater than to #parameter# note: can be only used to number value
in_list
parameter (string) error message - "Value must be in predermined list #parameter#" example: in_list[apple, grapes, mango]
print error message if value is not in predetermined list value
not_in_list
parameter (string) error message - "Total words must be exactly #parameter#" example: not_in_list[apple, grapes, mango] print error message if value is in predetermined list value
total_words
parameter (integer) error message - "Total words must be exactly #parameter#" example: total_words[2]
value total word count is not equal to #parameter#
total_words_greater_than
parameter (integer) error message - "Total words must be greater than #parameter#" example: total_words_greater_than[2]
value total word count is less than to #parameter#
equal_to_setting
parameter (string) error message - "Value must equal to setting #setting_value#" example: equal_to_setting[fullname]
value is not equal to set #settings# Note: the parameter is the field id.
not_equal_to_setting
parameter (string) error message - "Value must not equal to setting #setting_value#" example: not_equal_to_setting[fullname]
value is equal to set #settings# Note: the parameter is the field id.