Rockfield

Rockfield is a refined theme designed for restaurants and food-related businesses that want simple elegance that’s always clean, never stuffy.

First impressions matter. Before people dine with you, many will visit your website. What will they find? Rockfield is a WordPress restaurant theme that impresses guests before they take their first bite of your dishes.

Showcase your unique recipes with large images that make mouths water and stomachs growl. Provide a preview of your alluring atmosphere and stylish setting with photo galleries and videos. Update your menu without hiring a web designer. Use the WordPress block editor to customize your site,  even if you’re unfamiliar with coding — this restaurant website template is made for DIYers. 

Whether you’re building a site for a coffee shop, a sports bar, or a trend-setting new eatery, Rockfield is an inspirational way to begin creating your restaurant website. Choose this free WordPress theme and start today!

It’s our business to help you succeed online

We know starting from scratch can be daunting, so we included clear, step-by-step instructions and video tutorials to help you build an attractive website. If you’d like to skip right to a specific section, click on the relevant link:

Building Your Site Setting up Your Homepage Adding Content Adding Your Logo
Adding a Menu Connecting Social Media

Building Your Website

You’ll be using the Customizer to configure your site’s look and feel. To access the Customizer, click on My Site in the top-left corner of the screen, look for the Personalize section in the sidebar, and click on Customize. (Going forward we’ll use the Customize → X format to point to a specific section within the Customizer.) Learn more about the Customizer here.

When you’re ready to exit the Customizer, click the X in the top-left corner. Whenever you make changes you’d like to keep, click on the blue Publish button, just to the right of the X button. Don’t worry, we’ll remind you to save your progress as you go. Let’s get started!

Setting up your Homepage

The demo site uses a static homepage. Follow these steps to achieve the same look:

1. Publish two pages and give them titles that are easy to remember, like “Home” and “News.” To publish a page, navigate to My Site → Pages → Add Page.
2. Next, go to Customize → Homepage Settings.
3. Select “A static page” and choose the two pages you published in Step #1  — “Home” and “News” — as your Homepage and Posts page, respectively.
4. You can give your site a more streamlined look by hiding the static homepage title. To do this, scroll down to the bottom, and check Hide Homepage Title.
5. Click the Publish button on top to save your changes.

Adding content to your Homepage

Rockfield fully supports the new WordPress Editor. You can choose any of the available blocks to create a wide range of content for your site. Here’s how we built the homepage on the demo site, block by block:

Adding Your Logo

If your business has a logo, you can display it in your site’s header. Here’s how:

1. Open My Site → Customize and click on the Site Identity section.
2. Click the Add logo button to open the Media Manager.
3. Upload a new image, or select one that’s already in your Media Library.
4. Click Set as logo and you’ll see your logo appear in the preview.
5. If your logo includes your site’s name or you prefer the header only to display your logo, you can hide the site title by unchecking the box next to Display Site Title.
6. Click the Publish button on top to save your changes.

Your logo will appear to the left of the site title on desktop computers, and above the Site Title on mobile devices. The maximum height of the logo image is 60px, while the width can be adjusted as needed.

Adding Site Navigation

It’s time to create a navigation menu to help your visitors find the information they’re looking for. The first step is to create a menu, following these instructions. Once you’ve created the menu, you can pick where you want it to go.

1. Head to Customize → Menu.
2. Select the Menu Locations panel.
3. Assign the menu you’ve just created to the Primary Location.
4. Click the Publish button on top to save your changes.

Connecting Social Media

With Rockfield, you have the option to display links to your social media accounts in the header, right below the main site navigation. To do that, you’ll first need to set up a Social Links Menu. Once you’ve done that:

1. Head to Customize → Menu.
2. Select the Menu Locations panel.
3. Assign the menu you’ve created to the Social Menu Location.
4. Click the Publish button on top to save your changes.

Linking to each of your social media profiles in your social menu will automatically display its corresponding icon. See which social media icons are supported.

Downloading the Theme

You can download Rockfield to use on your self-hosted site using the link below. It is a child theme of Varia, so you will also need to download a copy of the WordPress.com version of that theme, available here.

Download Varia

Keywords

food, restaurant, cafe, grocery, bar, bakery, blog, business, booking