Box Menu Widget

Box menus allow you present a standard WordPress menu in a bunch of different ways. For a quick overview of some possibilities check the box menu demos page. Set up a WordPress menu containing the options you want in your box menu and then decide where you want to show your widget. There is a shortcode as well so you can have complete control over where the menu appears (N.B. Just be aware that using shortcodes means that moving to another theme will leave non-functional shortcodes in your content).

The box menus are available in a number of different styles, and you can customize how your menu appears easily from the widget. Styles that display an image will take the featured image from the posts / pages in your menu and can optionally show the title and excerpt. You can even add animation!

Shortcode usage

Because there are only so many widget areas and from time to time you may want one or more menus embedded in your content, we have supplied a shortcode so box menus can be included in content. The syntax is:
[boxmenu menu_id="menu" style="style_id" show_title="1|0" show_excerpt= "1|0" max_per_row="num" color="hex/rgba color" title_color="hex/rgba color" excerpt_color="hex/rgba color" image_opacity="" menu_animate="animation_type" hide_current="1|0"]
N.B. Optional parameters are shown in italics.



Required: The menu name used when the menu was created in the WordPress admin area.


Optional: (default = 1) the style of box menu to show. Possible values are:

1 = Image box
2 = Bubble
3 = Text
4 = Image box (title inside)


Optional: (default = 1).
A value of 1 shows the post title, 0 causes the title to be hidden.


Optional: (default = 1).
A value of 1 shows the post excerpt, 0 causes the excerpt to be hidden.


Optional: (default = 3).
A number from 1 to 8 that sets the maximum number of menu options on one line (there may be fewer than the specified number when viewing on a smaller screen or when there are an odd number of menu items).


Optional: (default = transparent for images, current button colour for text menus).
The background color of menu items. Colors are specified in hex triplet (e.g. “#000000” = black) or rgba (e.g. “rgba(0,0,0,1)” = black) format. This is required when showing a text menu (style_id = 3), but can also be used in conjunction with the image_opacity option to create a “tint” effect on images.


Optional: (default = current subheading color).
Color for title of menu options. Colors are specified in hex triplet (e.g. “#000000” = black) or rgba (e.g. “rgba(0,0,0,1)” = black) format.


Optional: (default = current body text color).
Color for title of menu excerpt text. Colors are specified in hex triplet (e.g. “#000000” = black) or rgba (e.g. “rgba(0,0,0,1)” = black) format.


Optional: (default = 100).
Value from 1 to 100 specifying the opacity of the image (100 = max opacity, 1 = image is completely transparent). This can be used in conjunction with the color value to create images that have a colour tint.


Optional: (default = 0).
Value specifying CSS animation to play when showing menus. Options are:

0 = No animation
1 = Rubber band
2 = Zoom in
3 = Fade in left
4 = Fade in right
5 = Fade in up
6 = Fade in down
7 = Fade in


Optional: (default = 0).
When set to 1 will cause current page to be hidden from the box menu.


View the demo