Create a complex restaurant menu layout with Food and Drink Menu

This tutorial is out of date. If you are using WordPress 5.0 or above, I recommend you use the built-in block editor to build complex menu layouts. Learn more

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.

Call to action box goes here
Need a Plugin to Improve Your Site?
Browse Plugins Now
Tips for Choosing or Creating a Restaurant Website Template to Help You Stand Out in 2022
Tips for Choosing or Creating a Restaurant Website Template to Help You Stand Out in 2022

The restaurant business is incredibly challenging, especially in today’s digital world. In order to attract customers and remain relevant, many restaurants are creating their own websites. This isn’t a new trend – the first ever restaurant website launched in 1995, and since then, the number of restaurants with their own websites has only grown. But…

How QR Codes Are Changing the Way Customers Interact With Restaurants
How QR Codes Are Changing the Way Customers Interact With Restaurants

As the digital world continues to grow, we’re finding new ways to use technology and tools. The world of restaurants has changed quite a bit over the last few years, and it’s not slowing down anytime soon. Now, more than ever, there are new and creative ways people are getting information about restaurants. Technology plays…

Why You Need a Website for Your Restaurant: 5 Great Reasons
Why You Need a Website for Your Restaurant: 5 Great Reasons

‍So, you’ve opened your new restaurant! And it’s going well. The word-of-mouth is so good that you find yourself fully booked weeks in advance. That’s great news and suggests that your food is fantastic. But there are ways that you could optimize your business even more. A website is a great way to increase awareness…

Discover More Posts
Browse Plugins Now