Bento Theme Manual

About the Theme

Bento is a free multi-purpose WordPress theme packed with features and possibilities. With a variety of templates and settings, it can be used to create anything from personal blogs or landing pages to complex showcases and online shops. Bento is a result of years of theme-building expertise accumulated here at Satori Studio, making it a stable and reliable, yet at the same time remarkably flexible theme. With over 80 theme options as well as dozens of settings for individual pages and posts, Bento offers unprecedented customization possibilities for both beginners and experienced WordPress users.

Bento is responsive, retina-ready, and translation-compatible. The theme is also bundled with the Content Builder plugin by SiteOrigin, which offers an easy drag-and-drop interface for creating both simple and complex pages, with a choice from dozens of building blocks such as text, images, sliders, carousels, buttons, widgets, and many more.

Thank you for choosing Bento! We hope you will enjoy using it as much as we have enjoyed building it.

Version: 1.0 (changelog)
Theme demo:
Free download:

Support and Feature Requests

You can ask us a question or report a bug by email: We generally aim to respond to all requests and messages within 5 business days, yet would appreciate your patience taking into account the fact that the theme is a free and open-source item.

Moreover, if you have suggestions or ideas on how Bento or out support could become better, please do not hesitate to get in touch – we appreciate your feedback!


Please follow these steps to install Bento:

  1. Download the theme archive from the official theme page.
  2. In the admin area of your WordPress website, visit the Appearance -> Themes admin menu section.
  3. Click on the “Add New” button on top of the page.
  4. On the next screen, click on the “Upload Theme” button on top of the page.
  5. Click on the “Choose File” button that appears.
  6. In the pop-up window, navigate to the archive you’ve downloaded on step 1. and press “Open”.
  7. Click on the “Install Now” button to the right, which has now become active.
  8. Wait for the theme to upload and install; after the process completes, click “Activate” on the next screen.
  9. After a successful installation of the theme you will be prompted to install the bundled Content Builder plugins – please see the respective section of the current manual for more information.

That’s it, you’re all set!

Updating Bento

You can always download the latest version of Bento using the button on the official theme page or the download link from the automatic email you received after your initial download. After obtaining the “” archive, unzip it and upload the resulting “bento” folder into the following folder inside your WordPress installation: /wp-content/themes/ using an FTP client or your hosting provider’s file manager. Agree to replace all existing files if prompted. Updating the theme will not erase any theme settings, pages, posts or other content.

Theme Options

Bento comes with a powerful set of options that allow full customization of the theme according to your wants and needs. All theme options can be set through the Theme Options panel in your admin area, by visiting the Appearance -> Theme Options section. After any modifications to the theme options please do not forget to click on the blue “Save Changes” button which can be found at the bottom of each section.

The Theme Options panel is separated into 10 sections (vertical tabs):

  1. Website Elements – in this section you can upload the images to be used as logo and favicon (browser tab icon), as well as set up other elements of the website such as displaying next posts in blog without reloading the page, fixing the header on top of the window when scrolling through the website, etc.
  2. Layout and Background – here you can set the width of the content area, choose between a wide and a boxed layout for the website, as well as set up the backgrounds for the website and the content area.
  3. Fonts and Typography – in this section you can input the fonts to be used for the headings, the menu, and the rest of the texts of your website. Just go to the Google Fonts repository, pick any fonts you like, and write their names into the respective fields. Note that all fonts used in this section can also be identical if you wish.
  4. Header Colors – this section allows you to choose the colors of each separate element in the header section of the website, including foremost the main menu.
  5. Content Colors – here you can change the colors of each element in the body of the website, i.e. the content and the sidebar areas.
  6. Footer Colors – the third styling section lets you choose the color of every element in the footer, the lowermost part of the website.
  7. Custom CSS – here you can add your own CSS code to the website, without the need to edit the style.css file.
  8. Page Meta Information – this section contains the settings to improve your website’s SEO and stand out in the search engine results.
  9. Call to Action Popup – the settings in this section enable you to activate and customize the call-to-action popup for converting your visitors. Please note that this feature is only available with the Bento Expansion Pack.
  10. Preloader – here you can activate and customize the loading animation for your website’s pages in order to improve user experience and only display fully rendered pages to your visitors. Please note that this feature is only available with the Bento Expansion Pack.

There are two menu locations in Bento: in the primary header area where the logo is situated (primary menu), as well as in the footer, below the footer widget area and next to the copyright statement. The primary menu can have sub-menus up to two levels deep (i.e. a sub-menu item can have its own sub-menu); the footer menu does not display submenus and is intended for a flat navigation section, such as terms and conditions, contact information, etc.

The menus are sourced from the native WordPress menu constructor, found in the Appearance -> Menus admin section. You can create and assign your own menus to each of the menu locations: first, create a new menu by clicking on the respective link just below the “Edit Menus” tab, entering a unique name in the “Menu Name” box, and clicking on the blue “Create Menu” button on the right; once you’ve created a menu, the checkboxes in the “Theme Locations” option under the “Menu Settings” section will provide an opportunity to assign the menu to one of the locations mentioned above (you can also change it later by visiting the “Manage Locations” tab on the same admin page).

To add new items to a menu, tick the respective page, post, or term in the panels on the left hand side of the menus admin page; you can rearrange added items by means of drag-and-drop, and create sub-menus by dragging an item under its intended parent item and then slightly more to the right, until it sticks.

Page Layouts

Bento comes with a flexible page layout system, consisting of three parts, each of which is configured while in the editor mode for a particular page, post or product:

  1. Page templates, of which there are two: the default template (i.e. classical page) and the grid template, which, in turn comes in three varieties (see details below). Any page can be assigned any of the two templates by using the “Template” drop-down in the “Page Attributes” settings block on the right hand side of the page edit screen.
  2. Grid modes, of which there are three: masonry – a tightly packed layout using various tile sizes which fills all available gaps (demo); columns grid – a layout which uses “cards” with images and text and aligns them by columns (demo); and rows grid – a layout which organizes the blocks by rows, independently of their heights (demo). Grid modes can be switched using the “Grid mode” drop-down in the “Grid settings” box which appears at the bottom of the page when the “Grid” template has been chosen in the “Template” drop-down in the “Page Attributes” settings block on the right hand side of the page edit screen
  3. Sidebar configurations, which exist in three varieties: right-sidebar (default), left-sidebar, and full-width. Each of these can be mixed with any of the page templates or grid modes described above. To switch between sidebar configurations in Bento, use the “Sidebar layout” drop-down in the “General settings” box underneath the text area editor, in the edit mode of the particular page.

The pages with “grid” templates (see point 1 above) act as containers for individual items, which can be posts, products (in the presence of WooCommerce) and projects (in case you have the Bento Expansion Pack installed and activated). You can set which content types to display on a grid page by using the “Content Types” checklist found in the “Grid Settings” box which appears underneath the content area when switching to the “Grid” template in the page editor mode. It should also be noted that individual posts (Posts admin menu section), products (Products admin menu section) as well as projects (Portfolio admin menu section) have a separate settings box called “Masonry Tile Settings” which allows customizing the look of the particular item on a grid page with the “masonry” grid mode (see points 1 and 2 above for details).

Apart from that, you can add even more diversity to your pages by using the bundled Content Builder, which enables constructing column grids with 2-6 columns of various relative widths, as well as mini-grids and other layouts elements right inside the content area of any page or post.

One-Page Mode

Bento is capable of creating one-page websites, which implies having all information on the same page, with the navigation menu scrolling to the respective section of that page without the need to reload the page every time the visitor clicks a link. This layout has become quite popular in the recent years, especially for smaller websites with a simple structure which does not require multi-layered navigation. One-page mode can increase the impact of your website by keeping the visitors engaged.

It should be noted that using one-page mode in Bento implies the presence of the bundled Content Builder plugin (see installation details in the respective section of this manual). The following steps outline the process of creating a single-page website using Bento:

  1. Create a page (Pages -> Add New) using the Builder – while in the page edit mode, click on the “Page Builder” tab in the top right corner of the content area. This will be your canvas for the one-page layout.
  2. Use rows (the “Add Row” button in the top left corner of the content area) to organize the contens of the page into sections, corresponding to how you want your one-page layout to be structured.
  3. For each such row, hover over the small wrench/spanner icon in the top right corner, and click on “Edit row” in the hover-menu. In the pop-up window that opens, click on the “Attributes” section under the “Row Styles” on the right. Input an identifier for the row into the “Row Class” field; the identifier should consist of lowercase latters, underscored, and dashes – e.g. “contact-us”. Click on the blue “Done” button to save the changes.
  4. Save/update the page by clicking on the blue “Publish” (“Update”) button in the top right corner of the page editor view.
  5. Visit the Appearance -> Menus admin section and create a menu, if you haven’t yet done so (please see this chapter for more details on menus). In the accordeon on the left click on “Custom Links”, and into the URL field input the “Row Class” identifier you’ve specified earlier, preceded by a hash, i.e. “#contact-us”. The “Link Text” field should contain the name of the menu item as seen by the user. After filling out the fields click on the “Add to Menu” button below and then on the blue “Save Menu” button on the right in order to save the changes.
  6. Voila! The menu items you add in this fashion will link to specific sections of your page, and the window will scroll smoothly to the required location thanks to the theme’s built-in scripts.

Header Layouts

The theme offers four distinct header configurations to personalize the look and feel of your website, which can be set by using the “Menu Layout” drop-down in the “Layout and Background” section of the Theme Options panel:

  1. Top, right-aligned: this is the classic configuration with the header on top, the logo on the left and the menu on the right.
  2. Top, centered: the header is on top of the page, with both the logo and the menu centered (see demo).
  3. Top, hamburger button + overlay: the header is on top of the page, with the logo on the left and the menu represented by a hamburger icon on the right; clicking on the hamburger opens a full-page overlay with the menu (see demo). This option is most suitable for websites with flat navigation structure, since the overlay menu does not support submenus.
  4. Left side: the header is on the left side of the page, pushing the content area to the right. The logo and the menu are left-aligned inside the header (see demo).

Widget Areas

There are three widget areas in Bento: the Sidebar which is situated on the right or left side of the content (see the Page Layouts section for more details on content alignment); the Footer which is situated below the content and above the copyright area; and the WooCommerce sidebar which is identical to the first widget area in its position but is displayed only on WooCommerce-related pages, such as the shop, individual product pages, checkout, etc.

By default all widget areas are empty, you can add widgets to them by visiting the Appearance -> Widgets admin menu section – simply drag the needed widget from the left side of the view and drop it onto one of the widget areas on the right. It must be noted that when a widget area is empty, it will not display on the front-end – in other words, if there are no widgets in the Sidebar widget area, all pages and posts with sidebar layouts will still appear as full-width (same logic is applied to other widget areas); this is done automatically to avoid unnecessary swathes of empty space on the website.

Color Customization

You can change the color of any group of elements in Bento using the visual colorpickers in the Theme Options panel; the respective Theme Options tabs are “Header Colors”, “Content Colors”, and “Footer Colors”. To change a color setting, click on the rectangle to the right of the “Select Colour”, which will open a hover control; there are three ways of interacting with the control: by clicking into any part of the square gradient area, by using the colored squares on the bottom (which will change the hue of the gradient area), and by using the draggable caret on the right, which will change the level of saturation. Apart from using the hover control, you can simply input the color in the hex notation into the field which appears next to the colorpicker once you click on it. To clear the value of the colorpicker, use the “Clear” button on the right of the active hover control. Do not forget to click on the blue “Save Changes” button underneath each section of the Theme Options panel to preserve your colors!

Visual Content Builder

Bento comes bundled with a powerful free content builder by SiteOrigin which allows easily creating awesome professional layouts from a set of “building blocks”, including text, images, buttons, grids, widgets, and many more. Its use is not required for Bento to work, yet your webmaster experience will be much more pleasant with the content builder installed. Upon activating the Bento theme you will see a prompt on top of each admin page recommending to install the Content Builder, which is as easy as clicking the link in the prompt. It is also recommended to install the second offered bundled plugin, the Extra Elements package, which will enhance your Content Builder with cool additional blocks such as galleries, sliders, post grids, etc. Alternatively, you can also install both plugins manually from the Plugins -> Add New admin section. After having installed both plugins you will need to activate them by clicking on the “Activate” link underneath the title of the respective plugin. You can also install the bundled plugins by visiting the Appearance -> Install Required Plugins admin menu section.

For a detailed guide on using the Content Builder, including high-quality tutorial videos, please refer to the official manual.

Post Formats

There are six post formats in Bento, which can be switched between using the “Format” settings box on the right side of the post editor mode view:

  1. Standard – the default format, used for displaying the text, images, and other content in a normal way.
  2. Aside – intended for shorter remarks, thoughs, announcements, etc. This format does not display a title.
  3. Gallery – used for gallery-type posts, such as photo collages.
  4. Quote – pre-formatted for displaying quotes; the content of the post becomes the text of the quote, and the title of the post is used as the author of the quote.
  5. Link – useful for recommending specific links; the title of the post is used as the text (anchor) of the link, while the content of the post should only contain the URL of the link.
  6. Image – intended for displaying single images.

Extended Page Headers

Pages, posts and other content types in Bento can display full-width headers with text and button overlays like seen on the theme demo homepage or this page. To switch on this feature, tick the “Activate Extended Header” checkbox in the “Page Header Settings” section underneath the content area in page editor mode. Doing so will expand a set of additional options which enable adding an image background to the header, defining its height by setting the padding above and below the title, customizing the coloured semi-transparent overlay to increase readability of the title, as well as adding primary and secondary action buttons to the header.

Vector Icons

Bento comes with 500+ vector icons from FontAwesome, which you can use on any page or post by inserting a simple piece of markup: an <i></i> tag with a class which specifies which icon to use. For detailed usage instructions please refer to the official FontAwesome guide.

Translating Bento

The theme uses proper WordPress functions to wrap all localizable strings, which means it can be both manually translated and used with third-party translation plugins such as the free Polylang or the paid WPML. The files needed for a manual translation are located in the “languages” folder inside Bento’s main directory; for detailed instructions on translating themes manually please see this guide.

WooCommerce + Bento

Bento is fully compatible with the world’s most popular free e-commerce WordPress plugin, WooCommerce. The plugin is free and is not included within the theme, i.e. it must be installed separately to activate Bento’s WooCommerce features. No additional steps are required from the theme’s side after the installation of WooCommerce – however, you can adjust certain additional parameters in the “Website Elements” tab of the Theme Options panel For a demonstration of how Bento works with WooCommerce, please see the “E-commerce” section of the official theme demo.

The grid page template in Bento works just as well with WooCommerce products – you can tick the “product” option in the “Content Types” setting found in the “Grid Settings” box which appears underneath the content area when switching to the “Grid” template in the page editor mode in order to create project grids or even mixed post+project grids. The “Masonry Tile Settings” box also works for individual products (enter the editor mode for the product and scroll to the bottom of the view) for customizing how a particular item will look as a tile in a masonry grid.

Importing Demo Content

There is a sample data file available for Bento which includes all data from the official theme demo, it can be downloaded here. In WordPress, you can import data by going to Tools -> Import, clicking on the WordPress installer and installing it in the pop-up window, then clicking “Activate Plugin & Run Importer”, and choosing the xml content file to upload. After you press “Upload file and import”, do not forget to check the “Download and import file attachments” box (you can also set the author for the imported posts in the same screen, but that is not mandatory), then press “Submit”. In case you do not have the WooCommerce plugin installed, the “product” and “product tag” items will return errors when imported – you can ignore the error messages in this case. In case you install WooCommerce after importing demo content, the demo products will not be visible and will need to be imported anew – you can use this separate source file to do it. Moreover, in case you install the Bento Expansion Pack after importing demo content, the demo projects for the portfolio will not be visible and will need to be imported anew – you can use this separate source file to do it.

Please note that the sample data does not contain any settings in the “Settings” admin panel section or any Theme Options panel settings; you will also need to assign the menus to their respective locations – make sure that the theme location checkbox is checked in the “Menu Settings” section right under the menu constructor in the Appearance -> Menus admin section.

Frequently Asked Questions

I have uploaded the theme manually but upon pressing “activate” the system returns a white screen and the website stops working. What the hell is wrong?!
No panic :) It is most probably due to your hosting server running out of php memory, breaking the website when you tried to install an additional item. What needs to be done is to add the following line to wp-config.php file in the root folder of the WordPress website:

define('WP_MEMORY_LIMIT', '2048M');

If this does not work, try doubling the figure in the brackets; if still broken, please contact us.

I have uploaded the theme manually and it shows the message “Are you sure you want to do this? Please try again.” What went wrong?
Please upload the unzipped theme folder (it should have the name “bento”) into the “wp-content/themes/” directory of your WordPress installation using an FTP client – some hosting providers have small file upload limits for user convenience which limits the usage of WordPress’ internal theme uploader. After that, visit the Appearance -> Themes admin page, locate the newly uploaded theme from the list, and click “Activate”.


Like WordPress itself, Bento is licensed under the GPL (GNU General Public License) and is free for personal and commercial application – use it to make something cool, have fun, and share what you’ve learned with others.


Version 1.3
Added highlight for the current position in the footer menu.
Fixed mobile menu animation on iOS.
Fixed sidebar logic in the absence of sidebar widgets.
Fixed Google maps header behaviour for maps without custom styles.
Fixed post meta for posts in Uncategorized category.
Fixed header menu submenu styling on transparent headers with large logos.
Fixed theme welcome screen on side-header configuration.
Added full translation into Ukrainian (special thanks to Vadim Chernobublik).
Improved footer widget area compatibility with Polylang plugin.
Fixed Theme Options tab navigation beaviour in Firefox in cyrillic languages.
Fixed Google Fonts appearance in Safari for latin-ext and cyrillic characters.
Fixed sidebar on WooCommerce shop category pages.

Version 1.2
Added a possibility to upload a separate logo for mobile devices.
Site header custom color now also applies to fixed header.
Fixed Theme Options framework bug in php 7.
Fixed the bug with the “Hide title” setting for Grid pages.
Header background color setting now also affects side header layout.
Added full translation into French (special thanks to

Version 1.1
Added a possibility to upload a separate tile image apart from thumbnails.
The heading font setting in Theme Options now affects extended header headings.
Added full translation into Russian.
Fixed compatibility of link colors with user-defined styles in Content Builder.
Fixed sidebar layouts for pages that were created using other themes.

Version 1.0.2
Fixed the submenu animations and styling for “side” menu layout.
Added extra padding to the mobile menu in the absence of logo.
Hiding mobile menu elements if no menu has been created.

Version 1.0.1
Updated theme screenshot.

Version 1.0
Initial release.

Bento Expansion Pack

About the Expansion Pack

Bento Expansion Pack is a plugin that has been developed by the authors of Bento in order to add more capabilities which are not permitted for a theme in the WordPress repository. It’s easy to install and offers a host of cool additional features such as portfolio functionality, pre-built layouts, video and maps headers, preloaders, and many more. The Expansion Pack also allows to fully customize the copyright statement in the footer, removing all branding. The Pack can be downloaded here for a one-time price of $17, which includes support and lifetime updates, and is about 3 times less than what you’d need to pay for a premium theme elsewhere.

Version: 1.0 (changelog)
Expansion Pack demo:, “Expansion Pack” menu section.


Please follow these steps to install and activate the Expansion Pack:

Step one: install the Expansion Pack.

  1. Purchase the Pack at the bottom of the official page and download the archive using the link in the purchase confirmation email which is sent automatically to the email address you’ve indicated during the checkout.
  2. After downloading, please visit the Plugins -> Add New section in your website’s WordPress admin panel and click on the “Upload plugin” button on top of the page, next to the heading.
  3. After that, click on “Choose File” and navigate to the archive you’ve downloaded from the link in your confirmation email, then press “Open”.
  4. When the pop-up window closes, click on the “Install now” button that appears in the center of the screen and wait for the magical fairies to do their thing.
  5. After the installation has completed, click on the “Activate plugin” link.

Step two: activate the Expansion Pack

  1. After installing the Pack, visit the Plugins -> Bento Expansion Pack Activation section in your website’s WordPress admin panel.
  2. Input your licence key – the long string of letters and numbers seen above in this email – into the field, and click on the “Activate license” button.
  3. A green success message should appear. Great success! The new features and options will be available from the Theme Options panel.

Updating Bento Expansion Pack

You can always download the latest version of the Expansion Pack using the download link from the automatic email you received after your purchase. After obtaining the “” archive, unzip it and upload the resulting “bento-expansion-pack” folder into the following directory inside your WordPress installation: /wp-content/plugins/ using an FTP client or your hosting provider’s file manager. Agree to replace all existing files if prompted.

Included Features

The current version of the Bento Expansion Pack adds the following features to the theme, and more are being added all the time:

  • Portfolio with various layouts and a new specialized content type called “project” (demo).
  • Beautiful prebuilt layouts for the Content Builder allowing you to create professional-looking pages in seconds (demo).
  • Fully customizable pop-ups for engaging and converting more visitors (demo).
  • Customizable preloading animations for better user experience (demo).
  • Video headers which help your pages to stand out and leave an impression (demo).
  • Google Maps headers with customization and styling possibilities (demo).
  • “Twitter Feed” custom widget for displaying your latest tweets in your website’s sidebar or footer.
  • “Advanced Recent Posts” custom widget with additional options compared to the standard one.
  • Possibility to upload own fonts for displaying the website’s body, headings, and menu text.
  • Fully customizable or removable footer copyright message.

Portfolio and Projects

The Expansion Pack adds a new custom content type to the Bento theme: the so-called “projects”, which are pre-styled for showcasing work by creative agencies, service providers, freelancers, photographers, etc. The projects function similarly to the classical WordPress posts and be can created by visiting the Portfolio -> Add New admin menu section. There is a separate specialized taxonomy for projects which is called “types” (Portfolio -> Types admin menu section) which works just like categories do for classical WP posts, and which can be used to differentiate between the projects and construct filters used on portfolio pages; you can specify one or more types for any particular project by using the “Types” settings box in the right part of the editor mode view.

In order to display your projects, you can use the existing layouts and features found in Bento, namely the “Grid” page template. After successfully activating the Expansion Pack, the “project” content type becomes available in the “Content Types” checklist found in the “Grid Settings” box which appears underneath the content area when switching to the “Grid” template in the page editor mode. You can use this setting to create grids of projects or even combined grids displaying both projects and posts or projects and products, or all three content types. In case only “project” is chosen as the content type to display on a particular grid page, that page will automatically display a portfolio filter based on which “types” you assign to each of the projects (see portfolio filter demo here).

Prebuilt Layouts

The Expansion Pack includes a continuously expanding set of pre-formatted page layouts for the Content Builder, designed to fit specific needs, such as product homepages or corporate landing pages (see live demos here). These pre-packaged layouts have been built with the aim of saving your time by offering a fast and easy way of setting up professional-looking pages.

Currently the Expansion Pack offers the following pre-built-layouts:

  • Product Homepage With Slider
  • Corporate Homepage
  • Creavite/Agency Homepage

In order to make use of the pre-built layouts, you will need to have the Content Builder and the Extra Elements plugins installed (see this section of the current manual for more details). The layouts are accessible for all users of the Bento Expansion Pack by switching to the “page builder” mode (click on the respective tab in the top right corner of the content area while editing a page) and clicking on the “Prebuilt Layout” button in the content area – in case the page is new you haven’t added any content yet – or clicking the “Prebuilt” button in the top left corner above the content area. The available layouts are found under the “Theme Defined”. Each lauyout contains placeholder text and icons, so after applying a layout you will only need to replace those with your own text and icons by editing each respective section; you can, of course, modify any of the layouts in any way you require, using them as a basis for creating more custom pages.

Popups For Converting Visitors

Visitor engagement is one of the most important success metrics for almost any website, which is why the Expansion Pack features a tool to help you transform more visits into actions using specialized pop-ups (see a demo here). It is a popular method of motivating website visitors to perform a specific task, such as signing up for a newsletter or clicking a button, or even purchasing a product / service. In order to set up a converting pop-up with the help of Bento Expansion Pack, please follow these steps:

  1. Create a page that will serve as the content of the pop-up (Pages -> Add New admin menu section); it can include any text, images, Content Builder elements or layouts, as well as third-party shortcodes such as contact forms, social widgets, etc.
  2. Visit the “Call to Action Popup” tab of the Theme Options panel and choose the page you’ve created in step 1 from the “Source of content for the popup” drop-down.
  3. In the same tab, choose where to display the pop-up using the “Display call to action popup” setting and set the trigger using the “Popup trigger” setting.

The “Call to Action Popup” tab of the Theme Options panel mentioned in the steps above also contains auxiliary settings to fine-tune your pop-up, such as the width of the pop-up window, its border thickness and color, as well as overlay color and opacity.

Please note that pop-ups use cookies to only display once per session to each user; in other words, once the pop-up is shown to a particular visitor, it will not appear again to that particular visitor until they close their browser window. This is done in order to minimize the chances of the pop-ups becoming annoying to your website’s visitors.


Bento Expansion Pack allows displaying a loading animation to the visitors while a page is loading in the background in order to only display the fully loaded page to the viewers and at the same time to let them know that the process of loading the page is underway (see the preloader in action here). The preloader can be activated and configured in the “Preloader” tab of the Theme Options panel.

Video Headers

One of the new types of headers available in the Bento Expansion Pack is full-width video – an additional setting in the extended header which allows uploading a video file to display as a background of the page title (see demo here). The .mp4 file format is recommended for the video files, yet you can also use .ogg and .webm files. The smaller the size of the file you’re using, the better for user experience and SEO, it’s recommended that the size of the video file does not exceed 2-3 Mb; using a Content Delivery Network is highly encouraged to increase loading speed and reduce server load.

Please note that it is still recommended to upload a static header image using the “Header Image” field in the same settings section in order to have a fallback for the cases when the video fails to load or play. Moreover, the image will display as the header on smaller devices since the video will automatically be hidden in order to save on data service bandwidth. When defining a video background, you can use all other extended header settings and features in a normal fashion; if you wish to revert to displaying a static image header, click on “Remove” under the video you’ve uploaded and save changes to the page.

Google Maps Headers

In addition to video headers, the Expansion Pack allows creating headers with functional maps using the Google Maps API v3 (see live demo here). In order to set up such a header you need to check the “Activate Google Maps header” checkbox in the “Map Header” settings section underneath the content area in the page editor mode. After that you will be able to set the parameters for the map, such as its centering point, zoom level, and height, as well as define a custom style for the map using your own code or the ready-made snippets from Snazzy Maps; to achieve the latter, navigate to the page of the style you like and click on the “Copy” button or simply select and copy the code under the “Javascript Style Array” heading.

It should be noted that the Google Maps header has precedence over the image/video header – in other words, in case you activate the map your header will display a map regardless of which settings you have in the “Page Header Settings” box.

Extra Widgets

Bento Expansion Pack adds the following widgets to the standard WordPress selection in the Appearance -> Widgets admin section:

  • Twitter Feed – a configurable stream of tweets from a specific Twitter account. Since Twitter requires creating an application in order to display its data on third-party websites, please follow the instructions in the widget settings area to set up the required data.
  • Advanced Recent Posts – a take on the standard WordPress “Recent Posts” widget offering more display elements such as thumbnails and more links as well as more customization options.

All widgets above are pre-styled to work seamlessly with Bento’s Theme Options panel color settings.

After installing and activating the Bento Expansion Pack you will be able to customize or fully remove the copyright message in the theme footer – just input your own text or HTML into the “Customize the copyright message in the footer” field in the “Website Elements” tab of the Theme Options panel.


Version 1.0
Initial release