If you are running a restaurant, cafe or coffee shop, you already know how tough and competitive the marketplace is. Therefore, to catch your potential customers eyes, you need to have a gorgeous website. An online presence that shows off the food and the dining experience people will enjoy when they come to your establishment. To help you achieve this goal we are going to show you how to create a restaurant website with WordPress.
This article will be helpful if you want to build a website for your restaurant but you are not really tech-savvy. Maybe you don’t want to pay a web development company a lot of money to build a top-notch site from scratch.
Choose A Theme
Today we will use the Brasserie WordPress theme by Template Express, which is a free theme available from WordPress.org repository. Firstly, take a look at the Brasserie demo to visualize what your finished restaurant website might look like. If you feel that Brasserie doesn’t fit your business then there are many other free WordPress themes to pick from.
Featuring an easy setup process and elegant design, you will be able to create your user-friendly restaurant website in no time. Using the simple WordPress Customizer options, you can change the look and feel of your site to fit your business needs.
Brasserie WordPress Restaurant theme is 100% mobile responsive and looks amazing on all screen sizes and device types. It is a highly customizable theme with different layouts, featured areas, widgets and unlimited color and font options.
You can also add stunning food menus and set up an online table reservation system. This theme offers a quick and easy solution for your restaurant website.
Brasserie theme supports WooCommerce integration allowing you to have a built-in online store on your restaurant website. It can be really handy especially for coffee shops that usually sell bagged coffee or branded T-shirts and other apparel.
Installation
Let’s dive in and see how you can get your restaurant website up and running with this awesome theme!
Brasserie is a freemium WordPress theme, whereby you can have basic functionality provided free of charge and more advanced features available with an upgrade to Brasserie Pro version. In this article we will work with the free version and then tell you about the add-ons you get with the paid version.
To install the theme from the WordPress theme repository go to Appearance > Themes > Add New. Here you can find the multitude of free WordPress themes. In the Search box type in Brasserie to find the theme. Hover over the theme preview image and click the install button and then click the activate button.
After you have activated Brasserie you will see the welcome screen with information about getting started. From this page you can pick from a selection of options that will help you to set it up. It is recommended and indeed useful to have a look at the Brasserie theme demo and the documentation before proceeding any further.
Plugins
After theme installation you are given the option to install two recommended plugins to increase your website’s functionality: Food And Drink Menu and Restaurant Reservations.
Food and Drink Menu from the wonderfully talented Theme of the Crop allows you to create a restaurant menu for cafes, bars, and other food establishments and display it anywhere on your site.
Restaurant Reservations plugin allows you to accept online table bookings and restaurant reservations. You will be able to quickly confirm or reject bookings, limit booking times, send out custom emails to your customers and more. We will look at the set up of these plugins later in the article.
Create some content
At this point, your website will look fairly basic showing the default ‘Hello world’ post and widgets on your homepage. So let’s add more pages and content to make it more visually appealing.
We will start by creating our home and blog pages that will allow us to add some awesome features. Go to Pages > Add new and name it “Home.” We are not going to add any content at the moment. Select ‘Custom Home Page’ option from the right panel on the page and click publish button at the top.
Repeat the page creation process for the Blog page, but there is no need to change options on the right panel.
Proceed to the WordPress admin panel Settings > Reading > Your homepage displays and change the radio button to the static page setting. Select homepage and blog page respectively in the drop-down menu and hit Save Changes.
After this, your newly created Homepage will become the front page of your restaurant website. Your Blog page will display your posts like news, articles, special deals, etc.
Customization
Now we can continue to build your homepage and populate it with content using the Customizer.
Go to Appearance > Customize to access the WordPress customizer options and see the live preview of all changes to your website.
Customizer allows you to change the look of your website quickly and easily by selecting and updating the options from the left panel.
You can easily change your restaurant’s website title & tagline, logo, colors, typography, header image, contact information & social media accounts links.
All these settings are quite straightforward and pretty much self-explanatory. We will get into more detail on how to change your homepage settings as it is the most crucial page your customers will see first.
Go to Appearance > Customize > Homepage settings to see the available options for designing your homepage. Here you can edit the slider, featured text boxes with images, promotion bar with button and today’s specials to display your food creations. You can also choose to disable any of these sections if they are not needed.
Homepage Slider
To create an elegant looking homepage slider, go to Appearance > Customize > Homepage settings > Homepage – Slider and from the drop-down box select FlexSlider. The FlexSlider option will display posts from the Featured category.
Therefore, to add slides you need to create a couple of posts in one category by clicking All Posts > Add New and updating post name, content and featured image. To display these posts on the homepage slider go to Posts > Categories and under the name of the category with your slides click Quick edit and type in ‘featured’ in the Slug textbox. This way your posts will appear as slides on the homepage.
Other Homepage Elements
You can now proceed to edit the promotion bar by going to Appearance > Customize > Homepage settings > Homepage – Promotion Bar and changing the text, colors, and adding a button with URL.
Let’s continue editing the homepage by customizing the featured text box section following Appearance > Customize > Homepage settings > Feature Text Boxes. Here you can edit the three featured areas by changing the image, header, subheader, and URL of each text box.
All of your recent blog posts will also be automatically displayed in the From the blog section.
In the Specials section you can display your most delicious foods or some special offers for your selected menu items. To edit these options go to Appearance > Customize > Homepage settings > Todays Specials, where you can add four images and URLs.
You can also follow Appearance > Customize > Widgets to add a nice looking footer with three custom widget areas to include some important information for your customers.
If you are familiar with CSS, you can truly take your restaurant website design to another level by adding some custom styling in Appearance > Customize > Additional CSS.
Reservation settings
Once your homepage is ready, you might also want to add a reservation and table booking functionality to your site. You can do this using the recommended Restaurant Reservations plugin. It is a highly customizable form builder that both looks nice and is dedicated for table bookings.
Start by adding a Book A Table page. Now go to your WordPress admin dashboard panel and find Bookings tab. In the Settings options change the Booking page drop-down menu to select your Book A Table page. Here you can also select various booking options like date, time, number of people, etc. That’s it! You will have a stunning looking table booking system ready to go.
Food menu
One thing you will need if you want to create a restaurant website with WordPress is a food menu. Brasserie theme integrates with the popular menu builder plugin “Food and Drink Menu” that can help with this task.
Start by creating a food menu page. Once that is in place, go to your WordPress admin dashboard panel and click the Menus tab. From there you can create menus, menu sections, and menu items.
The process is very easy and similar to adding regular posts and categories to your blog. Here you can add food images, titles, description, and prices. Assign each menu item to a relevant menu section.
Go to Menu tab and in the menu layout subsection drag and drop menu section to the necessary column. You can create full-width or two column layout here. To display your menu, copy the menu shortcode and paste it on your page. Have a look at your gorgeous menu now!
Final Thoughts
We hope this article has helped to show you how to create a restaurant website with WordPress that suits your business needs. At this point you have everything you need to add remaining content to your pages, posts, and widget areas.
Everything we have covered can be achieved using the free Brasserie theme. However if you want to have even more features, you might consider upgrading to Brasserie Pro theme. The paid version of this theme includes additional theme colors and font options. It also features more template layouts, fast premium support and easy one-click demo content installation.
Leave a Reply