Create a complex restaurant menu layout with Food and Drink Menu

Updated on

My Food and Drink Menu plugin for WordPress is a great way to get a simple restaurant menu on your site. I’ve designed it for single- and double-column layouts. But this doesn’t cover every menu. Some restaurant menus like to stack elements in unique positions. This tutorial will show you how to get a more complex menu layout by using the plugin’s shortcodes in combination with the Grid Columns plugin by Justin Tadlock.

You’ll need to have the Grid Columns and Food and Drink Menu plugins installed to follow this tutorial.

What are we trying to achieve?

Recently, a customer emailed me with a unique layout he wanted to achieve but wasn’t sure how to achieve it. For this tutorial, I’ll use the layout he needed for my example. Here’s what we want to achieve.

Complex layout example for Food and Drink Menu
The layout we’re trying to achieve in my Plate Up restaurant WordPress theme.

Food and Drink Menu supports a two-column layout, but both columns are of equal width. It can’t (yet) mix and nest columns within each other, either. So even if you were an expert with CSS, you’d have a difficult time replicating this layout. You could get there by setting up your own custom templates, but this requires a little bit of coding experience. And it wouldn’t work if you had more than one menu layout you needed.

What do we need?

In order to achieve this layout we’ll create multiple menus. Then we’ll use the Grid Columns plugin to position and stack them as we need. We’ll create a regular WordPress Page and use the shortcodes from Grid Columns and Food and Drink Menu.

Diagram showing the complex layouts techniqe

To pull this off, here’s what you’ll need to create:

1. A single-column menu with the Antipasti and Zuppe sections.

2. A single-column menu with the Pizza section.

3. A double-column menu with the Insalata and Primi sections.

4. A single-column menu with the Secondi sections.

If you’ve  never created a menu with my plugin, read the help documentation included with the plugin. You can find it in your WordPress admin area by going to the Plugins list, finding the Food and Drink Menu plugin and clicking the Help link there.

Once you’ve created each of these menus, you’ll need to retrieve their shortcode. You can find the shortcode by going to the edit screen (Menus > Edit Menu). Look for the shortcode box on the right.

Where to find the restaurant menu shortcode

Building the whole menu in a WordPress Page

Now we’ll use these shortcodes to print the menus on a regular WordPress Page. Go ahead and create a new page (Pages > Add New). On the page, you’ll use the Grid Columns shortcodes to organize your content. These shortcodes allow you to set up columns and place content within those columns. For example, the following shortcode will create two columns:

[column grid="2" span="1"]My first column[/column]
[column grid="2" span="1"]My second column[/column]

These shortcodes are saying to put the content in a 2-column grid, taking up 1 column. If you’re not sure what’s happening here, go ahead and copy this code into your page then preview it. You’ll notice that the content is stacked horizontally instead of vertically.

Are your columns not appearing? Make sure you’ve activated the Grid Columns plugin!

Using this technique, we’ll nest all of our menus in columns to get the effect we want to achieve. Here’s a screenshot showing you how I achieved it for the example menu.

Example of page content for menu layout
Make sure you’re using the correct menu shortcodes for your site!

And that’s it!

If you’ve never used shortcodes it can take a while to get used to them. The Grid Columns system is as simple as it can be, but it still might take a little trial and error to get your head around how to use them. Go ahead and experiment a bit. Remember, the Grid Columns plugin can be used for any content, not just your restaurant menu! And it’s built to be responsive, so the columns will collapse on small browsers like mobile phones and tablets.

Want more tips and tricks on how to use my themes and plugins? Follow me on Twitter or Google+.

Developers, take a deeper look at the WordPress Shortcodes API.

 

 

Leave a Reply

Your email address will not be published. Required fields are marked *