How To

Important installation note

After installing and activating the theme, you need to navigate to Settings > Permalinks and click on the “Save Changes” button, even if you haven’t made any changes. This is to register the custom post types used in the theme.

You also need to navigate to Settings > Reading and set front page to display “Your latest posts” if you have previously had a static page as your front page.

Home page overview

The homepage consists of various modules that are set up via the theme options, as well as widgetized regions that can be set up under the Appearance > Widgets page.

The Diner home page explained

Setting up the home page

Once you have installed the Diner theme on your WordPress 3.+ website you’ll see a custom panel called “Diner” in your WordPress backend menu, with the theme options, etc. within that panel. You’ll also see a few custom post type panels that appear in the backend menu – “Reservations”, “Slides” and “Food Menu”. This custom post types are used to display various content on the home page and menu template.

Please note in the below documentation we try to explain a lot of the theme functionality, but please remember to go through all the theme options in the Diner backend to discover all of the capabilities of Diner, as well as the widgets on the Appearance > Widget page.

The theme option's panels of Diner

Setup the Home Page Featured Area

The Diner home page featured area pulls the custom “slides” post type. The number of slides depends on how many slides you have published. You can set the animation speed, auto start and slide interval under the theme options, the rest of the slide functionality is added via the slides panel documented below.

Adding a slide

To add a slide simply follow these steps:

  1. Go to Slides > Add New.
  2. Type a title for the slide and complete all of the post’s body content.
  3. Add a “Slider Image” in the Custom Settings panel if you want to display an image in the slide.
  4. Publish the slide.
Adding a slide to Diner. Remember to add an image in the custom settings panel if you want one to appear.

Add buttons to featured page

To add a button to a page in the featured area, you need to add some html code by using the HTML tab. Simply add a link with the class button and wrap the text in a span:

Button text

Setup the food menu

This theme includes a portfolio template which can showcase your work or products. To add a menu item you need to follow these steps:

Adding the Food Menu link to navigation

  1. Add a new Page in WordPress (Page -> Add New)
  2. Add a title to the page e.g. “Menu”
  3. Add some content, if you wish for it to appear above the menu items on the menu page.
  4. Select the Menu page template in the Attributes panel on the right
  5. Publish your page!
Adding the food menu page and assigning the "menu" page template to it.

Adding food menu items

The food menu section also uses a custom post type called “Food Menu”.

  1. Add a new food menu item in WordPress (Portfolio -> Add New)
  2. Add a title to the food menu item item
  3. Add some text in the content to describe the food menu item
  4. Upload the Food Menu Thumbnail image in the Custom Settings area
  5. Enter the price of the food menu item in the Custom Settings area
  6. Assign it to a menu type. Menu types can be added under “Menu Types” in the food menu WP backend options panel.
  7. Publish the food menu item and repeat for next food menu item
Adding a food menu item to Diner.

Setup the reservations system

Diner comes with custom in-built functionality allowing restaurant owners to take reservations through their website. This functionality adds huge further benefit to Diner, along with the food menu, featured slider and directions modules.

Adding the pages required

  1. Add a new Page in WordPress (Page -> Add New)
  2. Add a title to the page e.g. “Make a Reservation”
  3. Add some content, if you wish for it to appear above the menu items on the menu page.
  4. Publish your page!

Repeat this step and create a page entitled “Manage Your Reservations”, or something similar.

After you have created the two pages you can navigate to the “WooTable Settings” to set the pages, and fill in the restaurant opening/closing hours used in this module.

Setting up the Diner reservations module

You can also set the average time a seating is at each restaurant table.

After you have set up the reservations module, you can add the “Make a Reservation” widget to any of the widgetized regions via the Appearance > Widgets page in the WordPress backend.

When a site visitor enters their criteria in the widget they will then be re-directed to the “Make a Reservation” page to fill in and complete the final reservation fields.

Adding the diner reservation widget to a widgetized region

Adding the reservation module to the Diner header

There are a few further theme options to set in the theme option’s panel of Diner. You can enable the “Book Online” reservation module located in the header to the right of your restaurant logo. Remember to fill in all the fields.

Enabling the diner reservation module in the header

Setting up the location of the restaurant and the directions module

Diner comes with impressive Google Maps integration that allows you to display the location of the restaurant on a map, along with the functionality to get directions to the restaurant from anywhere – all without leaving the website.

Make sure you have filled in all the theme option’s for the map in the corresponding theme option’s panel.

Setting up the map settings. Remember to get your Google Maps API key.

You also need to be sure to fill out the Location Map settings in the theme options. This is where you enter the address of your establishment, as well as the lattitude and longitude. These are required to make the map work and be able to provide directions to your business.

Location Map Settings

You can use a tool like this here to find your lattitude and longitude.

Adding the Directions link to navigation

  1. Add a new Page in WordPress (Page -> Add New)
  2. Add a title to the page e.g. “Directions”
  3. Add some content, if you wish for it to appear above the menu items on the menu page.
  4. Select the Location page template in the Attributes panel on the right
  5. Publish your page!
Adding a page for the restaurant location and setting the corresponding page template to it.

Setting up the blog

With Diner you can have a blog, accessible from your menu. You add blog posts like you would with any other WordPress theme via the “Posts > Add New” WP option. The blog posts will not appear on the home page though, and are reserved for a specific blog page template that we developed.

Simply follow the steps below to enable the blog and display it on the blog page, as you can see in our demo.

Adding the Blog link to navigation

  1. Add a new Page in WordPress (Page -> Add New)
  2. Add a title to the page e.g. “Blog”
  3. Add some content, if you wish for it to appear above the menu items on the menu page.
  4. Select the Blog page template in the Attributes panel on the right
  5. Publish your page!
Adding your dedicated blog page and setting the page template.
The Diner blog page.

Widgets

Custom Optimize widgets

The theme includes 15 custom widgets that you can add to any one of your 8 widgetized areas:

Page Templates

Custom Page Templates

This theme comes bundled with unique page templates for some additional functionality to your WooThemes powered website.

Below is a list of some of the page templates available across our themes. Please note they are not all bundled with all our themes.

Use of your personal data
We and our partners process your personal data (such as browsing data, IP Addresses, cookie information, and other unique identifiers) based on your consent and/or our legitimate interest to optimize our website, marketing activities, and your user experience.