As somebody who is setting up a website for their new establishment or who has a client who is just launching a restaurant website, you might be wondering – will using a WordPress restaurant theme make such a difference to the bottom line business?
And the answer is – yes, it does!
A recent client of ours had never set up a website for their food establishment. They had relied on their Facebook page only as their online presence.
But when they set up their website, they were fully able to take their prospective client through a “journey”, bookings started to roll in at a much larger rate than before. Using an online booking system, with great calls to action ensured that the prospective client was able to act on the spot. On the other hand, their previous social pages had been much less effective at converting clients.
In today’s article, we will be discussing all the essential items required to make sure the site you set up has all the necessary elements to actually boost business for you or the catering establishment you are working with.
Why you need a WordPress Restaurant Theme
Why would you want to use a niche WordPress restaurant theme? Wouldn’t it be ok to just go with a multi-purpose product?
Well, yes and no.
Yes, you can create a restaurant website with any theme, if you wanted to – but, you (or your restaurant client) is going to have to pay a price.
See, in this specific business, it does not pay to be creative.
On the contrary, it pays to give people exactly what they would expect from a restaurant website.
Really and truly, you don’t want to be adventurous when designing for this business.
Because, people are not looking to get impressed by the design of your website – they want to be impressed, by what they get when they visit the location!
And therefore, your role in impressing them needs to revolve around enticing them to visit.
That’s why you’ll need a theme which allows you to focus mostly on mouth-watering images of the food which will be served and other triggers which will push the client to make a booking.
By enticing people with photos of the dishes the eatery serves, and taking them through a “journey” related to their eventual experience, they are much more likely to take action on the spot, and make a reservation, either through the website itself, or through your contact numbers, clearly displayed on the screen.
Can you see below how Liber blends in all the things we’ve mentioned above, all “above-the-fold” without even having to scroll down?
- Excellent, mouth-watering imagery? Check ✅
- Call to action? Check ✅
- Contact details? Check ✅
On the contrary, without a niche theme for restaurants, you’re more likely to have to customize the design in order to achieve such results. The end result will less focused on taking action than if you had used one of our themes.
Any additional “distraction” may be enough for the customer to lose focus, bounce (leave the site), and book elsewhere.
Examples of Restaurant websites and designs which work
Now that we’ve discussed what a good website for a restaurant should have in terms of its design and content, it’s time to look at a few great examples of real websites which are using these ideas to produce an excellent result!
1. Amrutha Lounge
This is one of the top restaurants in London according to TripAdvisor and we believe it’s website is also a great example which should be emulated by the industry.
Besides a built-in menu which can be quickly taken in at a glance, they have a mouth-watering grid gallery which allows you to quickly take in what you’re about to experience if you visit the restaurant.
Kaffeine is a top cafe based in London, which is very appropriately named. As designers, we can’t help but love the minimalist style of the website of this cafe.
This is an example of focusing only on what’s important, which is essentially the location and opening times.
One should note that such a minimalist approach is typically only feasible for companies which already have an established presence and brand. Companies who have a strong brand can afford the lack of information and “pitching”.
This approach is not recommended for establishments who are still trying to get their name out there.
Daniel is a fine dining experience, in NYC, as is one of the pillars of New York Cities bustling dining scene. The restaurant has received numerous accolades for its refined European cuisine, world-class cellar and gracious hospitality.
It’s no wonder, that this experience extends to Daniel’s website. As soon as a visitor hits the URL, they are greeted by fast-paced video of the chef’s preparations in the kitchen from burning stoves, sharpening of knives, slicing of ingredients, stirring of food and on to the excellent results of beautiful laid out dishes. You can almost smell the delicious looking plates.
From then on the website discusses various aspects of this eatery including the various spaces, the cheese and wine experience, private dining and functions and then onto press mentions and gallery and a map.
The Reservations Call To Action stays fixed at the top even as you scroll down to the rest of the site, making sure it’s always easily accessible to the client who is browsing around.
This single image does not do the website any justice, so definitely have a look at the site yourself.
4. The Gate Restaurants
The Gate is a series of vegan / vegetarian eateries around London. Their site is an excellent example of all the right things one should do.
You can see plenty of CTAs, great imagery, a map, an indication of all locations, an online menu, and a contact form for reservation of private dining events.
This is a site which is geared for conversion.
5. Cafe Van Gogh
This is another vegan restaurant which is a great inspiration for eateries in a similar niche. Besides imagery of both the food and the location using a parallax effect, the site also shares their story and love affair for food and vegan and vegetable based dishes.
5 Elements you need in your restaurant website
Now that we’ve seen a few examples of top-notch restaurant websites, we can clearly identify a few essential elements which need to be present for the site to make its mark.
First and foremost your clients need to establish their brand and identity. Most companies will already have gone through this exercise and will provide you with their brand identify.
However, if your client is still missing a logo or other brand documents, this is something essential, which you need to determine before you start designing. This is because the rest of the design will flow according to the brand guidelines.
Although a design agency or designer is highly recommend, for those who cannot afford to work with a designer we would recommend that you use Tailor Brands which is an AI based platform that generates powerful logos matching business’ brand identity. This service is great because it can guide and help you to create a logo and brand for your client.
Once the brand has been established, the following are elements which need to be part of the eventual restaurant website:
- Awesome imagery of the location and the items served
- Restaurant Menu and / or what is currently available
- Map with the location of the outlet, or clear address
- A Call to Action to Book, make a Reservation or Call
- Links to Social Media pages and accounts
Let’s elaborate a bit more on each of these essential elements.
Awesome food and location imagery
Awesome imagery of both the food served and the location are critical pieces when it comes to ensuring your website helps to generate more business for your eating place.
In all likelihood, first-time visitors to your establishment have heard about or had a recommendation by word-of-mouth or otherwise, so they already have good vibes about your business.
So when they land on your site, you need to entice them even further to visit – and the easiest way to do this is by showing them exactly what’s waiting for them if they visit.
Both the actual food presentation and the ambience are typically very important selling points, so the imagery has to establish this goal.
It is of absolute importance that you use imagery which was professionally taken, because photos which are not professional can have the exact opposite effect. Food which has been incorrectly photographed can have a negative effect on the visitor.
This obviously is another essential element to have on your site. After all, when speaking about your outlet, the conversation was probably what the person ate when they were there.
Even if a person is not familiar with your restaurant, if they’re browsing around, they want to be sure that there’s stuff on the menu which they will enjoy.
If you’re displaying the menu on the site, you need to ensure it’s fully and easily accessible, both on desktops and on mobile phones. Also, just in case somebody wants to circulate or print it, a downloadable version would make sure the user experience is complete. So do make sure that every version is easily available.
Just in case you were wondering, the Liber theme by Anariel Design features a restaurant menu built-in. If you want additional features, a great option we can only highly recommend is the Food and Drink plugin. There’s both a free and a premium version.
Address, phone number and Map with location(s)
Have you ever been recommended some place to eat, but only given vague or inaccurate directions to get there?
So you’re hungry, you probably just want to sit down and relax and instead you end up wandering around trying to locate the outlet, getting frustrated by the minute. Being hungry probably doesn’t help your state of mind.
You can easily resolve all of these frustrations by adding a location map as part of the elements on your website. Although technology like Google Maps makes it easier to arrive to a particular location, having a visual of where the restaurant is located will help clients get there much easier.
If you don’t actually put a map, at least make sure the address and phone numbers are clear, so that if somebody is actually looking for the exact address, street name and number, to type into their Google Maps, or to give to their cab driver, they can easily find it.
Call to Action to Book Now
Once you’ve gotten the attention of your visitor and they have landed on your website, you need to make sure you actually get their business.
And of course, what easier way to do that than asking them to make a booking there and then?
The Call to Action which makes the most sense is “Book Now”. The Restaurant Reservations plugin which we mention below and is actually used in the Liber theme demo is an excellent choice to integrate reservations functionality into your website.
Other options for reservations, which also fit nicely with WooCommerce include booking and appointments plugins (e.g. WooCommerce Bookings) or other items such as the ones listed here on this article on CollectiveRay.com. Just make sure you have the Call to Action in place.
If you’re not using a bookings plugin, you can create a custom form which picks up the details necessary to take a reservation, but always make sure your CTA displays the number to call to make a reservation in a way which is easily visible.
Liber once again excels in this aspect and makes the CTA a clear button which pops out, make it the next obvious step a visitor should take.
Below we can see how Liber provides all the options, Book A Table, Make a Reservation, and also provides the number to call at the very top of the site.
Links to Social Media
The final critical piece each restaurant theme should have is links to social media.
These serve two purposes.
- The first reason is so that the younger generation, who are more inclined to use social media to get in touch, can access your social media pages such as Facebook and make a reservation or contact you through this medium.
- The second is so that you increase your followers and repeat customers.
Remember that by having your customers following you on social, and posting awesome imagery of the food and drinks served, your restaurant will remain fresh in your customers’ thoughts.
This will help bring your restaurant to mind when they’re figuring out where to go and eat out next, particularly if they’ve had a good experience on their last visit.
Of course, there are a few other things you might want to have on your site, but the above are the most essential.
Now that we’ve identified the elements, let’s go through a step-by-step process of creating a website using Liber, our WordPress restaurant theme.
4. Creating Your Establishment site (step-by-step)
Now that we have the know what elements we need and we’ve seen a few great examples of food related websites, let’s see how to create a great website using our own WordPress restaurant theme – Liber.
Buy, Download and Install Liber
Liber can be bought as a bundle of ALL the 17 themes available from Anariel Design for the great price of $59, which includes 6 months support. If you are a web designer, we’d strongly suggest getting the $199 bundle, which includes lifetime support, upgrades and all current and future themes from Anariel design.
Once you’ve made the purchase, go ahead, download, and unzip the file. Read the IMPORTANT file, and then proceed to install the theme via the liber.zip on your WP installation, via the Upload Theme function.
If you plan to install it with FTP, you can use the Liber folder to transfer the files.
If it’s your first time doing this, or if you’re not sure of the exact steps to do this, you can follow our guide which can be found here: How to install a theme.
For users who plan to tweak the theme, install the liber-child.zip included in the download package.
Install Required and Recommended plugins
Once you Activate the theme, you will get the below notice, which recommends a number of plugins which are recommended with this theme.
These are plugins which will allow you to make the most of this WordPress restaurant theme. Since the authors have determined that these are recommended, we would suggest you follow their advice, unless you have a solid reason for going against these recommendations.
You need to install the Liber Custom Post Type, which is a required plugin, and then install the plugins which you think you will need.
Click on Begin Installing Plugins and you’ll get to the page below, where you can 1-click install the products you’ll need.
If you want to start from the “demo” setup, we would recommend opting to go for one-click demo import.
Please do note that if you’re going to use the theme demo data, you’ll actually need to install all of the above plugins for the demo to import without errors and work correctly.
Import Demo Data
We’re going to opt for setting up all of the recommended plugins and start from the demo.
If you haven’t got much experience working with sites, it’s best to start from the template setups and then tweak one of these to your needs. You can follow our excellent guide of how to import and use the Demo Content.
Users who are more experienced with WordPress can typically skip the demo setup and do it all from scratch.
If you’re starting from scratch I can also highly recommend checking the theme documentation to get a better overview of how the theme is structured.
Once all of the plugins have been installed, run through the Import Demo Wizard
We opted to import the Classic setup, but you can choose, the Cafe, Beer or Wine demos. Click on the Import and wait for the import to pull in all of the data into your setup.
Once the import of the demo data is done, we’re good to start putting in our own information.
Let’s opt for the name of “Feed me, I’m hangry!” for our establishment.
Setup your restaurant website details
Unlike many themes around, Liber uses the native WordPress Customizer to perform most of the necessary theme settings.
We do believe that it is much more organized to keep all customization options in a single place, so most of the theme tweaks can be done from here.
Let’ start by changing the theme’s logo which can be found under the Site Identity.
If you’re planning to create a video header, such as the one we saw for Daniel’s you can add it under the Header Media section.
Next up is the menu. This is the actual website menu, NOT the restaurant menu. The different items can be found under the Primary menu. You can remove, add or tweak the items as necessary to suit your specific needs.
Since the “Features” menu item is not useful for us, we’re going to delete it. You can, of course, reorganize the menu items in a way which makes sense for you.
Now that we’ve set our main menu, let’s tweak a few of the other menu items.
The links to Social Media are actually defined as menu items, in the menu Social Menu. Change, add, remove to reflect the social media of your own establishment.
Now, let’s move on to the Widgets.
There’s a lot of customizations which can be done through widgets in WordPress and this restaurant theme has used this functionality to put in place a number of optimizations for conversions which we have discussed through this article.
We’ll first focus on the Footer Widget area, because this contains a number of important details about the establishment, which we need to customize in order to optimize for conversions.
You can change the contents of the Liber widgets either using the customization menu on the left, or by clicking the Edit icon (pencil) of the widget you want to change.
From there, it’s a question of tinkering with the HTML and text to edit as per your own details.
As you can see, the About Us, the Opening hours can be quickly configured either via the edit icon, or via the various footer widget areas.
Go through each widget and update the details of your restaurant or establishment accordingly.
The configuration of the Instagram widget requires the addition of an Access Token, if you require instructions on how to create one for your site, you can follow these instructions.
Keep going through the widgets, changing stuff around and as necessary to your own specifications. Of course, you can remove any widgets you prefer not to show, or reorder them as per your preference, using the standard WP widget functionality.
Essentially, most of the work you’ll need to do will happen in this section.
You’ll find that Liber has excellent documentation which you can follow step-by-step, so rather than keep describing the setup here, we recommend you visit the Liber documentation, where you’ll get much better, detailed information on how to set up each section.
The last thing which we will point out in this section is actually setting up the restaurant menu, since this is also one of the essential elements which we’ve discussed above.
Setting up the menu is pretty straightforward.
First, set up the menu items, via the Food Menus plugin in the WordPress dashboard. Simply add an item, a description of the item, an image for the item, and the price of the menu item.
You can also customize the categories of the food items if you’re not happy with the default categories which are:
- Main Course
- Special Offers
Once you’ve added all of the items which are available on the menu, you can decide which menu item to keep from the various views available in the demo.
If you’re happy with the current view, you only need to change the menu items.
To customize the view, you can opt to create a page with the food items you would like to display, using one of the Food Menu templates (default, list and classic) and finally add this to main navigation menu of the site.
WordPress Restaurant plugins you might need
Now that you’ve got the basics of your website in place using Liber or another WordPress restaurant theme, let’s focus on some advanced functionality you can implement on your site.
To enable these advanced features, we’re going to be using a number of WordPress restaurant plugins, each performing a very specific function.
Food and Drink Menu Plugin
We’ve mentioned above, that for very obvious reasons, the menu your eatery offers is an essential element of your site.
There are a number of plugins out there which offer this functionality, but the one which we prefer and recommend is Food and Drink Menu plugin by Themeofthecrop. With a capable free version and $25 for the PRO version, this is a no-brainer.
The free version of this plugin is featured in the theme demo and is usually sufficient for most users, but if you’re looking for more advanced features, you can opt for the PRO version.
This is another great plugin from Themeofthecrop. As you might have noticed, this company has focused on this specific niche and have developed what has been often named as the best free restaurant bookings plugin for WordPress.
As with the case of the menu plugin, the free version of the plugin is featured in the theme demo and as can be seen, is typically enough for most users.
If you want to see what the booking page of Liber looks like, check out the Book a Table page here.
WooCommerce + WooCommerce Bookings
The Restaurant reservations plugin is great for those who want to accept bookings and works nicely for most people.
However, if you are looking for a premium option for taking bookings, which also integrates with WooCommerce, you could choose to opt for WooCommerce bookings.
Even at the starting price of $249, we believe that the ROI from this plugin is worth its cost – but it’s only required for those requiring a premium option.
What else do you need for your WordPress Restaurant Website?
One final thing which you need to make sure you’ve done for your client (if you want to make sure their website provides an excellent user experience), is to get their website hosted on a good, fast hosting service.
There are multiple reasons for doing this.
Fast websites convert better – one of the primary reasons for hosting the restaurant website on a fast hosting service, is simple. Fast websites provide the visitor with a pleasant, snappy, user-experience. On the other hand, slow websites are frustrating and tend to turn-off users.
In fact, it’s been proven that if the loading time of a website is slow, conversions actually go down. It makes sense that after all of the work that you put in to create an excellent site, you don’t kill all this off by using a cheap, slow, hosting service.
Fast websites rank better – conversions are of course critical to the a restaurant. But besides your actual visitor, there is another “visitor” which you need to make sure that is satisfied with the loading time of your website. This is the Googlebot, the Google search engine crawler, which visits your website to understand what it contains, but actually, also measures the loading time of a website. It then gives a ranking boost to websites which load faster. Once again, this makes a real difference to the success of the site of the establishment you are working with.
At Anariel Design, we recommend using SiteGround to host your website. Besides excellent performance, their support is second to none and they are definitely great value for money.
SiteGround take hosting of websites very seriously and implements many mechanisms to make sure that websites hosted here are very fast. Such technology as CloudFlare, Memcache and their own SuperCacher technology, latest versions of PHP and MySQL, and OpCode caching is typically available on plans such as GoGeek.
Launch and Monitor Bookings and other KPIs on the new website
Once you’re happy with the result and have gotten approval from your customer, you can launch the site.
But this is not the end, it’s actually the beginning.
Once we’ve launched the site, we need to make sure that the new project is achieving it’s target of boosting business for the establishment.
While this is not an accurate science, you should monitor how many bookings are actually coming through the new website and how they compare to the previous version of the site.
Calls should also be monitored. Although these are not solely attributed to the website, you should be able to monitor better if you create a special offer which is only available via the website. With this offer, you can then gauge how many calls can be attributed to the website as opposed to other marketing channels.
As we’ve seen above, although at first glance one might not realize the benefits of a WordPress restaurant theme, it’s clear that owners of companies in this niche can make a killing if they set up a website with all the right triggers. Just as a reminder, make sure that your contact numbers are easily available, you have an online booking mechanism in place, or at least a powerful, visible call to action, make sure your imagery is enticing and customers know what they can order and how to get to your location.
Once you’ve catered for those, let the orders roll in!