How to Make a Restaurant Website with WordPress

Do you want to create a restaurant site? Well, it’s easy if you have the right tools. In this post, we’re going to learn how to make a restaurant website with WordPress. A restaurant website has various features such as an online food menu, and ordering system, cart, etc.

Some restaurant and food websites have order tracking and other advanced features too. We’ll use Orderable, a very popular restaurant and online food ordering plugin for WordPress. It comes with lots of features and functionalities necessary for restaurant websites.

If you have a restaurant or any food business, it’s a good idea to create a website for that. Having a website will not only help you popularize your restaurant, but also will help you generate more revenue thanks to online orders.

So if you want to know how to create a restaurant site in WordPress, keep reading. Because we’ll go through the step by step process of building a restaurant or food menu website in WordPress.

What is Orderable?

Orderable is a WordPress food ordering plugin. We’ve covered more details about it in our Orderable review article. Here we’ll also give an overview. As you know, a restaurant website has various features such as:

• Food menu
• Online ordering
• Delivery and pickup services
• Tipping
• Order bumps

Orderable gives you access to some of the advanced features that a modern food business or restaurant website should have. The plugin has been designed and developed following the industry standard. You can create your own WordPress food ordering website without having to code a single line.

Orderable is not only for a restaurant. You can use this plugin for various purposes. According to the Orderable website you can use Orderable for the following businesses:

• Bakeries
• Florist
• Speciality stores
• Restaurants & cafes
• Virtual restaurants & takeout
• Mom-and-pop stores

If we think about it, we can use this plugin for almost any retail business. Orderable has a free version which you can use to create a restaurant website. It gives you all the basic features you need but if you want to use the more professional features of this plugin, then you need to get Orderable Pro. In our tutorial, we are going to use Orderable Pro to create the website.

👉 Get Orderable Plugin NOW

What do you need to create this website?

If you want to create the exact website that you see in this tutorial, then you need the following:

• A WordPress website (local or live)
• Kadence theme (Resto starter site)
• WooCommerce plugin
• Orderable Pro

We used the Kadence theme for this website. You can use the free version of Kadence and there are a few restaurant starter sites. However, if you decide to purchase Kadence, you’ll have access to even more customization features. But for this website we’re going to use the free version.

In order to keep this article manageable, we’re not going to go through the most basic steps such as purchasing domain and hosting, setting up a fresh copy of WordPress site, etc. If you know how to do the basic steps, just simply get a good domain hosting service, then install WordPress on your server. You can get help from your hosting provider in this regard. You can also watch our tutorial on how to create a WordPress site.

After you install WordPress, access your WordPress admin dashboard and install the Kadence theme. Then import the Resto starter site and follow the tutorial given below.

How to create a restaurant site with Orderable?

As we mentioned earlier, Orderable has a free version that you can use. If you go to Plugins > Add New from your WordPress dashboard, you can search for Orderable. This will bring up the plugin that you can use. However, we will add advanced features in the website that we’re making. For this Orderable Pro is needed.

👉 Get Orderable Plugin NOW

Once you get Orderable Pro, make sure it is installed and activated. After activation, insert the license key by going to Orderable > Settings from your WordPress dashboard. Under the Dashboard tab scroll down to find the license key area. Put in your license key here to activate your product.

After adding the license key, click on the “Activate” button beside it. Then you should see a message “Activated”. Now click on the “Save Changes” button to save your changes.

Now that we have our theme and plugin installed and activated, we can start building the website. 

Step 1: Creating food menu

If we check our website, we can see that we already have a menu page. Although the food items shown on this page are for aesthetic purposes. You cannot order these food from it. So first it’s important to remove this section. On the top bar click on ‘Edit’ to edit the page.

The section that has the food item is built with two columns. Select each column and a floating menu will appear on top of the column. Then click on the 3 dots and click on delete to remove a column.

Using this same method, remove the other column. Don’t worry we’ll display our own menu here.

Displaying the menu on frontend: To display the intended menu, select the block where you want to insert the menu. You can select the section where the previous menu was. Also make sure to have only one column. Then click on the ‘+’ icon on the top left corner of the screen to reveal all the Gutenberg blocks.

From this list, search for “Orderable: Product Layout” and select it. As soon as you select this block, it will list all the products listed in your WooCommerce Product section. Those products were created as dummy data when you imported the Resto starter site.

That is how you can display your food menu. 

Adding food items: Now that you have a food menu, you should also add in your own food items instead of these dummy data. First go to your WordPress dashboard and from there go to Products > Add New. You can also edit the existing products and replace the texts and images with your own.

Once in the product section, do the following:

• Add food item name
• Add a description
• Add an image for your food
• Add the regular price
• Add sale price (If you want to provide a discount on the product)
• Select a category

That’s basically all you have to do. Once you’re done, you can click on the “Publish” or “Update” button located on the right side. 

While you’re here, you can also see two interesting tabs in the Product Data section. In the Nutrition Info tab, you can add the nutrition value of your food item. In the Allergens tab you can add things which people might have allergies to. For example, some people have peanut allergies. You can mention that through this tab.

To create a category, you can do it from Products > Categories or you can create it while in the product editing or creation section.

Now you can assign a category to your food item. Following this process, create as many categories (entree, desert, veg, non-veg, etc.) as you need. Then assign these categories to your food items.

Customizing layouts: You can also customize the layout of the food menu. To do this go to Orderable > Product Layouts from your WordPress dashboard. You can create separate layouts for each category.

To use this layout, go back to the menu page and click on ‘Edit’. Select the Orderable Product Layout block. From the right side menu, click on the drop down and select the layout you want to display.

So you can create separate sections for desserts, gourmet, non-vegetarian, vegetarian, etc. You can also display your entire menu in this one section if you want.

Using all these technique, you can display and design your food menu. Now you know how to add your food items, create the layouts and display the food menu on the site.

Step 2: Setting up the food delivery system

Every restaurant website or any food business that has a website should be able to take online orders. If they have the resources, they should also set up a food delivery system. Orderable gives you the features through which you can accept online orders.

After you add your food items through the WooCommerce Product section, those will be visible on the Orderable Product Layout block. Through this interface, customers will be able to order food online. But you also have to set up a few things.

• Setting open hours: The first thing that you should ensure is your open hours. If you’ve gone through the setup wizard, then you probably have set the open hours. If you  haven’t, you can access it through Orderable > Settings and on the Location tab. 

After setting up the open hours, save the changes.

• Setting up Locations: Next you should also set up your location. This could either be your shop location or a drop off point. If you have multiple shops, you can enter those locations here. Go to Orderable > Location and click the Add New button. Here you can add in your restaurant location and also specify delivery or pickup services.

After enabling the Delivery and Pickup options, you should also specify Delivery Zones. Here you can either use existing zones, or create a new one. You can insert different delivery charges for different zones.

For pickup options, your customers will pick up their orders from your store location. You can select days or periods of pickups. There’s also an option “Same as delivery service hour” which you can check. This is common for most restaurant and food businesses. After you’re done, click on the “Publish” button to save your changes.

Now when a customer orders food from your website they can select the delivery or pickup option.

During the checkout process a customer can also select the local pickup option.

Step 3: Special food item setup

There are various restaurants that offer special food items or “Specials of the Day”. These food items are only available during a specific period. Using Orderable you can set a special food item or timed product. From your WordPress admin dashboard, go to Orderable > Timed Products and hit the “Add New” button.

First, give a name to the timed product. You can call it anything. On our site we named it “Special of the day”. Then you can set the action to either “Visible” or “Hidden”. Then you can select timed product rules. You can select on date, before date, after date, date range, day of the week, and time range. In our case we selected “Day of the Week” and set the day to Tuesday. You can also set a time range.

Next, you have to choose conditions. The conditions are set by applying rules. You can select a product or product category, followed by equals to or not equals to, and finally the product or product category. After setting your condition rules, click on the “Publish” button to save changes.

Now this food item will only be available during the time period set by you.

👉 Get Orderable Plugin NOW

Step 4: Set up tipping

If you want you can enable tipping so that your customers can leave a tip. Orderable has tipping options that you can use. To enable it go to Orderable > Settings and open Tip Settings. Here, first check the “Enable Tipping” checkbox to enable this feature.

Next, press the “Add Option” button to add multiple tipping options. Here you can add the label, amount, and type in the options. In the label field write what you want your customers to see. In our case, we want to write the amount of money. You can also add a percentage. In the amount field write the amount of tip. After that you can also enable the custom tip option where your customers can select a tip of their choice.

Step 5: Set up table ordering with QR code

With Orderable, your customers can scan a QR code and order from a specific table. Once they scan the code and confirm, the order for that table will be generated on your WordPress backend. From your WordPress dashboard go to Orderable > Table Ordering then click on the “Add New” button. You have to manually add all the tables that you want to be available for online reservation.

After you publish the table, a QR code will be generated which will be specific for this table. When your customers scan this code they will be directed to its order page.

With all that setup, your restaurant or food business website is good to go. You can now create your menu and display food items by category, or display your entire menu in one section. You can also design your product layout, allow discount, display nutrition value of the food item, state allergens, enable delivery and pickup services, enable tipping, enable table ordering and much more.

So that is how you can create a restaurant website with WordPress using the Orderable plugin.

👉 Get Orderable Plugin NOW

👉 Video: How to Create a Restaurant Website in WordPress

Conclusion

That brings our tutorial to an end. Orderable is a simple and straight-forward plugin. It gives you all the features that you need to set up your restaurant or food business website. With this plugin, you can easily create your restaurant website. You can take online orders and track your orders from your WordPress dashboard. This will surely enhance your business reputation as well as revenue.

So what are your thoughts on Orderable? Did you manage to create the website you wanted with it? Let us know in the comments below.