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.
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.
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:
- Go to Slides > Add New.
- Type a title for the slide and complete all of the postââ¬â¢s body content.
- Add a “Slider Image” in the Custom Settings panel if you want to display an image in the slide.
- Publish the slide.
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
- Add a new Page in WordPress (Page -> Add New)
- Add a title to the page e.g. “Menu”
- Add some content, if you wish for it to appear above the menu items on the menu page.
- Select the Menu page template in the Attributes panel on the right
- Publish your page!
Adding food menu items
The food menu section also uses a custom post type called “Food Menu”.
- Add a new food menu item in WordPress (Portfolio -> Add New)
- Add a title to the food menu item item
- Add some text in the content to describe the food menu item
- Upload the Food Menu Thumbnail image in the Custom Settings area
- Enter the price of the food menu item in the Custom Settings area
- Assign it to a menu type. Menu types can be added under “Menu Types” in the food menu WP backend options panel.
- Publish the food menu item and repeat for next food menu item
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
- Add a new Page in WordPress (Page -> Add New)
- Add a title to the page e.g. “Make a Reservation”
- Add some content, if you wish for it to appear above the menu items on the menu page.
- 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.
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 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.
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.
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.
You can use a tool like this here to find your lattitude and longitude.
Adding the Directions link to navigation
- Add a new Page in WordPress (Page -> Add New)
- Add a title to the page e.g. “Directions”
- Add some content, if you wish for it to appear above the menu items on the menu page.
- Select the Location page template in the Attributes panel on the right
- Publish your page!
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
- Add a new Page in WordPress (Page -> Add New)
- Add a title to the page e.g. “Blog”
- Add some content, if you wish for it to appear above the menu items on the menu page.
- Select the Blog page template in the Attributes panel on the right
- Publish your page!
Widgets
Custom Optimize widgets
The theme includes 15 custom widgets that you can add to any one of your 8 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
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.
- Archives (template-archives.php) – Displays all categories, monthly archives, popular tags and the 30 latest posts.
- Sitemap (template-sitemap.php) – An alternative to some WordPress plugins out there, this page template will create a sitemap, which you can use for SEO & user-usability purposes.
- Full Width (template-fullwidth.php) – A full width page template without the sidebar.
- Redirect (template-redirect.php) – Is a nifty page template used to “fool” WordPress into creating a menu item in your page navigation, which is in fact a link to an external site. Follow the steps mentioned below under “Adding an external url to your page navigation menu”
- Image Gallery (template-imagegallery.php) * – Displays the images you have associated with your posts in an image gallery, linking back to the original article
- Contact Form (template-contact.php)* – A page with a contact form on it so that a web visitor can email you. Please note you will have to add your email address to the theme option’s panel of the theme to make sure it is set up correctly.
- Blog (template-blog.php)* – A custom page to display posts in an alternate way to the archive.
- Menu (template-menu.php)* – Pulls in all posts from the custom post type ‘Menu’.
- Full Width Menu (template-menu-full.php)* – Pulls in all posts from the custom post type ‘Menu’ and displays them in a full-width page template.
- Location (template-location.php)* – Displays a Google Map highlighting the location, and directions to the restaurant.
- Staff (template-staff.php)* – Displays each of the restaurant staff members that have been setup as WordPress authors.
- Tags (template-tags.php) – Displays all tags used on your website on a dedicated tab page.
- Timeline (template-timeline.php) – An alternate template to the Archives page template – displays posts in order of year.