Blueprint

Theme options are setup with blueprints in the theme.json.

A globalBlueprint provides global options that will be set for all pages within a Pagedip. These are set in the Pagedip's settings page. A blueprint will provide options that can be set globally in the Pagedip's settings page, but can then be overridden and set on a page-to-page basis in individual page settings.

Theme options can be organized into groups. Each key within the blueprint object is treated as the name of a theme option group.

blueprint.options_group_name

This can be given any name that makes sense to you, i.e. "settings" or "footerOptions". Using multiple groups can help organize options by type, and in the Pagedip Writeroom the theme options will be displayed to the user by group.

options_group_name.label

The label will be displayed as the name for the theme options group in the Pagedip Writeroom settings.

options_group_name.options

An object containing the individual options for this theme options group.

"blueprint": { // object of theme options
	"options_group_name": { // object with any name for options group 
		"label": "Page Settings", // label for options group
		"options": {
			"option_name": { ... }
		}
	}
}

Individual option:

blueprint.options_group_name.options.option_name

An individual option's key can be set to any name that you like, i.e. "content" or "color". The option is an object containing the following fields:

label

The option's label.

description

A brief description of what the option does.

type

The options input type. Available types are text, textarea, checkbox, and dropdown

default

The option's default value.

values

For input type dropdown, an object providing options for the dropdown. Keys are the option's display name and values are the option's value.

Example blueprint:

"blueprint": { // object of theme options
	"options_group_name": { // object with any name for options group 
		"label": "", // label for options group
		"options": { // object of options available within this group
			"option_name": { // object with any name representing a single option
				"label": "", // label for this option
				"description": "", // description of option
				"type": "", // input type
				"default": "" // default value
				"values": { // values for dropdowns
					"Display Name": value // key is name, value is option value,
					...
				}
			}
		}
	}
},

All data from the theme, template, and embed blueprints are passed into the templates as variables. Properties on these objects can be accessed with dot notation or bracket syntax.

{{ options.options_group_name.option_name }}
{{ options["options_group_name"]["option_name"] }}

Example Blueprint

Here is an example blueprint and global blueprint in a theme.json, followed by pictures of how the options are displayed in Pagedip.

{
	...,
	"globalBlueprint": {
		"globalSettings": {
			"label": "Global Settings",
			"options": {
				"globalOption_1": {
					"label": "Global Option",
					"type": "checkbox",
					"default": true
				}
			}
		}
	},
	"blueprint": {
		"settingsGroup1": {
			"label": "Settings Group 1",
			"options": {
				"option_1": {
					"label": "Option 1 Checkbox",
					"type": "checkbox",
					"default": false
				},
				"option_2": {
					"label": "Option 2 Text Input",
					"type": "text",
					"default": "Default Text"
				}
			}
		},
		"settingsGroup2": {
			"label": "Settings Group 2",
			"options": {
				"option_3": {
					"label": "Option 3 Textarea",
					"type": "textarea",
					"default": "default text in text area"
				},
				"option_4": {
					"type": "dropdown",
					"label": "Option 4 Dropdown",
					"default": "default-value",
					"values": {
						"Default Value": "default-value",
						"Value 1": "value-1",
						"Value 2": "value-2"
					}
				}
			}
		}
	}
}

In the Pagedip settings you'll see both the globalBlueprint options and the blueprint options.

In the individual page settings, you'll see just the blueprint options.