Building a Restaurant Website With WordPress: Learning by Example

Restaurants need great websites. There’s no getting around it. Yes, local advertising and word of mouth will get you a long way in the food business but potential customers expect a great browsing experience when they Google your restaurant’s name.

And they expect specific features and information to be presented readily. For instance, the best restaurant sites are always mobile optimized, since many people will be searching for food on-the-go. A detailed and easy-to-navigate menu should also be a priority.

While there are plenty of articles about there about how to build a restaurant website, I thought it might be a better idea today to learn by example. What follows is a large-ish list of restaurants that use WordPress to present their businesses to the world. These are some of the most successful examples of restaurant, cafe, and food truck websites built using WordPress I could find. I’ve also detailed which themes and plugins they use where possible.

Before we dive into the list, however, let’s first spend a little time discussing the features that can make or break a restaurant site and how WordPress can be used to make implementing them a little easier.

What a WordPress Restaurant Site Needs

I’m about to make some generalizations about restaurant websites. I hope you’ll forgive me for that. But typically, most restaurant sites will require the following features:

A Menu

This is an obvious one. Nine times out of time site visitors are stopping by to check out what food you offer. Make sure your menu is readily accessible on all devices. That means it needs to be responsive, possibly be touch capable, and feature a font that’s legible on all screen sizes. If you forego a restaurant-specific WordPress theme (or a custom design) you can opt for a plugin like the following:

• WordPress Ultimate Restaurant Menu Maker
• Food and Drink Menu
• FoodPress

Clear Contact Information

Restaurants will often display the location info in the header of the site so the visitor doesn’t have to scroll to find it. You should include the address on a dedicated contact page as well, along with a map, driving directions, and parking info if applicable.

An “About” Page

Every site needs one of these, but for restaurants, this is where you can give a rundown of how you got your start. You can also talk about your chefs here.

Beautiful Photographs

People come for the food, so by all means, show it to them! You can integrate photos into the menu and/or feature them prominently in a header slider or dedicated gallery. Regardless, you need to feature high-quality images that do your food justice.

Reservation information

If you plan on accepting reservations, you need to have this capability built into your site. There are many tools that automate this process, including:

• WP Restaurant Manager
• Restaurant Reservations 

Social Media Integration

Word of mouth is still the most powerful marketing tactic you can have in your arsenal for promoting your restaurant. So you should make it easier for patrons to spread the word about your delicious food using social media. Social media comes standard in WordPress but you can always ramp it up a bit using plugins like the Publicize module in Jetpack, Social Warfare, or our very own Floating Social.

Online shop

While not a necessity, many restaurant websites feature a store as well. This small online shop can be used to sell merchandise related to your brand, like T-shirts, mugs, and possibly even canned or jarred foods you make.

Best WordPress-Based Restaurant Sites

Enough chit-chat, here’s the list of restaurant sites you ought to check out if you’re serious about creating your own and need some inspiration:

Boston Market

Boston Market is a chain of restaurants providing fast rotisserie chicken meals. Its website isn’t perfect, but it does do a good job at making the food look enticing. It does this by putting all of the focus on the images. Navigation is tucked to the top and the bottom of the screen. It’s readily accessible but doesn’t pose a distraction to the pictures.

The site is built on a custom theme and uses Slider Revolution in part to make those eye-catching graphics possible. Some nice interactivity has also been added to menu items. For instance, on the pages for certain dishes, a hover effect is used that displays a tooltip style menu with additional sauce options.

Wandering Goat Coffee Co. 

The Wandering Goat Coffee Co. is a locally owned coffee house located in Eugene, Oregon. The business is a combination of a coffee roaster, shop, and cafe and emphasizes organic blends. The website features a relatively simple design but does a good job at getting the company’s most pressing details to the forefront. It has a parallax effect, distinct page sections, and prominently featured contact details.

Built on the X Theme developed by Themeco, this site uses several popular plugins like Slider Revolution, WooCommerce (with WooCommerce Menu Bar Cart), Visual Composer, and Contact Form 7. The included shop is simple and easy to navigate, there’s elegant dropdown navigation up top, and plenty of fun imagery to maintain branding and keep visitors engaged.

Kogi BBQ

Though not technically a restaurant, the website for the Kogi BBQ food trucks totally counts for this list. It makes use of all the features WordPress has to offer by using eye-catching parallax effects, a unique slider, and a really cool schedule feature that presents graphics of each food truck and its location for each day of the week. There’s also a nifty Twitter feed that’s stylishly presented as its own section, a beautiful CTA for a newsletter signup, a Flickr photo feed, and a minimal but truly useful menu.

It’s built on a custom theme using custom fonts and jQuery. It also uses several plugins including WordPress SEO, Google Analytics for WordPress, Gravity Forms, W3 Total Cache, and Flickr Photostream.

BurgerIJ

This burger joint has a truly stylish website that helps to highlight what matters most—the food! It immerses visitors straight away into full-width images thanks to a large slider. After that, there’s a recent blog posts widget, followed by a masonry-style navigation. A stylish testimonials section is featured after that with even more photos and links. Primary navigation is also tucked away in a collapsible menu on the lefthand side of the screen for your convenience.

BurgerIJ is built on a custom theme and uses Siteorigin Panels to create responsive page layouts via a drag-and-drop interface. It also has a nifty 360-degree view of the restaurant’s interior to further add to its appeal.

Muse Dining

The website for Muse Dining is engaging right from the start, offering a split screen presentation for its two locations—a restaurant and kitchen. Once you click through to either location, you’re treated to simple navigation overlaid on a beautiful slideshow of food photography. Each page provides additional photography as well as content on the righthand side of the screen with accordion-style content to maintain a tidy appearance. Also, the menu is presented in a plain PDF for easy reading.

The site is built on a custom theme but I wasn’t able to see specifically what plugins are used. Still, it provides an effective presentation for potential customers and that’s all we can really ask for, right?

Las Margaritas

Las Margaritas is a Mexican restaurant and cantina that appears to offer a wide selection of authentic foods. The website uses parallax effect to add depth and dimension to the homepage, offsetting bright, bold images of food and fun with stylishly presented typography. Scrolling through the site is sort of an experience, taking you from one image to another of what deliciousness is held in store for you. There’s even a video background detailing how their table-side guacamole is made.

The site is built on a custom theme and uses a handful of familiar plugins include Visual Composer, Jetpack, and WP Super Cache. There are plenty of design details here worth emulating, for sure.

Between the Bread

Between the Bread is a hospitality group that offers catering and event services. However, it also has grab-and-go eatery locations in New York. The website features some interesting hover effects, beautiful video backgrounds, stunning full-width images, and overlaid text to give the site some dimension. The menus are presented as JPEGs and the footer is well-organized with an email signup form and social media buttons. The homepage appears to be widgetized with gallery areas, a news and events section, and a slideshow.

The site was created with the Sage Starter Theme by Roots, which is built on HTML5, Bootstrap, and supports Sass.

True North Restaurant

Described as a New American Gastropub, True North Restaurant offers an new take on old school foods. When the site loads, you’re greeted to a full-width image of the bar with a stylish logo on top. The menu is displayed as a simple list with quick links to each section on the lefthand side of the screen. There are some subtle parallax effects here as well as an engaging gallery with stylish hover effects.

The site uses a custom theme and several popular plugins to achieve its look including Contact Form 7, Photo Gallery, Slider Revolution, Tablepress, and Mega Menu.

Solage Calistoga

Solage Calistoga is a spa resort that just so happens to have a Michelin-starred restaurant on the premises, Solbar. The restaurant offers a mix of California foods and offers an atmospheric dining experience. Its website includes plenty of whitespace to maintain that calm and relaxed feeling and parallax effects to create interest. There’s a click-through gallery slider, buttons with hover effects for the menu, embedded videos of the restaurant’s signature dishes, and embedded Yelp reviews.

This site runs on a custom theme and uses several popular plugins including All-in-One SEO Pack, Open Table Widget, Gravity Forms, and W3 Total Cache.

Amalthea

Amalthea is an event caterer but its website is so engaging and downright interesting I had to include it here. It features parallax effects and sliders that swipe up and down to create a split screen look. It’s a one-page design that you can then click through on each section to learn more about the topic at hand (oyster shucking, anyone?). Every page has fun details that ensure consistent branding, too.

This website is built on the Vigor theme by Edge Themes, specifically the “Artist” version for those interested. It uses several plugins to achieve its stylish effects including LayerSlider, Essential Grid, and Visual Composer.

Coldstream Brewery

The Coldstream Brewery has a fun logo and an interesting story, so it needed a good website to go along with it. Thankfully, its site delivers, with a minimal slider up top, sticky navigation, stylish typography, and distinct page sections that make for a pleasant browsing experience. Even the site’s social integration is branded and compelling. The layout here is clean, minimal, and completely effective.

The brewery’s site uses a custom theme and many plugins including WordPress SEO, Google Analytics for WordPress, WooCommerce, Accordion Slider, Fetch Tweets, and Sitemap.

American Prime Steakhouse

American Prime Steakhouse makes you hungry for steak from the moment you land on its site. With beautiful full-width images to catch your eye, the site pulls you right in to learning more about the restaurant’s offerings. Speaking of, the menu is readily accessible. When clicked, the menu appears on top of that image slider, giving some dimension to the browsing experience. Most menu items are accompanied by a photo and you can click two other buttons to view sides and accompanying wines in a pop-out lefthand menu.

This site uses a custom theme built by ClickLab and though it’s unclear what plugins it uses, it relies on popular features like a slider, overlaid pages, and social media integration.

Wahlburgers

The website for Wahlburgers is pretty straightforward but it looks like it’s pulling off some real design tricks. The homepage is a stylish one-pager with enticing full-width images and super fun typography and graphical elements that draw the visitor in. The rest of the pages are straightforward. The menu is made from JPEGs but there is a text version for the visually impaired, as well as a downloadable PDF. The header and footer are both sticky, but the footer tucks neatly out of the way until you hover over it.

This site is also built on a custom theme and though no plugin information is available, it shows many popular features like hover effects, a downloadable menu, and full-width images.

Pen & Quill

I really love this website. There’s just something about its simple layout, integration of creative parallax effects, large navigation items, and full-width photos that speaks to me. The main navigation consists of three large links that when clicked trigger parallax scroll effects. The menu is particularly impressive as you can continuously scroll through the options available (the more you scroll, the more sections of the menu appear). I’m also in love with the CTA in the About section, which features a very large email signup form that rolls over when hovered upon. Integration with Google Maps and Open Table round off this site nicely.

It uses a custom theme that’s undeniably unique. The scroll and hover effects aren’t new but I’ve never seen them presented in exactly this way before, making for a truly engaging user experience.

Zenzero

Here’s another beautiful site to consider as you approach creating your own restaurant site. More full-width images entice visitors into eating at Zenzero and offer a delightful background for stylish typography and interesting menu hover effects. This site appears to be ideal for storytelling, and offers beautiful reading experiences on the About Us page. Other pages feature tabbed content, parallax effects, and stunning galleries. The menu is minimal and printable and there are some really great popup menu items in the footer that offer quick access to restaurant news, events, and operating hours.

This site is built on another custom theme that provides exactly the right feature set for a restaurant. It also uses Contact Form 7 for its contact page and the result is a clean layout that’s intuitive for end users while still maintaining essential components of the site’s overall design.

Ayza Wine & Chocolate Bar

A common theme among all of these restaurant sites seems to be the use of parallax effects. Ayza Wine & Chocolate Bar is no different and employs parallax with full-width images to stunning effect. As you scroll down the homepage, you’re treated to up close photographs of delicious-looking food, wine, and sweets. Abbreviated navigation is sticky and at the top of the page but there is an expandable app-style menu that offers more options tucked in the upper righthand corner. Each menu type has its own page and is quite detailed. There are also pages for a gallery, special offers, directions, and private events.

This image-centric website uses a custom theme and a handful of popular plugins including Visual Composer, Ad Rotate Pro, and Instagram Grid.

Serving Up WordPress

While there are no doubt countless other fantastic WordPress-based restaurant sites out there, these are a few that have caught my eye in recent months that capture the imagination and provide examples to learn from. Large images, interesting navigation, and highly legible typography spell the difference between food sites that work and those that don’t.

Have you come across any other examples of great WordPress-based restaurant sites? Let us know your thoughts below in the comments.

Tags:

• restaurants