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


“Dine & Drink”

Responsive Restaurant Wordpress Theme.

Updated: 16 December 2014
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 dine-and-drink.zip (located in dine-and-drink-v_1_1_2/theme/dine-and-drink.zip) that download from ThemeForest.
  4. Click "Install Now"
  5. Wait until finish
  6. Activate theme

Or

  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 > Setting and support
  2. Click "Load Default Theme Options"

    If your site got white background feel like missing css style and can’t change theme colors setting or any of the colors manually. The problem is about some sever can not create the CSS file. Please follow this step:

    2.1. Create blank “customize.css” and upload it in “wp-content/themes/dine-and-drink” folder
    2.2. Chmod “customize.css” to 777.(if you use filezilla, right click on the file > file permissions > numeric value)
    2.3. Go to Appearance > Dine & Drink > Setting and support
    try to click load theme option again.

  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 theme directory /defaults/xml/xml-dine-and-drink-examplesite.wordpress.2013-06-12.xml ) 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.
  6. Go to setting home slider options in Appearance > Dine & Drink > Overall Elements > Home Slider
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 Change Page Title Icon of Post Category and Single Pst

Find icons from Font Awesome 3.2.1 website http://fortawesome.github.io/Font-Awesome/3.2.1/icons/ and make note of its name

Go to Appearance > Dine & Drink > Blog > Post Title Icon
Type the icon name to input box
ex. if you want bullhorn icon type "icon-bullhorn"




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




2.5.3 Single Post Custom Options
- Post Layout Stlye - 1.Default, 2.Left Sidebar, 3.Right Sidebar, 4.Full Width
- Post Sidebar - You can select custom Sidebar for each post.




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.


Change Recommended Food Menu Icon and Text

Recommended Menu Icon and Text will display in Food Menu category page, single food menu and AT - Home Food Widget




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

Or
Using “Post Types Order” Plugin http://wordpress.org/plugins/post-types-order/
1. Go to Plugins > Add New
2. Search “Post Types Order” install and active it.
3. On the left Column, Hover on Food Menu your will see new subcategory “Re-Order”
4. You can Drag and Drop to sort your food order when you finish re-order click update in the bottom.
you can sort Food Menu Categories in Appearance > Dine & Drink > Food Menu Categories



2.6.6 How to Add Food Menu Category Description

How to Add Food Menu Category Description
1. Go to Food Menu > Food Menu Categories
2. Give some food menu category description in "Description" field




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




2.7.3 Change Page Title Icon of Gallery Category and Single Gallery

Find icons from Font Awesome 3.2.1 website http://fortawesome.github.io/Font-Awesome/3.2.1/icons/ and make note of its name

Go to Appearance > Dine & Drink > Gallery > Gallery Title Icon
Type the icon name to input box
ex. if you want camera icon type "icon-camera"




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.
OR
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

General
  1. Setting Header Social Network
  2. Enable/Disable Responsive
  3. Insert Google Analytics Tracking Code.
  4. Setting Favicon.
Font
  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 Text & Link
  3. Setting Home Slider
  4. Unlimited Sidebars
  5. 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. Food Menu Title Icon
  6. Setting Food Menu Slider
  7. Setting Food Menu Social Share
Blog
  1. Setting Blog Style
  2. Post/Blog Title Icon/li>
  3. Setting Blog Social Share
Gallery
    Gallery Title Icon
Custom CSS

Setting & Support
  1. Load Default Theme Options
  2. Load Color Scheme Theme Options
  3. Load Default Widgets Setting
  4. Import XML sample contents
  5. Friendly URL


General > Header Social Icon

General > Responsive Design

General > Tracking Code
Paste your Google Analytics Tracking Code here. This will be added before the closing tag.

General > Favicon

Font > GoogleWebFont Directory
Click to update your Google font list. Preview the fonts at GoogleFont Directory

Font > Headline Font Setting
Setting up font family and size for Headline
Ex. Page Title, Header Line Font, Widget Title, Post name, Post Date, Read More, Food Menu Title, Gallery Title

Font > General Font Setting
Setting up font family and size for Gerneral text

Font > Top Navigation Font Setting
Setting up font family and size for header navigation

Overall Elements > Header Setting up your header style

Overall Elements > Hide and Show Elements Style > Hide All Ribbons and Icons
Check to Hide all Ribbons and Icons (from page titles, widget titles, post titles, gallery, price tag etc… )


Overall Elements > Hide and Show Elements Style > Remove Zig-Zag Pattern in the Footer
Check to Remove Zig-Zag Line Pattern in the Footer Area.


Overall Elements > Footer
Footer widget stlye and Footer Copy Right text


Setting & Support > Friendly URL
Change text in the url
1. Change the text of the URL and click Save changes
2. Go to Setting -> Permalink
3. Select 'Default' in Common Settings then Click Save Changes
4. Select 'Post Name' in Common Settings then Click Save Changes
5. Go to your front end of your website and reload it.

Single Food Menu URL - default is menu
Food Menu Categories URL - default is menu-category
Single Gallery URL - default is menu gallery
Gallery Categories URL - default is menu gallery-category


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 12 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
12. AT - Text


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)

Unlimited Sidebars
Dine & Drink allows you to create an unlimited number of sidebars
Create sideabr in Appearance > Dine & Drink > Overall Elements > Unlimited Sidebars
You can customize your sidebar in Appearance > Widgets and you can use your custom sidebar in Page and Single Post




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
AT - Text 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

5.4) Change Widget Title Icon - top

The Custom Widgets (The widgets that the name start with AT) can change their title icon.

Find icons from Font Awesome 3.2.1 website http://fortawesome.github.io/Font-Awesome/3.2.1/icons/ and make note of its name
Type the icon name to icon input box of widget
ex. if you want beer icon type "icon-beer"





6.) Custom Page Template - top

6.1 Page Template

6.1.1 Default Page Template - Default page template will use setting of sidebar position of Apperance > Dine & Drink > Blog > Style
6.1.2 Front Page Template - Template for Front Page (Home)
6.1.3 Full-Width Page Template allows the creation of a page without a sidebar. The content will span the full width of the site.
6.1.4 Left Sidebar Page Template
6.1.5 Left Sidebar Page Template



6.2 Page Options

Sidebar - Unlimited Sidebars
Page Title icon - change page title icon
Find icons from Font Awesome 3.2.1 website http://fortawesome.github.io/Font-Awesome/3.2.1/icons/ and make note of its name
Type the icon name to page title icon input box
ex. if you want fork & knife icon type "icon-food"


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


if you can not find shortcode toolbar button Try to click on Toolbar Toggle to show and hide it.




8.) Translation Ready - top

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

For Wordpress in Default Language(English (United States))

1. if your file in on the server use ftp to download file
/wp-content/themes/dine-and-drink/default.mo /wp-content/themes/dine-and-drink/dine-and-drink-v1.1.3.po
2. Download poedit for edit .po file http://www.poedit.net/download.php
3. Open your .po file with your poedit
4. Find your text that you want to change, click the word that you want to translate and then put translated word to the input box below.
5. find your country code to save as your new file http://www.gnu.org/software/gettext/manual/gettext.html#Country-Codes
6. Now you got new .po and .mo file
7. Go to /wp-content/themes/dine-and-drink/ create new folder name : languages
8. Put your new .po and .mo file to /wp-content/themes/dine-and-drink/languages/
9. Edit wp-config.php (located in root folder) define your language
define ('WPLANG', 'YOURFILENAME');


For Wordpress in Others Language (Not English (United States))

1. if your file in on the server use ftp to download file
/wp-content/themes/dine-and-drink/default.mo /wp-content/themes/dine-and-drink/dine-and-drink-v1.1.3.po
2. Download poedit for edit .po file http://www.poedit.net/download.php
3. Open your .po file with your poedit
4. Find your text that you want to change, click the word that you want to translate and then put translated word to the input box below.
5. Save as your new po mo file by using name dine-and-drink-YOUR_CONTRY_CODE_LANGUAGE.po
Example : if your language is Spanish(Espanol) Save as dine-and-drink-es.po
6. Now you got new .po and .mo file
7. Go to /wp-content/languages/themes/
8. Put your new .po and .mo file to /wp-content/languages/themes/


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
Images

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.

AndThemes

Go To Table of Contents