Customizer.json

This file defines the amount of control you have over your theme's appearence.

Each theme has its own specific customizer.json. It defines, which variables are displayed by default or only in advanced mode. The file is splitted into two main parts, controls and groups.

Controls

Controls define, how the value of a variable will be displayed in the customizer. By default, all variables are displayed inside an input element. You can change the default input field by using one of the following types.

Variables

After choosing the type of the input you need to define which variables should be affected by each type. You can use specific variables or just the wildcard character * to select a group of variables without setting every single variable.

{
    "vars": [
        "@global-border",
        "@global-light-border"
    ]
}

{
    "vars": [
        "*-color",
        "*-background"
    ]
}

Color picker

By setting "type": "color" the following example turns all variables which end with the word -color or -background into an easy to handle colorpicker, provided that the variable's value is a color value.

Example

{"controls": [
    {
        "type": "color",
        "vars": [
            "*-color",
            "*-background"
        ]
    }
]}

Select element

If a variable should only use specific values, you can easily turn the input element into a select element by using "type": "select" and adding the selectable options.

Example

{"controls": [
    {
        "type": "select",
        "vars": [
            "*-weight"
        ],
        "options": [
            {"name": "Normal", "value": "normal"},
            {"name": "Bold", "value": "bold"}
        ]
    }
]}

Fonts

When it comes to fonts, you can just use the select type like above or "type": "font" to create a select box for fonts, where you can add additional values like a font url or divide your fonts into groups.

Example

{"controls": [
    {
        "type": "font",
        "vars": [
            "*-font-family"
        ],
        "options": {
            "System Fonts": [
                {"name": "Arial", "value": "\"Helvetica Neue\", Helvetica, Arial, sans-serif"},
                {"name": "Consolas", "value": "Consolas, monospace, serif"}
            ],
            "Google Fonts": [
                {"name": "Abel", "value": "'Abel'", "url":"http://fonts.googleapis.com/css?family=Abel"},
                {"name": "Asul", "value": "'Asul'", "url":"http://fonts.googleapis.com/css?family=Asul"},
        }
    }
]}

Groups

Groups define, which variables will be diplayed in the sidebar of the customizer. You can assemble related variables in a group, apply a title or display them in Advanced Mode.

Example

{"groups": [
    {
        "label": "Backgrounds",
        "vars": [
            "@global-background",
            "@global-dark-background"
        ]
    }
]}

{"groups": [
    {
        "label": "Navbar",
        "advanced": true,
        "vars": [
            "@navbar-*"
        ]
    },
]}