In today’s environment, a website is a crucial tool for restaurants to attract customers. 77% of US diners say they are likely to use a restaurant’s website to decide whether they want to eat there or not. More specifically, they use their phones to find out more about potential destinations. 89% of restaurant research happens on mobile.
As should be obvious from these numbers, if you don’t have a web presence, you may be missing out on a lot of potential business. However, it’s not just about having a restaurant website at all, its quality is also decisive. In the first survey above, 68% of the people interviewed said they had been discouraged from frequenting a particular eatery by their web presence.
On the flip side, having a website for your restaurant offers many benefits:
- Building your brand and reputation
- Allowing potential visitors to see your menu before visiting
- Giving guests the ability to contact you and make reservations
- And so much more.
In this article, we’ll show you how to build your own restaurant website using WordPress, even if you have no coding or design experience. By following this process, you’ll attract more diners, make more money, and be proud that you did it all on your own.
7 Crucial Features for Building a Restaurant Website
Before getting into the how-to part, let’s first consider what elements make the most sense to include on a website for your restaurant. Clarifying this first will help you with planning and give you a better idea of the end product.
The Menu (Not the Navigational Kind)
Naturally, one of the main attractions of any restaurant website is the menu. As we have seen above, diners use websites to make a decision about where to eat. Learning what food is available at a place they are considering is the most central factor for that.
When offering your menu online, it’s important that it’s detailed, easy to use, and available in a suitable format. For example, only providing your menu in the form of a PDF or an image is not the best option, especially for mobile devices. Here, downloading and viewing files is a much bigger hassle and you could be losing visitors right then and there. These formats are also harder for search engines to index properly, so you are better off publishing your menu directly on the page.
Generally, like a visit to your restaurant, website design is all about visitor comfort. I once tried to order from a restaurant site where, I kid you not, a click on the “order online” button started downloading a PDF file that contained only the link to a separate URL with the online order form. What a user experience blunder! Absolutely don’t be that kind of restaurant.
Ability to Book Reservations and Order Online
A logical next step after learning what food you serve is for visitors to want to make a reservation or order some food. Since they are already on your website, why not enable them to do it right then and there?
Sure, you can and should also accept reservations and takeout orders via phone (more on that below). However, first of all, who still has the social skills to call up and talk to a stranger? What are you, emotionally well-adjusted?
Secondly, offering these services online is simply easier. For example, when set up right, guests can choose from available date / time slots and do the reservation by themselves. That makes it easier for them to plan their visit than having to ask for your availability on the phone first and potentially changing their plans when the desired timing is not available. Plus, they usually get an email with a link where they can change or cancel the reservation by themselves as well, reducing the risk of no-shows.
The same goes for online orders. Instead of taking them down manually, why not have an automatic system handle it for you? You just need to worry about getting things done in the kitchen.
Finally, online reservations and orders can also be a time saver on your end. It means fewer interruptions for your personnel to accept bookings by phone and more focus on more pressing matters. Some online systems even offer feedback and user analytics that help you better understand your customers and make planning easier.
Detailed Contact Information
Even if you don’t offer online reservations, at the very least, you should include the contact information for your restaurant. This will not only allow clients to get in touch for reservations but also provide them with all the information they need to plan their visit. Doing so is especially important if you have several locations so would-be diners can choose the correct one.
What information matters here?
- Hours of operation
- Address(es)
- Phone number, email, and/or a contact form
- Map(s) showing your restaurant(s)
- Methods of payment you accept
Optionally, you can also think about a newsletter subscription form. This helps bring visitors back to your restaurant by sending them specials, coupons, news, etc. It’s also simply a good way to stay in touch with your patrons.
Social Media Sharing Options
We probably don’t have to tell you that posts about what people eat are like 92 percent of the content on social media platforms (don’t quote me on that number).
Why is that the case? Who knows? It’s probably related to some interesting psychological phenomenon that would be worth exploring.
However, the why is not important here. The thing that matters is that you can use this tendency for, let’s call it “nutritional bragging”, to your advantage when building your restaurant website.
How?
For one, by making it easy for visitors to your website to share your restaurant online. You can do so with social sharing buttons and prominently displaying your social media handles so that restaurant visitors can easily tag you.
Secondly, you are able to include feeds from your social accounts on your website. If you then post images from your restaurant and nice things that others have said about it on your social accounts, they will also appear on your website.
It’s a great one-two punch of social proof.
Social Proof and Reviews
Speaking of social proof, positive customer feedback is a powerful tool to convince first-timers to give your restaurant a try. Studies have shown over and over again that online reviews are one of the most trusted and trust-inducing types of content out there. It’s the reason why we have influencers.
Therefore, if you can quote people who have already been to your place that they had a good time, that’s a really strong argument for others to come by as well. If you are not accepting reviews on your site (more on that below), the aforementioned testimonials from social media are also still a possibility.
Besides that, another way of showing social proof is through third-party ratings. Sites like Google Maps, Yelp, or Tripadvisor are places where consumers rank restaurants. If you have a good grade there, be sure to show it off!
Same for, of course, any culinary accolades you might have achieved. If you have been the recipient of any awards, prizes, press reviews, or Michelin stars, make sure to mention that as well.
Images, Images, Images
Food is a multi-sensory experience (who am I telling this to, you are the restaurateur here, after all), and humans are very visual. Therefore, presentation is one of the main ways we judge whether we find something appetizing or not. I mean, just look at this pizza.
Pretty mouth-watering, isn’t it?
You can use the appeal of good photos to your advantage when building your restaurant website. Just like potential guests want to know about what’s on the menu, they also have other questions in mind like:
- Does the food look appealing?
- Is the interior cozy?
- Does the place look clean?
- Would it be suitable for an anniversary, business dinner, or other event?
- How fancy do I have to dress to eat there?
One of the best things you can do to help them answer those questions is to show rather than tell. That means including image galleries of the restaurant ambiance and interior as well as good examples of the food you serve on your website.
You can even consider giving customers a glimpse behind the curtain and showing off scenes from your kitchen. All of this allows potential clients to get a better picture of what they can expect and give them more reasons to swing by next time they are hungry.
Mobile Responsiveness
We have already talked about the importance of mobile devices when it comes to consumer restaurant choices. Besides generally outnumbering desktop computers when it comes to Internet access, we have also seen that they play a major role during your customers’ research process. Plus, by now, Google mainly ranks websites by the quality of their mobile websites instead of the other way around.
Therefore, it’s absolutely crucial that, if you are building a restaurant website, you make sure it works well on phones and tablets. That includes both the general design, which should automatically adapt to smaller screens, as well as main features such as the menu and online reservations. If you neglect to make your restaurant’s website usable for mobile visitors, you might as well not have one at all.
How to Design Your Own Restaurant Website in WordPress
Are we on the same page when it comes to must-have features for restaurant websites? Then let’s go over how to implement the above on your site.
1. Select Your Theme
The great thing about using a content management system like WordPress is that it comes with specialized themes for many different industries and applications. That includes themes aimed at restaurant sites.
If you don’t know what a theme is, it is sort of like a design template for your website complete with layouts, colors, fonts, and more. Plus, they often come with pre-designed page elements for their particular purpose – such as a restaurant menu or contact page. That way, they help you design your restaurant site and more quickly and easily.
The best thing: you can activate themes with one click, meaning you can completely change the look of your website within seconds. Here are a few examples to choose from:
You can find more in the WordPress.com theme directory. So, the first order of the day is to look through the themes. Pick one that speaks to you and comes with the features you are looking for. Don’t worry if it’s not completely what you want; you can always customize it to your needs.
2. Add the Menu
After you have chosen your general look, one of the first steps is to add the most central element of any restaurant website – the menu. As mentioned, if you have chosen a restaurant theme, it might already have specialized blocks and block patterns for it. Usually, you find them in the block inserter either under Featured or the name of your theme.
Use your theme’s design as is or make adjustments as needed.
Of course, it’s also possible to create a menu with all the other blocks at your disposal. For example, the columns block comes in very handy for this purpose. Combine it with some headings, paragraphs, and even images, and you can quickly cobble together your own menu design.
If you are on a plugin-enabled plan, there are also specialized plugins, such as Quick Restaurant Menu, that can help you with building this part of your restaurant website. You can find more options in the Plugins directory. As for what to include in the menu, you can find detailed tips for that in our post on restaurant menu design.
3. Accept Reservations and Online Orders With Plugins
Once the menu is taken care of, let’s turn to another central element of any restaurant website: online reservations and orders. There are several ways you can introduce this to your site.
First of all, WordPress.com offers a convenient built-in way to offer reservations with the OpenTable block, which is available on all plans, Premium and above. If you have a self-hosted website, you can also use it via the Jetpack plugin.
OpenTable is an online platform where restaurants can sign up to offer online reservations. The accompanying block makes it possible to integrate their functionality directly on your website.
For a detailed description, check our standalone post on how to take online reservations in WordPress. You can also find more information about the OpenTable block in the documentation.
A similar thing exists for food orders. Here, you can use the GloriaFood plugin. GloriaFood is a service similar to OpenTable, only focused on online orders instead of reservations (though they also offer reservation functionality). We have a detailed tutorial for how to set it up.
In addition to that, there are more plugins for both of these functionalities, such as Online Restaurant Reservation. You can find more options in the plugin directory.
4. Create a Contact Page
The contact page has special meaning for building a restaurant website. It’s how guests find the location of your restaurant(s) and are able to get in touch for reservations and questions. Therefore, it deserves special consideration.
Thankfully, it’s pretty easy to create, and WordPress offers many elements to make it functional and stand out. In fact, when creating a new page, WordPress.com shows you entire pre-defined layouts for different page categories that you can use.
Aside from that, the easiest way to set up a page is to use block patterns. When editing your contact page, go to the block inserter (the big plus icon in the upper part of the editor) and then Patterns > Contact. Use the pattern explorer (linked at the bottom) for a better overview.
This shows you the available contact page patterns on your site. Don’t forget to also check your theme-specific blocks; you might already have something that also goes well with the rest of your design. Once you have picked a pattern, you only need to adjust it so that it has the correct information in it.
Besides that, you can use these helpful blocks to set up a functional contact us page:
- Buttons block – This one allows you to easily add a call to action to your restaurant site, for example, a “call us now” button. If you add your phone number, like tel:1-000-111-2345, mobile users can tap on it and receive a prompt to call the provided number. We have an entire article on how to make phone numbers clickable.
- Form Block – Create a contact form that allows visitors and potential guests to get in touch with any questions they have about this block.
- Social Icons Block – Allows you to add links to your social media accounts so guests can connect with you there.
5. Add Map(s) to Your Contact Page
A special consideration about contact pages is embedding a map. It’s a popular way to make your restaurant easier to find. Visitors can use it to figure out the exact location and also navigate there using their phones.
A popular solution for this is Google Maps. The process is much easier when you have claimed your restaurant on Google My Business; however, it also works with simply an address. Embedding a map goes like this:
First, go to Google Maps and find your business or address on there. When you have done so, click the Share button.
In the popup that appears, choose Embed a map and then Copy HTML.
Return to the WordPress editor and your contact page. Here, add a Custom HTML block in the usual way.
Once on the page, input the code you copied from Google Maps.
When you now preview the block, publish, or update the page, the map should appear on it.
WordPress will also automatically convert the map code to a shortcode. For more detailed instructions, such as embedding custom maps, check out the documentation.
6. Include Social Proof and Reviews
Next up is the oh-so-important social proof. We have already discussed several ways you can introduce this to your restaurant website:
- Social updates with screenshots of customer feedback
- Customer reviews on your own website
- External reviews from third-party platforms
- Media accolades and awards that you have won
What we haven’t talked about is how you can get these on your site. Here are a number of very useful tools for doing so:
- Instagram block – This block allows you to embed your Instagram feed on your restaurant website. That way, when you publish nice things that customers say about you – presto – instant social proof.
- Social embeds – Generally, WordPress allows you to embed content from many social networks. It usually doesn’t involve more than copying and pasting the post URL; the rest happens by itself.
- Testimonial plugins – There are several plugin solutions to add the possibility for visitors to leave reviews on your site. Examples include Site Reviews, which adds Amazon-style review abilities, including star ratings. There are also plugin solutions to embed third-party ratings, such as Plugin for Google Reviews.
7. Display Image Galleries and Slider
Next, we want to discuss ways to display images on your restaurant site. As discussed above, these are great to show off what you serve and give an impression of your restaurant’s interior.
In WordPress, you have a number of different ways to include images. First of all, there is the normal Image block.
It allows you to show single images wherever you want on your website and customize them in many ways.
However, oftentimes, you want to show more than one image and rather show a collection like on Instagram or other visual platforms. Nothing easier than that with the Gallery block.
It allows you to show several images that open in a single view upon click so guests can click through them one by one.
WordPress.com offers many variations on this, such as Tiled Gallery, Collage, Masonry Gallery, and Offset.
They are all different ways of showing off images on your website.
Finally, you can also use the Carousel block. With it, images appear in the form of a slider.
You can customize it in many different ways, such as whether images should switch automatically or manually, you can change the size, transition speed, and a lot more. In short, WordPress has more than enough options to show images from your restaurant on your website in meaningful ways.
8. Test on Mobile Devices
When you are finished building your restaurant website, before publishing it, it’s imperative that you test its design for mobile users. We already established that they are likely to be a large part of your potential audience and that providing them with a great user experience is imperative. For that reason, don’t skimp on this part.
One of the first things you can do is run your site through Google’s mobile usability tool.
It will point out if there are obvious problems that make your pages a hassle to use on mobile devices. Be sure to run all your important pages through it, not just the homepage. If your site is already online and connected to Google Search Console, you also find information on this in the Mobile Usability report.
(Note: Both of these tools will be retired in December 2023.)
In addition, be sure to speed-test your website. Mobile connections are often slower than on desktop devices, and loading speed is another important usability factor. Google has a tool for that as well.
However, we also recommend that you do some manual testing, especially for key functionality such as online reservation, etc. Open your up website on actual mobile devices or at least the mobile view of your browser. Try out all the things you would expect would-be patrons to do, such as reserve a table, view the menu, check out images, use the contact form, etc. If you find a snag somewhere, it’s better to iron it out before publishing your site.
Once you have gone through all of this, it’s time for your restaurant website to see the light of day and make it available to visitors and guests.
Your Restaurant Site & WordPress: Two Great Tastes (They Go Great Together)
Building a restaurant website can feel daunting at first, especially if you have no web design experience and the rest of your hospitality business already takes up a lot of your time and energy. It can also feel unnecessary when you can try to rely on foot traffic alone.
However, in this day and age, where patrons heavily use the Internet to determine where they are going to eat, an online presence is a key asset for any restaurant. Plus, as you have hopefully seen above, building one is far from complicated. All the necessary parts already exist. You simply have to bring them together in a way that makes sense for your place.
If you pay attention to key restaurant website features, you make it much easier for your audience to not only find you but also plan their next visit to you.
Want more tips? Get new post notifications emailed to you.
ABOUT THE AUTHOR
Go WordPress 