Bentobox: Getting Started

This guide will take you through all the steps needed to install Bentobox on your site, even if you’re a complete WordPress beginner.

Experienced designers and coders can jump straight to the Advanced User Guide.

Installing the plugin

There are two ways to install the Bentobox plugin. Let’s call them the easy way and the hard way.

The easy way: using the WordPress admin interface

This is the standard way to upload a plugin.

First, on the CodeCanyon downloads page, click the Download button beside the plugin and select “Installable WordPress file only”. Your browser will then allow you to save the file somewhere on your computer – you can either put in straight in your Downloads folder or somewhere easy to access like your desktop.

Then, simply log in to your site’s WordPress admin panel and go to Plugins > Add New (the URL will read example.com/wp-admin/plugin-install.php). At the top of the page you’ll see a button labelled “Upload Plugin”. Click this.

Now click “Browse” and find the folder on your computer where you saved your download of Bentobox. The file will be called bentobox.zip. Select this, by double-clicking the file or selecting the file and clicking “Open”, then click “Install Now” back on the WordPress admin screen. Once uploaded, click “Activate Plugin”.

Bentobox is now installed.

The hard way: using FTP

If you have an FTP program (like FileZilla or Cyberduck) set up to access your site’s file structure then you’re probably already beyond beginner level. Setting this kind of software up isn’t going to be covered here, but if you have it, you can use it to upload the Bentobox plugin directly to your hosting server.

First, download the installable WordPress files as described above, then extract (unzip) the bentobox folder that sits just inside the bentobox.zip file. Save this folder somewhere easy to access.

Then use your FTP software to upload the bentobox folder to your site’s /wp-content/plugins folder. It should end up as something like public_html/wp-content/plugins/bentobox.

Now return to your site’s WordPress admin interface, and go to the main Plugins page (example.com/wp-admin/plugins.php). Find Bentobox and click “Activate”.

That’s it. You’re set.

Adding a Bentobox to a page or post

There are two ways to use Bentobox on your site – with an enclosed shortcode or a single unenclosed shortcode. This guide will discuss the enclosed shortcode method. The single shortcode is covered in the Advanced User Guide.

What’s a shortcode?

A shortcode is a little code that you can drop into any WordPress page or post. It always comes in square brackets and produces something specific on your website. Some are built into WordPress – like [gallery] – others come with plugins, like [bentobox].

You can use shortcodes while editing in WordPress’s Visual or Text mode.

An enclosed shortcode has two parts to it. One part begins the code: [bentobox]. The other part closes it: [/bentobox]. Everything in between the two parts is transformed or processed in some way. With Bentobox, the images you place in between the two parts of the shortcode are transformed into a clever image gallery.

Making your first Bentobox

To make a Bentobox gallery on your page, begin by typing in the opening part of the shortcode – that’s [bentobox]. Now with the text cursor sitting just after that little code, click “Inset Media”.

Now either upload some images or select them from your Media Library. To select multiple files on the Media Library, hold down the Ctrl or Command (⌘) key as you click them. Note: you should be working on the Insert Media screen, not the Create Gallery screen; you can flick between these two with the menu on the left.

Once you’ve picked your images, look to the lower right of the screen where you’ll see the Attachment Display Settings. You may have to scroll down a little. Don’t worry about alignment (this is overridden by the Bentobox). If you want the images to load full-screen when a user clicks on them, set link to “Media File”; otherwise select “None”. Set the size to “Large”, unless you’re using close to 20 or more images, in which case “Medium” will do, and will load faster.

You’ll now see all the images displayed as an unformatted list inside the post (if you’re in Visual mode), or their corresponding HTML code (if you’re in Text mode).

Now seal it off by positioning the cursor after the last image and entering the closing part of the shortcode: [/bentobox].

Using the Visual editor to add a Bentobox
Using the Visual editor to add a Bentobox

You can now publish or preview your post/page to see how it looks.

You can add text before or after the Bentobox and you can use as many Bentoboxes as you like within the document.

Note: at present Bentobox does not support captions. Do not add captions to the images when selecting them on the Insert Media dialog box, as the gallery won’t work. If captions have been added automatically via the image’s metadata, you’ll need to remove them.

A full-width Bentobox

If your site does not have a sidebar, then you may want to use Bentobox’s full-width option. This will create an image gallery that fits itself perfectly to the full width and height of your browser window.

Just add the term fullwidth to the opening part of the shortcode like this:

[bentobox fullwidth]
All your images here.
[/bentobox]

Advanced options

Once you’ve digested all that, you can look at the Advanced User Guide for more ways to make beautiful Bentobox galleries.