This document is a developer's reference for creating theme settings. Be sure to read the settings overview for background information on how these are implemented.

Settings types are assigned using the type attribute. Each type is demonstrated below.

select

For displaying a select element containing one or more options. Example:

"settings": {
  "Layout" {
    "icon":"layout",
    "settings": {
      "img_align": {
        "label": "Image align",
        "type": "select",
        "options": [
          { "label":"Top", "value": "top" },
          { "label":"Middle", "value": "middle" },
          { "label":"Bottom", "value": "bottom" }
        ],
        "value": "middle"
      }
    }
  }
}

boolean

For displaying a checkbox. Example:

"settings": {
  "Layout" {
    "icon":"layout",
    "settings": {
      "albums_detail_truncate": {
        "label": "Truncate caption",
        "type": "boolean",
        "value": true
      }
    }
  }
}

To output a string value instead of true or false you would add a "values" property with replacement values. Example:

"settings": {
  "Layout" {
    "icon":"layout",
    "settings": {
      "albums_detail_truncate": {
        "label": "Truncate caption",
        "type": "boolean",
        "values": {
          "true": "uppercase",
          "false": "none" 
        },
        "value": "uppercase"
      }
    }
  }
} 

color

For displaying a hex color picker and input. Example:

"settings": {
  "Style" {
    "icon":"style",
    "settings": {
      "background_color": {
        "label": "Background",
        "type": "color",
        "value": "#000000"
      }
    }
  }
}

To output RGBA values add a with_alpha property set to "true" and a value that uses RGBA formatting. When displayed in the Settings panel a second alpha setting will automatically be created underneath the color setting.

"settings": {
  "Style" {
    "icon":"style",
    "settings": {
      "background_color": {     
        "label": "Background",
        "type": "color",
        "with_alpha": "true",
        "value": "rgba(0,0,0,.85)"
      }
    }
  }
}

slider

For editing a numerical value within a defined range using a horizontal slider. Example:

"settings": {
  "Layout" {
    "icon":"layout",
    "settings": {
      "title_size": {
        "label": "Size",
        "type": "slider",
        "min": 10,
        "max": 50,
        "step": 1,
        "value": 19,
        "suffix": "px"
      }
    }
  }     
}

number

For editing a numerical value within a defined range using a form input. Example:

"settings": {
  "Layout" {
    "icon":"layout",
    "settings": {
      "title_size": {
        "label": "Columns",
        "type": "number",
        "min": 1,
        "max": 5,
        "step": 1,
        "value": 3
      }
    }
  }     
}

string

For editing a string of text. Example:

"settings": {
  "Layout" {
    "icon":"layout",
    "settings": {
      "footer_number": {
        "label": "Phone number",
        "type": "string",
        "value": "555-404-1212"
      }
    }
  }
}