Over 80% of Americans look up restaurant locations and hours online before going out. By not creating a site, you miss out arguably the biggest source of new customers.
Fortunately, restaurant websites are inexpensive and fairly easy to create. Through Bluehost, you can spend as little as $2.95/month (or $35/year) on a complete website package, including domain, hosting and business email. You’ll also get access to our simple WordPress template, Fit Web Themes: Restaurant Edition, which comes preloaded with 2018’s essential restaurant website features. It just takes a few clicks to customize the site with your own branding.
Fit Web Themes: Restaurant Edition
The secret to a successful business website in 2018 is simple. Whether it’s checking your hours, or ordering online, visitors know what they want before they get there. Your job is to anticipate these requests, and provide the answers on a fast and easy-to-navigate platform.
That’s why we created Fit Web Themes: Restaurant Edition. It has all the key elements to a restaurant website—like prominent contact information, ordering buttons, and mobile functionality— with a modern, attractive and well-functioning design. As a WordPress theme, you can easily adjust it for your own business. Simply enter your text and photos, and adjust colors, fonts and other features on an easy-to-use menu. There’s no coding required.
To use our free theme you’ll need a WordPress account. If you have one already, you can skip to installation instructions below. Otherwise, we’ll show you how to set up a WordPress account next. Using Bluehost, you get a WordPress website, custom domain (www.YourSite.com) and business email, all starting at just $2.95/month.
Step 1: Get Your Domain & Hosting
To create a business WordPress website, you first need a hosting plan. We recommend Bluehost because they combine everything into one package (website, domain AND professional email accounts) and offer the best pricing starting at $2.95/month.
To get started, simply follow the link and click “Get Started Now.” The first step is to choose your hosting package. Their basic plan is just $2.95/month when you sign up for 36 months. It should be sufficient for most single-location restaurants. Consider the “plus” plan only if you intend to create more than one website, or need more than 5 business email accounts.
Next, you’ll choose your website domain— e.g. www.YourRestaurantName.com. While Bluehost lets you choose between different extensions, most restaurants opt for a .com name, since its the most popular and well known. If your top choice is taken, consider adding an extra word, like your city name, or check out our top 25 domain name ideas for additional tips. You can also use the tool below to see what’s available:
Lastly, you’ll enter your payment information and finalize your order. Keep in mind, in order to get the best pricing, you do need to pay for 3 years upfront. However, you can also cancel within 30 days for a full refund.
Step 2: Set Up WordPress
Once you’re signed up for Bluehost, you’ll be prompted to set a password and confirm your email address. After this, you’ll land on the Bluehost welcome page. Before you begin working on your site, there’s 3 quick steps to complete:
- Click “My Sites” on the left panel, then “Manage Site.”
- Find the “Settings” panel. In the box that says “Site URL,” change the temporary URL to the one you just purchased. This ensures your new domain is linked up with your new site.
- Now click the “Security” tab. In the box that says “Free SSL Certificate” click enable. This will change your website to an “https,” which is better for search engine rankings.
Once those steps are complete, click “Log in to WordPress” to start designing your site.
Step 3: Install & Customize Fit Web Themes
Clicking “Log in to WordPress” will bring you to your WordPress dashboard. This is the main ‘control center’ of your website, where you’ll design your pages, make edits, add blog posts, etc. First things first, you need to get Fit Web Themes: Restaurant Edition installed on your site. To do this, hover over “Appearance” on the left menu and click “Themes.”
Now click “Upload” in the top-right corner:
Now click the button “Upload Theme” at the top of the screen. This should open a prompt to upload a file. Download Fit Web Themes: Restaurant Edition here, then upload this entire .ZIP file onto WordPress. Once loaded, click “Install Now.”
Once finished, click “activate.” You’ll now have Fit Web Themes installed on your site and are ready to start designing!
Customization Menu
Designing your website is as easy as adding your name and restaurant information, uploading your photos (or using our provided rights-free images), and if you like, making simple adjustments to the format and style of the site. Fit Web Themes: Restaurant Edition was designed to be as user-friendly as possible. Yet, it’s also highly customizable: You have full control over colors, fonts, and page formatting, all managed from the easy-to-use customization menu.
To get started, hover over “Appearances” on the left-hand toolbar, then click “Customize.”
The customization menu is divided further into subsections, like Header and Social Links. Find instructions for each of these by clicking the links below. If you need help on any of these sections, you can also ask a question in our user forum.
Click Box For Instructions
Header
Design the header panel to your website. You have the option of uploading a logo, or simply entering your restaurant name as text (you’ll be able to adjust the font later.) Below that, input your street address and phone number.
If you still need a logo, check out designers on Fiverr, with pricing starting at $5.
By default, the header color is transparent black. This allows you to easily read the white text, while still making your background image visible behind it. If you want to change the header or text color, simply click the box and use the sliders to adjust it.
Adjust colors easily using the color selector and transparency slider.
Social Links
Add social media icons to the top-right corner of your website. Simply paste your page link under the appropriate field and the icon will automatically appear. There’s also an option to add an email address with a mail icon. If you haven’t created social media accounts yet, learn about the benefits of Facebook, Yelp, and Instagram for business.
Design
Choose your website’s font and color themes. By default, the site uses Londrina for headers, and Open Sans font for the body. However, you can select different fonts and preview them instantly to the right. Body font is used in paragraph sections like “About” or “Hours.” Your headings font appears in section titles, and sub-headings is used for buttons, and your main navigation menu.
| Body Fonts | Header Fonts |
|---|---|
| Open Sans Josefin Slab Montserrat Playfair Display Comfortaa Vokov Raleway | Roboto Slab Indie Flower Fjalla One Francois One Londrina Shadow Londrina Solid Acme Shrikhand Satisfy |
Default Background Color will adjust the background color for certain sections and pages on your website. The reason it doesn’t change the background color everywhere is because some sections (like Location and Gallery) have their own color controls.
If you want to use the same background color across your whole website, simply choose your color, then locate the 6-digit HEX color code. Write this down, or copy it to your clipboard, then apply it anywhere else you want to use this color.
Copy/paste this code to re-use colors.
Section Order
Click the eyeball to hide a section, or drag to rearrange.
Choose which sections you want to appear on your homepage, and in what order. Simply click and drag a section to re-arrange. Or, click on the eyeball icon to remove a section from your website.
Here’s a rundown of the 6 homepage sections available for this theme:
- Hero. Features a title, background photo and 2 (optional) buttons. This should almost always appear at the top of your website.
- Location. Displays your address, hours, and contact information, plus an embedded Google Map.
- Gallery. Adds a simple image gallery to your homepage.
- About. A place to add a short bio, menu description, or mission statement.
- Email Capture. An optional mailing list signup form powered by Mailchimp.
- Footer. Add text, links, or images to the bottom of your website.
Section: Hero
The hero section features a large banner image with bold, capitalized text, and 2 (optional) buttons underneath. Think of this as the main “headline” of your website. It should capture your visitors’ attention, provide a simple summary of your business, and give visitors a easy way to proceed via the 2 buttons.To add an image, you can select one of the 3 default images we’ve provided (coffee beans, dough, or a cutting board with red peppers), or upload your own. If you don’t have a high quality image of your business just yet, you can find more royalty-free photos on Pixabay, Unsplash, or Pexels.
Once a photo is uploaded, pay careful attention to your color scheme. If your photo is dark, make sure your text white or brightly colored— or if your photo is fairly bright, use dark colored text instead. The “Background Color” allows you to further lighten or darken your image by adding a transparent layer over the image.
Comparison: The left side is a raw image. The right side has a 30% transparent black layer.
For example, above I added a transparent black layer over my image (right side). Notice how much easier it is to read the text and button compared to the original image (left side).
Adding Buttons
To add buttons, simply enter button text, and a URL where the button should lead. Also choose a color and button style that matches your website theme.
To remove a button, simply delete the text and URL. Change the button style, and after the preview screen refreshes, you’ll no longer see that button.
Section: Location
A simple menu to add essential business information, including your address, hours of operation, and contact information. This section also features an embedded Google Maps widget that shows your address as a pin on the map. To set this up, you’ll need a Google or Gmail account (which you can create for free), then follow these instructions from Google to get an API key.
Section: Gallery
A simple gallery to display photos of your dishes, dining room, or guests. You can upload as many photos as you like. The photos will appear as thumbnails, and visitors can click to zoom-in.
“Layout Columns” changes the number of columns in your photo gallery. You can use it to increase or decrease image sizes. For example, changing it to 3 will feature larger rows of 3 images each.
Add as many rows/columns as you like. Visitors can click to zoom in on photos.
Section: About
Add a paragraph description of your restaurant. This section is hidden by default, so if you want to use it, make sure you enable it under “Section Order.”The reason we’ve kept this section hidden is because it won’t be necessary for most restaurant websites. Your main goal is to get visitors to your ordering page, your menu, or to find your address/contact information. A text-based section like this will only distract from the more important features on your homepage. Instead, we’ll show you how to create a separate “about” page later in this guide.
The exception is if there’s an important message you need to convey, and there wasn’t enough room on your Hero section… e.g. “Serving all locally sourced farm-to-table foods with vegan options,” or “Located in one of the original hideouts of Al Capone; restored with original decor.” If the message is key to your branding, then make sure its displayed front and center.
Section: Email Capture
This is an optional section for Mailchimp users who want to add a newsletter signup form to their website. Simply write a header and subheader, then add your Mailchimp API Key and List ID.As with all the sections, you can move email capture to wherever it fits best on your website. For example, if email marketing is one of your top priorities, move it just below your hero to maximize engagement. Simply head to “Section Order” and drag email capture above the other sections.
If haven’t started email marketing yet but are interested in trying it out, Mailchimp has a free version for small businesses. Click here to sign up, or learn more about what they offer in our email marketing software buyer’s guide.
Section: Footer
Like the header, your footer appears on every page of your website. It’s typically used to post website credits, photo credits, and copyright information. You can also add up to 6 accolades, which are small icons that represent awards or achievements for your business.
Accolades can include restaurant awards, certifications, press links, social media links and more.
Simply click “Add new Accolade,” and upload an image. Ideally this should be a transparent PNG, so it doesn’t clash with the background color of your website. You also have the option to link a URL, e.g. the article that mentions your business.
To find these logos, just use Google Images. Set the color to “transparent” on the top menu bar.
Navigation Menus
Create your main navigation menu, which will appear on the website header.Click “Create new Menu” and name it “Main Navigation” or something similar. Check the box that says “Navigation Menu” and click Next.
Now Click “Add Items.” This opens a menu where you can decide which links to add to your navigation bar. Because you’ve only created 1 page so far (Home) there won’t be too many options. Just click “Home” for now— you can add more later.
Once you’ve finished making edits on the customization menu, click the gear icon up top and select “Save Draft.” Then click the X to head back to the main dashboard. You can come back to the customization menu at any time to keep working.
Step 4: Create Your Food/Drink Menu
Most restaurants add their menu one of two ways: They either upload an image of their menu, or type it out on a webpage with a few images added for embellishment. I highly recommend the 2nd option, since menu scans can be difficult to read on mobile. Plus, typing out your menu makes it more likely to appear in search engine results.
To design your menu, we recommend the free plugin Food and Drink Menu. You’ll find a prompt on the dashboard to install this. Just click “Begin installing plugin.”
If you still prefer to upload an image of your menu instead, you can skip to the next step, where we’ll explain how to create a new page and add an image.
Click Box For Instructions
Installing Food and Drink Menu Plugin
After you’ve clicked “Begin installing plugin” you’ll be prompted once more to click “install.” This will take just a few moments.Once complete, click “Return to Required Plugins Installer” and then select “Activate” below Food and Drink Menu.
You should now see a new icon appear on the left side of your screen. If you don’t see “Menus” like in the image below, try refreshing the page. If you still don’t see it, double-check that you activated the plugin during the previous step.
Add Menu Sections
Hover over the menu icon, and select “Menu Sections.” The first step to designing your menu is to add the various sections (e.g. appetizers, entrees, beverages) you’ll be serving.
Go ahead and add a few different menu sections. You can always add or change these later. For the slug, type the same word in all lowercase. Use a hyphen instead of a space if there’s multiple words (e.g. “specialty-dishes”).
Add Menu Items
Now hover over the menu icon and select “Menu Items.” Click “Add new menu item” at the top. On the next page you’ll get to add an individual menu item. There’s 4 key fields for each item:
Remember these 4 fields for each menu item
- Menu Item Title. Add at the very top.
- Description. Add in the large box below. To include a photo, click “Add Media.”
- Menu Sections. Choose which section or category this item belongs in.
- Price. Last but not least, don’t forget to add the price in the lower right corner.
Once complete, click “publish” and repeat for each menu item.
Finish Your Menu
Once all of your menu items have been added, hover over the Menus icon on the left toolbar, and this time click “Menus.”
Now click “Add Menu” at the top. Give the menu a name (e.g. Dinner, Brunch, Catering), then scroll to the bottom where it says “Menu Layout.”
Here you can drag the different menu sections you created to design your menu page. Place them in one of two columns, and drag and drop to arrange the order. When you’re finished, click “Preview Changes” at the top.
Once you’re happy with your design, click “Publish.”
Once your menu (or menus) are finished, remember to add the menu to your main navigation bar.
Head to Appearance > Customize > Navigation Menus > Main Menu
Click “Add Items” and you should now see the food menu you just created as one of the options.
Step 5: Add More Pages To Your Website
While not always necessary, many business owners like to add additional pages to their website, such as About, Contact, Deliveries, Catering, or Our Story. It gives you the opportunity to add extra information without making your homepage too crowded. If you’re uploading an image file to display your food/drink menu, this is also how you create the menu page.
To create a page, head back to your dashboard and click “Pages” on the left toolbar. Click “Add New” at the top of the page.
For each page you create, there are 3 key elements to look out for:
- Page Title. Add at the very top.
- Page Slug. The URL of the page you’re creating; add just below the title.
- Page Contents. Add in the large box below. To include a photo, click “Add Media.”
Once finished, you can preview your page, save it as a draft, or just click “Publish” to go live. You can always make edits later, even after it’s published.
Create a Blog For Your Restaurant Website
If you want to create a blog to post news updates, share recipes, promote special events, etc. WordPress is an excellent platform for this.
Simply head to “Posts” on the right left menu bar, and click “Add New.” Just like creating a new page, you’ll add a title, write text and add images/media content.
I recommend saving each blog posts under the same category name, like “Blog” or “Updates.” This way, adding your blog to your main navigation bar is easy. Just click “Add Items” > “Categories” > “Blog”
If you wanted to create 2 different blogs (e.g. one for recipes, another for news and updates), then simply use 2 different categories. Now you can link to them separately on your navigation bar.
Final Step: Publish Your Site
When you’re ready to go live, click the Bluehost button on the left menu bar.
Now locate the box that says “Launch Your Site” and click the button “Launch.”
This will make your website go live. You should now be able to type your URL in a browser and reach your site. If you’re getting an error, head back to Step 2 and confirm that you entered the right URL on the “settings” panel.
The Bottom Line
In addition to your domain and website, Bluehost also gives you professional email accounts that use your domain (you@yourrestaurant.com). To set this up, check out our guide on creating a business email account.
As a proud new website owner, you’ll also want to learn some of the basics of SEO, or search engine optimization. Our guide how to rank high on Google searches covers everything you’ll need to know as a restaurant. Be sure to also check our marketing section for even more tips and tricks. And if you’re just starting out, our restaurant floor plan guide has plenty of tips that can save you time and money in your launch.
If you’re still having trouble setting up your website, or have any remaining questions about how to use Bluehost or WordPress, you can also drop us a line on our user forum.
Submit Your Comment
Disclaimer: Reviews on FitSmallBusiness.com are the product of independent research by our writers, researchers, and editorial team. User reviews and comments are contributions from independent users not affiliated with FitSmallBusiness.com's editorial team. Banks, issuers, credit card companies, and other product & service providers are not responsible for any content posted on FitSmallBusiness.com. As such, they do not endorse or guarantee any posted comments or reviews.
You must be logged in to comment. Click the "Log in With LinkedIn" button below to connect instantly and comment.