BentoBox

The BentoBox2 Developer Hub

Welcome to the BentoBox2 developer hub. You'll find comprehensive guides and documentation to help you start working with BentoBox2 as quickly as possible, as well as support if you get stuck. Let's jump right in!

Get Started    Developer Documentation

Box Basics

Boxes are list or collection of data items that is accessible in the Boxes section of the Bentobox CMS administrator's panel. Boxes can have any number of custom fields that you wish to add, and can be assigned an Engine (a standard set of fields that dictates a more structured behavior). Boxes can also be categorized.

A list of Locations Boxes (right column) as well as the list of all available types of Boxes (middle column)

A list of Locations Boxes (right column) as well as the list of all available types of Boxes (middle column)

To define a box, add a json file to the directory /config/boxes/. (E.g. /config/boxes/menus.json) To define a template which will be used to render an instance of this box, add an HTML file at the corresponding path in the templates directory (e.g. /templates/boxes/menus.html).

Think Inside the Box

When you start a BentoBox theme, you have no boxes configured by default. To create a box, simply create a file in the config/boxes directory inside your theme folder.

A typical config file might look like this:

{
    "engine": "location",
        "has_categories": true,
    "fields": {
        "background_color": "color",
        "latitude": "text",
        "longitude": "text"
    }
}

This gives you a new box that has all of the standard location fields, with additional ones background_color, latitude, longitude

The name of the box will come from the filename (e.g. locations.json). You can override the name by specifying a name value in the json file.

Engines are highly recommend, though not required for a Box

Engines allow for the exposure of consistent API endpoints, so use them where you can. If you want to create a box that only has custom fields, simply omit the "engine" from your configuration file.

Here is an example of a more complex box that has no Engine and only Custom Fields.

{
	"name": "Tacos",
	"fields": {
		"type": "text",
		"description": "wysiwyg",
		"is_delicious": "boolean",
		"how_delicious": {
			"title": "How Delicious?",
			"type": "dropdown",
			"options": ["Choose one", "Very", "A little", "Not at all"]
		},
		"related_gallery": {
			"type": "relationship",
			"box": "galleries"
		},
		"custom_css": "code",
		"background_color": "color",
		"age": "number",
		"ingredients": {
			"type": "repeater",
			"items": {
				"name": "text",
			}
		},
	}
}
The modal Edit Box interface rendered by the code snippet above

The modal Edit Box interface rendered by the code snippet above

Box Basics