“Dine & Drink” Documentation by “AndThemes” v1.0.8

“Dine & Drink”

Responsive Restaurant Wordpress Theme.

Updated: 03 December 2013
By: AndThemes
Email: support@andthemes.com

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via our user page contact form here. Thanks so much!

Table of Contents

1.) Getting Started - top

First thing first to begin installing Dine & Drink theme. You need the latest version of Wordpress. Here is the download URL. After you finish the set up. You are ready.

2.) Installation - top

2.1) Theme Installation - top

  1. Go to Appearance > Theme
  2. On "Install Themes" tab. Click "Upload".
  3. Choose zip file download file from ThemeForest.
  4. Click "Install Now"
  5. Wait until finish
  6. Activate theme


  1. Unzip download file from ThemeForest.
  2. Upload dine-and-drink folder (located in theme directory) into themes folder in your WordPress installation (/wp-content/themes) via FTP, using your FTP program, such as FileZilla
  3. On the left column, go to Appearance > Themes and Activate Dine & Drink theme.

2.2) Setting Up Demo Content - top

You can setup demo content by follow this ;
  1. On the left column, go to Appearance > Dine & Drink > Settings
  2. Click "Load Default Theme Options"
  3. Click "Load Default Widgets Settings"
  4. Click Import XML Content
  5. Then you'll link to Tools > Import then Click Wordpress to install wordpress importer
  6. Click Install Now on the install importer pop-up window
  7. Then Click Activate Plugin & Run Importer
  8. Upload xml file (located in dine-and-drink/defaults/ directory) then "Upload file and import"
  9. Select admin as a assign posts to an existing user
  10. Check Download and import file attachments
  11. Then Click Submit and wait for a few minute.

2.3) Setting Up Homepage - top

2.3.1 Setting Up Homepage
  1. On the left column, go to Pages > Add New
  2. Type "Homepage" as a Title
  3. On the right column choose your Template as "Front Page Template"
  4. Click the "Publish" button.
  5. On the left column, go to Settings > Reading
  6. In Front page displays, select A static page then choose "Homepage" as a Front page and click Save Changes.

2.3.2 Adding Homepage Slider
  1. Go to Slider > Add New
  2. Set up your feature image by upload image
  3. Give you slide title and some content or you can leave them blank, the translucent text box will not show.
  4. Click the "Publish" button.
  5. To add more sliders, just follow direction 1-4 again.
Slider with Title and Caption and Slider with no Title and Caption

2.3.4 Homepage Widgets
  1. There are some custom widgets for homepage. Click here to see how to Setting Widget.

2.4) Setting Up Homepage in Blog Style - top

Front page can be like a normal blog style by go to Setting > Reading
In "Front page displays" select "Your latest posts" and click Save Changes

2.5) Setting Up Blog - top

2.5.1 Sidebar Position
- You can select your Blog Style, by go to Appearance > Dine & Drink > Blog > Blog Style, - Left Sidebar, Right Sidebar, Full Width

2.6) Setting Up Food Menu - top

2.6.1 Food Menu Categories
First you have to create Food Menu Category
  1. Go to Food Menu > Food Menu Categories
  2. Add New Food Menu Category, give a name and choose None as a Parent then click Add New Food Menu Category
  3. Add Subcategory by give a name and choose Parent then Add new Food Menu Category
  4. To add more Subcategory, just follow this direction again.

Example: Create Salad Menu Chef designed as parent menu with 3 sub category menu (Drink, Pasta and Salad)
  1. Go to Food Menu > Food Menu Categories
  2. Add "Chef designed" category as Parent Menu
  3. Add Subcategory (Drink, Pasta and Salad) by give a name and choose "Chef designed" as a parent
  4. Now you can see Chef designed and their sub category on the right
  5. To add more Subcategory, just follow this direction again.

2.6.2 Food Menu Style
- You can choose Food Menu Category Style by
Go to Appearance > Dine & Drink > Food Menu > Food Menu Style and choose the style you want (there are 3 styles of Food Menu Category).

2.6.3 Food Menu Options
There are 4 options. You can setting more by this following :
  1. Food Menu Chef Recommended
  2. Food Menu Price
  3. Food Menu Badge
  4. Enable/Disable Food Menu Link

1. Food Menu Chef Recommended
You can setting each Food Menu Item to Chef Recommended Menu, in Menu Options check "Chef Recommended". It will show in the top of Food Menu Category.

2. Food Menu Pricing
There are 2 types of Food Menu Pricing:
Setting Additional Pricing of Food Menu:
  1. Go to Appearance > Dine & Drink > Food Menu > Pricing
  2. Add the Price Name
  3. You can add more Pricing Name as much you want
  4. Click "Save Changes"

3. Food Menu Badge
To make some Food Menu Outstanding, you can make Badge/Sign or Icon to your food menu item ex. HOT, 50%, Chill, Vegetarian etc.

Setting Food Menu Badge:
  1. Go to Appearance > Dine & Drink > Food Menu > Badge
  2. Add Badge, Give badge name and upload icon for your badge (recommended size is 20 x 20px )
  3. You can add more Badge as much you want
  4. Click "Save Changes"

Notice : For each Food Menu Item you can add ONLY 1 badge.

4. Enable/Disable Food Menu Link
To Enable/Disable Food Menu Link, you can Check for Enable OR Uncheck for Disbable.

2.6.4 Adding Food Menu Item
Go to Food Menu > Add new
  1. Enter a Title
  2. Enter Food menu content
  3. Select Food Menu Category
  4. Give Food Tags
  5. Set up Featured image as a cover of food menu
  6. Enter the HTML Video Embed Code of the video, youtube or vimeo, etc.
  7. Chef Recommended - on/off
  8. Enter Pricing - Single Price or Additional Princing
  9. Choose Badges, Signs or logos
  10. Enable or Disable food menu link
Food Menu Items can be 3 types
1. Single Image Feature : upload just 1 image (Featured images)
2. Multi Images Feature : Add 2 or more images in gallery
3. Video Feature : paste embed code of youtube or vimeo in to Menu Options textbox (Located under the content box)

2.6.5 How to Order Food Menu Categories and Food Menu Items

How to Order Food Menu Categories
1. Go to Appearance > Dine & Drink > Food Menu > Food Menu Categories
2. Drag Food Menu Categories to Re-Order your Food Menu Categories

How to Order Food Menu Items
Food Menu Items are order by date desc
1. To Re-Order your food menu items Go Food Menu
2. Hover on food menu title and use Quick edit to Edit your Food menu item date

2.7) Setting Up Gallery - top

2.7.1 Gallery Categories
First you have to create Gallery Category
  1. Go to Gallery > Gallery Categories
  2. Add New Gallery Category, give a name and choose None as a Parent then click Add New Gallery Category
2.7.2 Adding Gallery
  1. Go to Gallery > Add new
  2. Enter a title and some contents
  3. Click "Add Media" then go to "Media Library" tab, choose "Uploaded to this post" and browse your images.
  4. Give a title for each image or leave it blank.
  5. When you finish all upload click "X" on the top right corner
  6. Finally, Click Publish

3.) Custom Menu - top

This theme support 1 header menu.

Setting up custom menu

  1. Go to Appearance > Menus
  2. Give a Menu Name then click Create Menu
  3. In Theme Locations, select your header menu
  4. On the top right, click Screen Options and check options in Show on screen that you want.
  5. You can choose, Custom Links, Posts, Pages, Categories, Food Menu Categories and etc.

Setting up Font icon on menu

  1. Find your icon from Font Awesome 3.2.1 website http://fortawesome.github.io/Font-Awesome/3.2.1/icons/ and make note of its name
  2. Go to Appearance > Menus.
  3. In the Navigation Label add this code for home icon.
Add Font Awesome Menus Plugin, follow the step on how to use tab

4.) Themes options - top

On the left column go to Appearance > Dine & Drink

  1. Setting Header Social Network
  2. Enable/Disable Responsive
  3. Insert Google Analytics Tracking Code.
  4. Setting Favicon.
  1. Update Google WebFont
  2. Headline Font Setting
  3. General Font Setting
  4. Top Navigation Font Setting
Overall Elements
  1. Upload Website Logo and setting position
  2. Setting Reservation Link
  3. Setting Home Slider
  4. Setting Footer Widgets layout and Footer Copyright
Elements Color
  1. Setting Header Color
  2. Setting Main Navigation Menu Color
  3. Setting Body Color
  4. Seting Sidebar Color
  5. Setting Content Area Color
  6. Setting Footer Widgets Color
  7. Setting Footer Copyright Color
Food Menu
  1. Choose Food Menu Category Style
  2. Setting Food Menu Categories Order
  3. Setting Food Menu Badge
  4. Setting Food Menu Price
  5. Setting Food Menu Slider
  6. Setting Food Menu Social Share
  1. Setting Blog Style
  2. Setting Blog Social Share
Custom CSS Setting & Support
  1. Load Default Theme Options
  2. Load Default Widgets Setting
  3. Import XML sample contents

5.) Widgets - top

You can configure widgets on your site from Appearance > Widgets On the left column.

5.1) Custom widgets - top

Your theme comes with 11 custom widgets:
1. AT - 4 Boxes
2. AT - Flickr
3. AT - Home Food Menu
4. AT - Home Gallery
5. AT - Home Special Boxes
6. AT - Home Stunning Text
7. AT - Opening Hours
8. AT - Recent Posts
9. AT - Twitter - check this tutorial on Youtube.
10. AT - Unwrap Text
11. AT - Weekly Menu

5.2) Widgets Area - top

Your theme contains 5 widget areas.
1. Home Area
2. Sidebar
3. Footer Area One
4. Footer Area Two
5. Footer Area Three (will be active when choose footer 1/3 1/3 1/3 layout)

5.3) Widget compatible - top

Table of widget compatible, this table will show you which widget is Good, Fair or Not Recommended for which area.

Widget name \ Widget area Home Area Sidebar Footer
Archives Good Good Good
AT - 4 Boxes Good Good Good
AT - Flickr Good Good Good
AT - Home Food Menu Good Not Recommended Not Recommended
AT - Home Gallery Good Not Recommended Not Recommended
AT - Home Special Boxes Good Not Recommended Not Recommended
AT - Home Stunning Text Good Not Recommended Not Recommended
AT - Opening Hours Fair Good Good
AT - Recent Posts Fair Good Good
AT - Twitter Fair Good Good
AT - Unwrap Text Good Good Good
AT - Weekly Menu Fair Good Good
Calendar Categories Good Good Good
Custom Menu Good Good Good
Links Good Good Good
Meta Good Good Good
Pages Good Good Good
Recent Comments Good Good Good
Recent Posts Good Good Good
RSS Good Good Good
Search Good Good Good
Tag Cloud Good Good Good
Text Good Good Good

6.) Custom Page Template - top

6.1 Full-Width Page Template
The Full-Width Page Template allows the creation of a page without a sidebar. The content will span the full width of the site.

7.) Shortcodes - top

This theme comes with many shortcodes

Click on each shortcode name to see it and how to use it.

  1. Accordions
  2. Blockquote – pullqoute left, right
  3. Buttons
  4. Columns
  5. Contact Form
  6. Divider
  7. Google maps
  8. List style
  9. Message boxes
  10. Reservation Form
  11. Slider
  12. Tabs
  13. Toggle boxes

8.) Translation Ready - top

This theme is translation ready to be support translations in more than one language. We have included .PO/.MO files.

9.) Theme Files - top

CSS Files Javascript Files
PSD (Photoshop Files) Powered with Twitter Bootstrap Framework
use Font Awesome

10.) Sources and Credits - top

Thanks everybody for the great images and files were used in this theme.
The following files are used as listed:

JQuery Twitter Bootstrap Framework http://twitter.github.io/bootstrap/
Font Awesome 3.2.1 http://fortawesome.github.io/Font-Awesome/3.2.1/

Demo Videos from Vimeo and Youtube

All images under Creative Commons Attribution 2.0 Generic (CC BY 2.0) for commercial use.

Once again, thank you so much for purchasing this theme. As We said at the beginning, We'd be glad to help you if you have any questions relating to this theme. No guarantees, but We'll do our best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.


Go To Table of Contents