2021 Q4 Sale BFCM – Free Users Sitewide Banner

  1. Documentation
  2. Themes
  3. Diner

Diner

Important: This theme was retired in February 2014. Documentation is no longer being updated.

Installation ↑ Back to top

After installing and activating the theme, go to Settings > Permalinks and click the Save Changes button, even if there have been no changes. This registers the custom post types used in the theme.

Also go 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 layout ↑ Back to top

The home page consists of modules that are set up via theme options, and widgetized regions that can be set up under Appearance > Widgets.

The Diner home page.

Setting up the home page ↑ Back to top

The theme has a custom panel called Diner in the WordPress admin menu, with theme options. There are also custom post type panels – Reservations, Slides and Food Menu — that display various content on the home page and menu template.

Theme options panels of Diner

Setting up the Featured Area ↑ Back to top

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 theme options.

Adding a slide ↑ Back to top

  1. Go to Slides > Add New.
  2. Enter a title and the body content.
  3. Add a “Slider Image” in the Custom Settings panel if you want to display an image in the slide.
  4. Publish.

Add buttons to Featured Page

To add a button to a page in the featured area, add code by using the HTML tab. Add a link with the class button and wrap the text in a span.

Setting up the Food Menu ↑ Back to top

This theme includes a portfolio template that can showcase your work or products.

Adding the Food Menu link ↑ Back to top

  1. Go to Page > Add New
  2. Enter a title for the page, i.e., Menu
  3. Add 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.

Adding food menu items ↑ Back to top

  1. Add a new food menu item in WordPress (Portfolio > Add New)
  2. Enter a title
  3. Add content to describe the food menu item
  4. Upload the Food Menu Thumbnail image in the Custom Settings area
  5. Enter the price 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, and repeat for next food menu item
Adding a food menu item to Diner.

Setting up the Reservations System ↑ Back to top

Diner comes with custom built-in functionality, allowing restaurant owners to take reservations through their website.

Adding the pages required ↑ Back to top

  1. Go to Page > Add New
  2. Enter a title, i.e., Make a Reservation
  3. Add content, if you wish for it to appear above the menu items on the menu page.
  4. Publish.

Repeat this step to create a page called Manage Your Reservations or something similar.

After you have created the two pages, go to WooTable Settings to set the pages, and enter the restaurant opening/closing hours.

Setting up the Diner reservations module

You can also set the average time of seating for each table.

After you set up the reservations module, you may add the Make a Reservation widget to any widgetized area via Appearance > Widgets.

When a site visitor enters criteria in the widget, they are directed to the Make a Reservation page to complete the reservation fields.

Adding the diner reservation widget to a widgetized region

Adding the Reservation module to the header ↑ Back to top

Tick the checkbox to enable the Book Online reservation module in the header to the right of your restaurant logo. Fill in all fields.

Setting up the location and directions module ↑ Back to top

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

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

Go to the Location Map settings in theme options. Enter the address of your establishment, as well as the latitude and longitude, which are required to make the map work and provide directions.

Location Map Settings

Use a tool like this to find latitude and longitude.

Adding the Directions link to navigation ↑ Back to top

  1. Go to Page > Add New.
  2. Enter a title, i.e., Directions
  3. Add 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.
Adding a page for the restaurant location and setting the corresponding page template to it.

Setting up the Blog ↑ Back to top

With Diner you can have a blog that is accessible from your menu.

Add blog posts as you would with any other WordPress theme via Posts > Add New. These blog posts do not appear on the home page, and are reserved for the specific blog page template we developed.

Adding the Blog link to navigation ↑ Back to top

  1. Go to Page > Add New.
  2. Enter a title, i.e., Blog.
  3. Add 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.
Adding your dedicated blog page and setting the page template.
The Diner blog page.

Widgets ↑ Back to top

There are 15 custom widgets you can add to eight widgetized areas:

  • Woo – Table
  • Woo – Specials
  • Woo – Location
  • WooTable – Business Hours
  • Woo – Monthly Special
  • Woo – Staff
  • Woo – News
  • Woo – Tabs
  • Woo – Flickr
  • Woo – Search
  • Woo – Blog Author Info
  • Woo – Adspace Widget
  • Woo – Embed/Video
  • WooTable – Make a Reservation
  • Woo – Twitter Stream

WooCommerce - the most customizable eCommerce platform for building your online business.

  • 30 day money back guarantee
  • Support teams across the world
  • Safe & Secure online payment