Customizer Framework

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.

Description

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.

Available Controls:

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
Email
File Uploader
Image Uploader
Markup
Numeric
Radio
Range
Select
Size
Switch
Tagging Select
Tagging
Text
Textarea
Timepicker
Toggle
URL
Video Uploader

Documentation

Installation

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.

Install as Plugin

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'
    ]);
}

Install as Library

Copy folder customizer-framework anywhere inside your theme
Require customizer-framework/customizer-framework.php in your functions.php file
Add use CustomizerFramework\Core\Customizer; to the top of your functions.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
}

Panel

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
]);

Parameters

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.

Section

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'
]);

Parameters

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.

Fields

Audio Uploader

The audio-uploader lets you add a field for uploading and selecting audio files in WordPress Media Library.

Parameters

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' ]

Examples

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' ]
] );

Usage

The get_theme_mod() function is recommended to retrieve data.

wp_get_attachment_url(get_theme_mod('audiodb1'));

Button Set

The button-set lets you add a field for selecting data in a set of button.

Parameters

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.

Examples

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'
    ]
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Return a string
echo get_theme_mod('buttonsetdb1');

Checkbox

The checkbox lets you add a field checkbox.

Parameters

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.

Example

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,
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Return a boolean
$is_checked = get_theme_mod('checkboxdb1');

Checkbox Multiple

The checkbox-multiple lets you add a checkbox where you can check multiple checkbox.

Parameters

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.

Example

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'
    ]
]);

Usage

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')));

Checkbox Pill

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'

Examples

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'
   ]
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Returns a array
$choices = json_decode(get_theme_mod('checkboxpilldb1'));

Code Editor

The code-editor lets you add a code editor field.

Parameters

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' ]

Example

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'
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Return a string
echo get_theme_mod('codedb1');

Color Picker

The color-picker lets you add a field for selecting colors.

Parameters

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.

Examples

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
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Return a string
echo get_theme_mod('colorpickerdb1');

Color Set

The color-set lets you add a field for selecting color.

Parameters

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".

Example

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
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Return a string
echo get_theme_mod('colorsetdb1');

Content Editor

The content-editor lets you add a Content Editor Field.

Parameters

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' ]

Examples

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' ]
] );

Usage

The get_theme_mod() function is recommended to retrieve data.

// Return a string
echo get_theme_mod('editor1');

Date Picker

The date-picker lets you add a field for selecting date.

Parameters

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

Examples

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',
] );

Usage

The get_theme_mod() function is recommended to retrieve data.

// Return a array
$date = explode(',', get_theme_mod('datepickerdb1'));

Dropdown Custom Post

The dropdown-custom-post lets you add a select field where the options is custom post.

Parameters

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'.

Example

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'
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Get the post by id
$post = get_post(get_theme_mod('dropdowncustompostdb1'));

Dropdown Page

The dropdown-page lets you add a select field with list of pages.

Parameters

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'.

Example

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'
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Get the page by id
$page = get_post(get_theme_mod('dropdownpagedb1'));

Dropdown Post

The dropdown-post lets you add a select field with list of posts.

Parameters

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'.

Examples

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'
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Get the post by id
$post = get_post(get_theme_mod('dropdownpostdb1'));

Email

The email lets you add a email field.

Parameters

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.

Examples

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'
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Returns a string
echo get_theme_mod('emaildb1');

File Uploader

The file-uploader lets you add a field for uploading and selecting document files in WordPress Media Library.

Parameters

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' ]

Examples

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' ]
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Getting the url
wp_get_attachement_url(get_theme_mod('filedb1'));

Image Uploader

The image-uploader lets you add a field for uploading and selecting images in WordPress Media Library.

Parameters

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' ]

Examples

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' ]
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Getting the url
wp_get_attachement_url(get_theme_mod('imageuploaderdb1'));

Markup

The markup lets you add a HTML in Theme Customizer Sizebar.

Parameters

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.

Examples

Customizer::field('markup', [
   'id'       => 'markup1',
   'section'  => 'section_1',
   'priority' => 1,
   'html'     => 'HTML Markup in here...'
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Returns a string
echo get_theme_mod('markup1');

Numeric

The numeric lets you add a field for number.

Parameters

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.

Examples

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
   ]
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Returns a string
echo get_theme_mod('numericdb1');

Radio

The radio lets you add a field radio.

Parameters

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.

Examples

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' )
   ]
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Returns a string
echo get_theme_mod('radiodb1');

Range

The range lets you add a range field.

Parameters

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.

Examples

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
   ]
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Return a integer
echo get_theme_mod('rangedb1');

Select

The select lets you add a select field.

Parameters

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

Examples

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'
   ]
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Return a integer
echo get_theme_mod('selectdb1');

Size

The size lets you add a input field for size.

Parameters

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.

Examples

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' ],
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Return a integer
echo get_theme_mod('sizedb1');

Switch

The switch lets you add a field switch.

Parameters

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.

Examples

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,
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Returns boolean
$is_checked = get_theme_mod('switchdb1');

Text

The text lets you add a text field.

Parameters

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.

Examples

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...'
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Return a string
echo get_theme_mod('textdb1');

Textarea

The textarea lets you add a textarea field.

Parameters

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.

Examples

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...'
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Return a string
echo get_theme_mod('textareadb1');

Time Picker

The time-picker lets you add a time picker field.

Parameters

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.

Examples

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
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Return a string
echo get_theme_mod('timepickerdb1');

Toggle

The toggle lets you add a field toggle.

Parameters

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.

Examples

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,
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Returns boolean
$is_checked = get_theme_mod('toggledb1');

Url

The url lets you add a url field.

Parameters

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.

Examples

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'
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Returns a string
echo get_theme_mod('urldb1');

Video Uploader

The video-uploader lets you add a field for uploading and selecting video files in WordPress Media Library.

Parameters

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' ]

Examples

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' ]
]);

Usage

The get_theme_mod() function is recommended to retrieve data.

// Getting the url
wp_get_attachement_url(get_theme_mod('videuploaderdb1'));

Show/Hide Conditionally

Active Callback

The active_callback can be use to set if field will be display under a condition. For more information you can read Customizer APIs.

Examples

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)
]);

Utilities

The Customizer Framework also provide useful methods that will help in common tasks.

Gets an array of pages

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()
]);

Gets an array of posts

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' )
]);

Gets all available taxonomy

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()
]);

Gets all available post types

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()
]);

Gets material colors

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
]);

Validation

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.

How to add validation?

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;
}

Validation Rules

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.

Name		Name	Last commit message	Last commit date
Latest commit History 3 Commits
assets		assets
schemas		schemas
src		src
.editorconfig		.editorconfig
README.md		README.md
autoload.php		autoload.php
customizer-framework.php		customizer-framework.php
customizer.example.json		customizer.example.json
index.php		index.php

affinity4/customizer-framework

Folders and files

Latest commit

History

Repository files navigation

Customizer Framework

Description

Available Controls:

Documentation

Installation

Install as Plugin

Install as Library

Panel

Parameters

Section

Parameters

Fields

Audio Uploader

Parameters

Examples

Usage

Button Set

Parameters

Examples

Usage

Checkbox

Parameters

Example

Usage

Checkbox Multiple

Parameters

Example

Usage

Checkbox Pill

Examples

Usage

Code Editor

Parameters

Example

Usage

Color Picker

Parameters

Examples

Usage

Color Set

Parameters

Example

Usage

Content Editor

Parameters

Examples

Usage

Date Picker

Parameters

Examples

Usage

Dropdown Custom Post

Parameters

Example

Usage

Dropdown Page

Parameters

Example

Usage

Dropdown Post

Parameters

Examples

Usage

Email

Parameters

Examples

Usage

File Uploader

Parameters

Examples

Usage

Image Uploader

Parameters

Examples

Usage