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

Wireframe Basics

BentoBox offers the option to define a Wireframe of a page Template or box. Wireframes offer an intuitive, user-friendly interface for anyone making edits to a page's settings and content. Wireframes are accessible when editing a page via the Pages/Nav section of the CMS administrator's panel.

An example of a Wireframe configured for a locations page.

An example of a Wireframe configured for a locations page.

If fields are defined outside of sections referenced by the Wireframe, they will appear in a Page Settings modal, accessible through a button above the Wireframe (not shown in above example). Typically, options intended for the Page Settings should be values not pertinent to specific content on the page. Options such as page-wide stylistic controls or metadata are better suited for inclusion within the Page Settings modal.

Wireframes are defined in a Template's config file as arrays of objects. Each object represents a row in the Wireframe, and a key/value pair defines a column within that row. The key determines the content the Wireframe Block will reference and the value allows customization of the Block's appearance.