Header & Footer Manifest (manifest.json)

The manifest.json file is the core configuration file for Header and Footer presets in the Sanil Website Builder. It tells the builder what settings are available to the user, how they should be grouped, what types of controls to render, and which breakpoints they apply to.

Directory Structure

A preset is defined by a folder inside public/presets/{type}/{slug}/. The folder name acts as the preset's unique slug. This applies to all preset types: header, footer, single, page, archive, and 404. Inside this folder, a valid manifest.json file must exist alongside the index.php and style.css files.

Example: public/presets/header/default/manifest.json

Top-Level Properties

  • label (string): The human-readable name of the preset (e.g., "Default").
  • description (string): A short description of the preset's layout and purpose.
  • slot_groups (array): An array of groups that organize the settings slots in the UI.

Slot Groups

Each object in the slot_groups array represents an accordion or section in the settings panel. * label (string): The title of the group (e.g., "Main Menu"). * slots (array): An array of slot configurations that belong to this group.

Slot Configuration

A slot defines a single setting (like a color picker, a select dropdown, or a text field).

  • id (string): The unique identifier for this setting. This key will be used to retrieve the value in index.php.
  • type (string): The type of control to render. See Supported Slot Types.
  • label (string): The UI label for the setting.
  • default (string | object): The default value. See Default Values.
  • breakpoints (array, required): Specifies which device breakpoints this setting applies to. See Breakpoints.
  • options (array, optional): Required only for select types. Defines the available choices as { "value": "...", "label": "..." }.

Breakpoints (Strictly Enforced)

The breakpoints key is required for every slot. If it is missing or empty, the slot is considered invalid and will be completely ignored by the builder.

The breakpoints array controls two things: visibility in the UI and which overrides can be saved. When a user switches devices in the builder preview (e.g. clicks "Tablet"), the UI evaluates the breakpoints array. If the current active device is not in the array, the setting is completely hidden. Furthermore, if a section (slot_group) has zero visible settings for the current device, the entire section header is collapsed and hidden.

  • ["desktop"]: The setting is only visible when the user is editing in Desktop view. When they switch to Tablet or Mobile, the setting disappears. This is perfect for structural layouts or settings (like a top bar background) that simply do not exist or apply on mobile devices.
  • ["desktop", "tablet", "mobile"]: A fully responsive setting. The user can switch the active device in the builder, and the setting will remain visible. Changing the setting will save independent values for Tablet and Mobile overrides, stored in the database with __tablet and __mobile suffixes (e.g., nav_bg__tablet).

Best Practice: Use ["desktop", "tablet", "mobile"] for visual properties like colors, font sizes, and alignments that need adjustments across screen sizes. Use ["desktop"] for structural properties or elements that are physically hidden via CSS on mobile views.

Default Values

The default property specifies the starting value for the slot.

Single Default: If the default is the same for all breakpoints (or if the slot is non-responsive), you can provide a simple string:

"default": "#ffffff"

Breakpoint-Specific Defaults: If your slot is responsive, you can provide an object to define different starting values for different devices:

"default": {
    "desktop": "#ffffff",
    "tablet": "#eeeeee",
    "mobile": "#dddddd"
}

Note: Even if you provide object defaults, you still must declare the breakpoints array to enable the UI controls.

Supported Slot Types

  • color: A color picker (supports hex, rgba, and global theme variables).
  • toggle: A simple yes/no switch. Returns "1" (true) or "0" (false).
  • menu_select: A dropdown automatically populated with all registered WordPress navigation menus.
  • sidebar_select: A dropdown populated with all registered WordPress widget areas (sidebars).
  • image_url: Opens the WordPress media library to select an image. Returns the image URL.
  • select: A standard dropdown. Requires the options array.
  • font_family: A dropdown populated with Google Fonts.
  • font_weight: A dropdown populated with font weights (100 to 900).
  • text: A standard single-line text input field.
  • textarea: A multi-line text input field.
  • shortcode: A text field meant for entering shortcodes.