“Eatery” Documentation by Themovation

Eatery v2.1

Last Updated: September 30 2014
By: Themovation

Thank you and congratulations for purchasing Eatery. We have put a lot of time and effort to ensure that you have a positive experience using and customizing this theme. Our goal is to answer any questions you may have. If you have a question that is not answered here we welcome you to email us via our user page contact form here.

Getting Started
Theme Features
Theme Shortcodes
1. Typography
2. Columns
3. Buttons
4. Food Menu
5. Google Map
6. Images and Lightboxes
7. Ruler
8. Slide Show
9. Tabs
10. Toggle
11. Blog Feed
Custom Sidebars + Widgets
Custom Menus
1. Main Menu
2. Mobile Menu
Custom Page Templates
1. Reservation Template
2. Food Menu Item Template
Child Themes
1. Creating a Child Theme
Theme Files

01 - Getting Started - top

To install this theme you must have a working version of WordPress. For instructions on how to install and setup WordPress please see the WordPress website. http://codex.wordpress.org/Installing_WordPress

Installation - top

To install the theme you must upload the theme file package and then activate it inside the WordPress Admin area. Themes can be uploaded in two ways:
1. WordPress Upload: Once you are logged into your WordPress site navigate to Appearance > Themes > and click on the Install Themes tab. Next click on Upload and then Browse..., and select the zipped theme file. Click "Install Now" and the theme will be uploaded and installed.
2. Manual FTP: Using an FTP program, upload only the unzipped theme folder (not the .zip file or all of the folders) into the /wp-content/themes/ folder on your website server.
Once the theme is uploaded, you need to activate it. Go to Appearance > Themes and click activate below your newly uploaded theme.
Permissions (optional)- top

If you choose to enable TimThumb (image resizer), you may need to set folder permissions on your web server in order to use it.
1. Manual FTP: Using an FTP program, navigate to the following folder [WEB ROOT]/wp-content/themes/eatery/includes
2. Cache Directory - For TimThumb to work properly you need to have a cache directory called 'cache' inside the same folder as the timthumb.php file. - If it is not there, create one.
3. Cache Directory Permissions - the cache directory should exist inside the same directory as TimThumb. It should have permissions set to 775.
4. Still not working? Extra Cache Directory Permissions - if 775 doesn't work then you may find 777 will work.
5. If you find TimThumb is still not working correctly, try the following resources to resolve any problems you may have: Binarymoon.co.uk | The Buzz Media | HostGator TimThumb Help
Demo Content (optional)- top

Included in this theme package is an XML file of sample data that you can import to quickly and easily have your site look similar to the demo site. Importing the XML file will add posts, categories, pages, comments, events, food menu categories, food menu items and navigation menu content.
1. Locate the sample content file in the theme package. It's in a folder called demo content.
2. From the WordPress dashboard, go to Tools > Import and click WordPress, then Install.
3. After you activate the plugin, just select the file from your theme package and follow the instructions.
Since some areas cannot be included in the Import file, you can follow the steps below to further match the demo site content.
1. Homepage & Blog Setup - Go to Settings > Reading and set the Front page to display the page "Welcome to Eatery", and the Posts page to "Blog".
2. Sidebar Specials
  1. In WordPress 3.5, the Link Manager was removed from the default WordPress install. For any new installs, or if you weren't making use of the Link Manager before upgrading, you'll first need to install the official WordPress Link Manager Plugin.
  2. Go to Links > Link Categories and create a category for your specials (eg. $5 Features)
  3. Add new links where the Name is the title of the item (eg. Chicken Salad) and the Web Address is the link to the menu item (eg. http://www.yourdomain.com/food/chicken-salad/)
  4. All other settings can be left as default.
3. Permalinks - Go to Settings > Permalinks and set the Custom Structure to /%category%/%postname%/
TIP: Though we feel that importing the demo content is the best way to get started, we also provide an alternative method if you do not wish to import the XML file. Included in the same directory in the theme download package are txt files where you can copy/paste one or all of the pages' contents into your site.
Setting Default Homepage - top

If you choose not to import the sample content and follow the steps, then by default WordPress displays your latest posts on the homepage. You may prefer to have a traditional page show instead. Here is how we do that.
1. Go to Pages > Add New and create a new Page called 'Home', add some content and 'Publish'.
2. Go to Settings > Reading and click the radio button beside 'A static page', then select the 'Home' page you created in step one from the 'Front page' dropdown list.
3. Click the 'Save Changes' button.
TIP: If you plan on adding a Blog to your website you will also need to create and select a page for your blog posts. You can do this under Settings > Reading and use the 'Posts page' dropdown list.

02 - Theme Features - top

Header Image - top

Creating a header image is as easy as selecting up to 8 of your favorite photos.
1. Go to Appearance > Themes Options > Layout and Scroll down to 'Upload Header Images'.
2. Check the 'Auto crop and sew on save' checkbox
3. Click the 'Upload Image' button beside 'Image1' and choose your first photo or image using the WordPress Add Media Files modal window.
4. Drag and drop or select files as you would normally in WordPress, select 'Full Size' and click the 'Insert into Post' button.
5. Add up to 8 images or photo and click the 'Save Changes' button when you are ready to create your header image. Eatery will crop, sew and save your images to the WordPress Uploads folder set under Settings > Media > Store Uploads in this Folder setting.
6. To hide the header image uncheck the checkbox next to the 'Use header image' setting on the Layout Tab.
TIP: Make sure to use images that are at least 340px in height so that they don't get stretched or distorted.
Custom Logo - top

To add your logo:
1. Go to Appearance > Themes Options > Layout and Scroll down to 'Logo'.
2. Click the 'Upload Image' button beside 'Logo' and use the WordPress Add Media Files modal window to upload your logo.
3. Drag and drop or select files as you would normally in WordPress, select 'Full Size' and click the 'Insert into Post' button.
4. Click the 'Save Changes' button.
5. Eatery will crop and save your logo (260px wide) to the WordPress Uploads folder set under Settings > Media > Store Uploads in this Folder setting.
Skin Selection - top

Eatery comes with 5 custom theme selections. Try them all or choose your own custom colors.
1. Go to Appearance > Themes Options > Layout and Scroll down to 'Skin Selection'.
2. Use the drop down menu to select a theme skin style.
3. Click the 'Save Changes' button.
Custom Colors - top

Create your own style with custom colors. Use our skin colors as a base and tweak or start from scratch.
1. Go to Appearance > Themes Options > Layout and Scroll down to 'Custom Color Selection'.
2. Check 'Use custom colors'
3. Start with a base of colors by selecting 1 of the 5 options under 'Custom Color Field Populator' OR
4. Start from scratch and choose your 6 colors using the WordPress color picker. Click anywhere inside any of the custom color fields to active color picker.
5. Click the 'Save Changes' button.
TIP: When using the 'Custom Color Field Populator' some text inside the custom color fields may be hard to read, uncheck 'Use custom colors' and click 'Save Changes' to reset. When you are happy with your selected colors, recheck 'Use custom colors' and 'Save Changes' to activate.
Background (Pattern or Full Image Background) - top

Upload your own custom background image (pattern tile or full image).
1. Go to Appearance > Themes Options > Layout and Scroll down to 'Background'.
2. Click the 'Upload Image' button and use the WordPress Add Media Files modal window to upload your image.
3. If you are using a full image for the background you'll need to take additional steps for best results. If not, skip to the last step to save your changes.
4. Under 'Disable Pattern Tiling', CHECK 'Disable Tiling for best full image background results'.
5. Under 'Header Image' on the same Layout Tab, UNCHECK 'Yes, use a custom header image.'
6. Click the 'Save Changes' button.
TIP: Check out subtlepatterns.com for a great variety of classy tiles.
Homepage - top

The homepage displayed in the theme demo is simply a WordPress page with shortcodes and content added. You can quickly and easily replicate the homepage in the demo, and adjust the content and layout to suit your needs.
1. The Getting Started > Demo Content section in this document covers how you can simply import the demo content from an included file which will setup a lot content including the homepage from the theme demo.
2. We also provide an alternative method if you do not wish to import the XML file. Included in the same directory in the theme download package are txt files where you can copy/paste one or all of the pages' contents into your site, so you can copy the homepage contents from there instead.
Food Menu Groups (Menu Categories) - top

Add a Food Menu Group (a.k.a. Menu Category) to organize your Menu Items in groups. e.g.: Breakfast, Lunch, Dinner
1. Go to Food Menu > Menu Groups.
2. Enter in a new Name e.g.: 'Breakfast'
3. Click the 'Add New Category' button.
4. Repeat until you have all of your Food Menu Groups added. e.g.: Breakfast, Lunch, Dinner, Drinks (or come back later as you can add more at any time)
TIP: Once you have added your Food Menu Groups as well as your Food Menu Items you'll need to use the Food Menu Shortcode to make your Food Menu appear.
Food Menu Items - top

Food Menu Items usually belong under one or more Food Menu Groups. (i.e.: Hamburgers may show under the Lunch Food Menu Group) Here is where we explain how to add a Food Menu Item.
1. Go to Food Menu > Add New.
2. Give your Food Menu Item a Title e.g.: 'Hamburger'
3. Give your Food Menu Item a description in the Post Editing Area.
4. Under Menu Item Details give your Menu Item a Price and an optional Price Description, Second Price, Second Price Description, Third Price, Third Price Description, Fourth Price, Fourth Price Description, Fifth Price and Fifth Price Description. e.g.:
  Price Description: Full Order
  Price: $9.99
  Second Price Description: Half Order
  Second Price: $6.99
5. Check a Menu Group under Menu Groups to add this Menu Item to a Food Menu Group (Category)
6. Click 'Set featured image' under the Featured Image box to add a preview image. Use the WordPress Media Files modal window to upload your image.
7. With the modal window still open make sure to select 'Full Size' and then click 'Use as featured image'.
8. Click 'Save all changes' and then the 'X' in the top right corner of the modal window to close.
9. Click the 'Publish' button to save.
TIP: Food Menu Items are arranged inside of each group by the date that they are published. They will appear top to bottom in the order you input them. You can always go back and change the publish date if you wish to change the order.

TIP: Once you have added your Food Menu Groups as well as your Food Menu Items you'll need to use the Food Menu Shortcode to make your Food Menu appear.
Events - top

Adding Events
1. Go to Events > Add a New Event.
2. Fill out your event details. Provide a title, a description, a Start date / time, a End date / time, a featured image and choose or create an optional category.
3. Click the 'Publish' button.
Displaying Events
1. Add a new Page and select 'Events' from the Template select list.
2. Click the 'Publish' button.
3. Add this new page to your Navigation Menu via the WordPress Appearance > Menus option.

Displaying Event Categories

Once you have added a new event category via Events > Event Category, add this new category to your Navigation Menu via the WordPress Appearance > Menus option.

Typography - top

You can choose from the theme's Google Font selection for a variety of heading and paragraph text styles.
1. Go to Appearance > Themes Options > Typography.
2. Click the radio button next to any combination of headings and paragraph options.
3. Click the 'Save Changes' button.
TIP: Use the H1 Sample text and Paragraph sample text form fields to demo each font styles.

TIP: Reset defaults by using the Clear H1 and Clear Paragraph Text options. Click Save Changes to reset.

Set custom font sizes for Headings and Paragraph Text.
1. Go to Appearance > Themes Options > Typography.
2. Under 'Heading Sizes' enter in the size that you would like to use including the px or em font sizing e.g.: 12px or 2em
3. Click the 'Save Changes' button.
Add your own Google Font
1. Go to Appearance > Themes Options > Typography.
2. Under 'Custom Google Font' enter in the name of your font. e.g.: Rancho | Find More
3. Under 'Custom Font CSS' enter in your CSS selector and font-family e.g.: h1 { font-family: 'Rancho', cursive;} | Examples
4. Click the 'Save Changes' button.
TIP: If you like, you can have multiple custom Google Fonts. To add more than one custom, simply put a pipe between the titles in the Font Name field. For example:

Rancho|Snowburst+One|Jacques+Francois+Shadow
Social Media Settings - top

Add your Social Media accounts and choose your icon colors
1. Go to Appearance > Themes Options > Social Media.
2. Check 'Use Custom Icon Color' checkbox and select one of 6 options below to use custom colors.
3. Add the full address to your Social Media account next to the icon you would like to use. Once filled in these icons automatically show up in the sidebar.
4. Click the 'Save Changes' button.
TIP: For email, paste in the link to your contact page or use mailto:myemail@mydomain.com
Enable / Disable Responsive - top

You have three options when it comes to the responsive aspect of the theme: 'Responsive / Fluid' is the default setting where the website is fully responsive and fluid so that it reformats itself to look great on everything from a large display monitor all the way down to a smartphone. The second option 'Disable Responsive / Semi-Fluid' turns off the responsive functionality, so the website does not reformat itself for smaller screen sizes, and instead optimizes the site for what's considered to be the current lowest common resolution (1024 x 768) while still expanding slightly larger for the larger size monitors. The third option 'Disable Responsive / Fixed' turns off both the responsive and fluid functionality and is fixed at the lowest common resolution.
1. Go to Appearance > Themes Options > Layout.
2. Check 'Disable Responsive (Fixed) Layout' radio to disable the responsive theme CSS.
3. Click the 'Save Changes' button.
Google Analytics Code - top

Add your Google Analytics Tracking Code (asynchronous)
1. Go to Appearance > Themes Options > General.
2. Copy and Paste your Google Analytics Tracking Code into the text box provided.
3. Click the 'Save Changes' button.
Custom CSS - top

Add your own custom CSS. Code placed here will overwrite all other code in the theme.
1. Go to Appearance > Themes Options > General.
2. Copy and paste your custom CSS style(s) into the text field provided.
3. Click the 'Save Changes' button.
Custom Footer Copy - top

Add your own footer copy
1. Go to Appearance > Themes Options > General.
2. Copy and paste your footer content into the text field provided.
3. Click the 'Save Changes' button.

03 - Theme Shortcodes - top

Eatery includes several shortcodes that are designed to improve the look and feel of your website. The concept of a shortcode is to make use of advanced features without the knowledge of HTML or scripting.

Typography Shortcode - top

Add Drop caps, Highlighting and Pull quotes to style your content. Use the 'Typography' toolbar dropdown menu in the TinyMCE WYSIWYG editor (a.k.a. content toolbar) that comes bundled with WordPress to add shortcodes for you. You can select text before choosing a shortcode to wrap shortcodes around the selected text. You can also copy and paste the examples below directly into the Page or Post Editing Area to use shortcodes.

Drop caps
1. [dropcap1]E[/dropcap1]
  » to add a drop cap style 1 to the letter E
2. [dropcap1shade]E[/dropcap1shade]
  » to add a drop cap style 1 with color to the letter E.
3. [dropcap2]E[/dropcap2]
  » to add a drop cap style 2 to the letter E.
4. [dropcap2shade]E[/dropcap2shade]
  » to add a drop cap style 2 with color to the letter E.
Highlighting
1. [highlight]text to highlight[/highlight]
  » to highlight text with style 1
2. [highlight style="dark"]text to highlight[/highlight]
  » to highlight text with style 2
Pull quotes

Add pull quotes to cite customer testimonials. There are 4 different styles and alignment settings that you can use to get your pull quote looking just right.
1. [pullquote aligntext='left' alignblock='right' cite='~ Customer' style='style01'] Amazing Food, Excellent Service [/pullquote]
2. [pullquote aligntext='left' alignblock='left' cite='~ Customer' style='style02'] Amazing Food, Excellent Service [/pullquote]
3. [pullquote aligntext='left' alignblock='right' cite='~ Customer' style='style03'] Amazing Food, Excellent Service [/pullquote]
4. [pullquote aligntext='left' alignblock='left' cite='~ Customer' style='style04'] Amazing Food, Excellent Service [/pullquote]
Column Shortcode - top

Arrange your content in columns for better organization. Use the Columns drop-down inside the TinyMCE WYSIWYG editor (a.k.a. content toolbar) to help you wrap the shortcode around selected text or just to display a sample of this shortcode to get you started.

A two column example
1. If you wanted to create a two column layout you may start off with the following:
  [one_half] This text goes into the first column of two [/one_half]
  [one_half_last] This text goes into the second column of two [/one_half_last]
2. The above shortcode example would give you two columns one would appear floating left the other floating right.
3. Add this shortcode anywhere in the Page or Post Editing Area or use the 'Columns' dropdown the TinyMCE WYSIWYG editor (a.k.a. content toolbar) to have WordPress add it for you.
4. Click the 'Save Changes' button.
Another two column layout example with different column proportions
1. In this example one of the columns will take up space three times the proportion of the first column.
  [one_fourth] Take up the room of one column [/one_fourth]
  [three_fourth_last] Take up the room of three columns [/three_fourth_last]
2. Add this shortcode anywhere in the Page or Post Editing Area or use the 'Columns' dropdown the TinyMCE WYSIWYG editor (a.k.a. content toolbar) to have WordPress add it for you.
3. Click the 'Save Changes' button.
TIP: There are many different column layouts you can achieve with this shortcode. Experiment and you will see there are plenty of possibilities.
Buttons Shortcode - top

Create a button using any of the 11 preset colors or set your own.
1. Use this shortcode on any Page or Post
2. Here is an example of a Gray button style:
  [button link="#ENTER-URL-HERE" color="gray"]Gray[/button]
3. Add this anywhere in the Page or Post Editing Area or use the 'Buttons' dropdown menu in the TinyMCE WYSIWYG editor (a.k.a. content toolbar) to have WordPress add it for you.
4. Click the 'Save Changes' button.
TIP: Choose from 11 different colors.
1. gray, light-gray, red, orange, blue, pink, green, rosy, brown, purple, and gold.
2. E.g.: To use the red color setting, construct your shortcode like so:
  [button link="#ENTER-URL-HERE" color="red"] Button Text Goes Here [/button]
  or use the TinyMCE WYSIWYG editor (a.k.a. content toolbar) to auto create buttons.
TIP: Use your own custom colors by altering the color attribute. Make sure to use a full 6 digit hexadecimal value including the # symbol.
1. [button link="#ENTER-URL-HERE" color="#FFFFFF #000000"]Black and White[/button]
  The code example above would create a white button with black text. You can also use the TinyMCE WYSIWYG editor (a.k.a. content toolbar) to create a custom colored button.
Food Menu Shortcode - top

To display your menu you must use the Menu Shortcode [foodmenu]. Add this to any page you wish to display the menu on.
1. Go to Pages > All Pages and edit an existing page, or create a new one from Pages > Add New that will be used for your Food Menu.
2. Add the shortcode [foodmenu] anywhere in the Page or Post Editing Area or use the 'Food Menu' icon in the TinyMCE WYSIWYG editor (a.k.a. content toolbar) to have WordPress add it for you.
3. Click the 'Save Changes' button.
Examples of ways to use the Food Menu Shortcode:
1. Display all Food Menu Groups and Food Menu Items + Show Titles and Show Subtitles, use:
  [foodmenu]
2. Display a couple of specific Food Menu Groups
  [foodmenu groups=breakfast,lunch]
3. Hide Food Menu Group Titles
  [foodmenu showtitles=0]
4. Hide Food Menu Subtitles (for subgroups / nested groups)
  [foodmenu showsubtitles=0]
5. Display 3 Groups and Hide both Titles and Subtitles
  [foodmenu groups=lunch-menu,dinner-menu,dinner-specials showtitles=0 showsubtitles=0]
TIP: If you specify individual Food Menu Groups as in the example above, they will appear in the order you input them. At any time you can change the order simply by rearranging the names in the shortcode.

TIP: The shortcode makes use of the food menu group slug, not the name itself, and slugs never contain any spaces as they determine the URL for the group. You can view the slug for each category in Food Menu > Menu Groups, on the right.
Google Map - top

Add a Google Map to your page or post.
1. To display a Google Map by address:
  [map addr="556 BEATTY STREET PALO ALTO, CA" width="668px" height="400px" zoom="16"]
2. Add anywhere in the Page or Post Editing Area or use the 'Map' button in the TinyMCE WYSIWYG editor (a.k.a. content toolbar) to have WordPress add it for you.
3. Click the 'Save Changes' button.
Images and Lightboxes top

Use the Image shortcode to display an image at any size you like, with an optional image lightbox.
1. Display an image with a lightbox using a 100px x 100px thumbnail.
  [image src="http://FULL-PATH-TO-IMAGE.jpg" width="100" height="100"]
2. You can use the 'align' attribute to choose whether you want your image to display left or right of the other content, or centered on the page
  [image src="http://FULL-PATH-TO-IMAGE.jpg" width="150" height="150" align="center"]
3. You can add the 'title' attribute to have a title appear above the image lightbox
  [image src="http://FULL-PATH-TO-IMAGE.jpg" width="350" height="120" align="left" title="Sample image"]
4. An example with lightbox disabled
  [image src="http://FULL-PATH-TO-IMAGE.jpg" width="500" height="300" align="right" lightbox="0"]
5. Use this shortcode in the Page or Post Editing Area or use the Image button on the TinyMCE WYSIWYG editor (a.k.a. content toolbar) to have WordPress add it for you.
6. Click the 'Save Changes' button.
Ruler top

Add a horizontal ruler
1. For a full width ruler with a top margin of 20px.
  [ruler top=20]
2. For a full width ruler with bottom margin of 30px
  [ruler bottom=30]
3. For a bottom margin of 20px, a top margin of 20px and side margins of 100px
  [ruler bottom=20 top=20 margins=100]
4. You can also use the Ruler button on the TinyMCE WYSIWYG editor (a.k.a. content toolbar) to have WordPress add a Ruler shortcode for you.
5. Click the 'Save Changes' button.
Slide Show top

Add an Image Slider (Slide Show) to a Page.
1. You control the Slider width and you can also make images link to pages. The Slider has 4 attributes: slider_width, slider_height, effect, and showtitle. Experiment with these to get the right cropping on your images.
2. For a Slider with one image that links to a page.
  [slideshow slider_width=668]
  http://FULL-PATH-TO-IMAGE.jpg, http://FULL-PATH-TO-LINK
  [/slideshow]
3. For a Slider with two images and no links.
  [slideshow slider_width=668]
  http://FULL-PATH-TO-IMAGE.jpg
  http://FULL-PATH-TO-IMAGE.jpg
  [/slideshow]
4. An example using all attributes
  [slideshow slider_height=200 slider_width=668 effect=slicedown showtitle=0]
  http://FULL-PATH-TO-IMAGE.jpg
  http://FULL-PATH-TO-IMAGE.jpg
  [/slideshow]
5. Effects: slicedown, sliceup, sliceupdown, fold, fade, boxrain, boxRandom (default is fade)
6. Titles are disabled by default. To enable them, include showtitle=1 in shortcode. The title is pulled from the image's Title property set under Media Library.
7. You can also use the Slide Show button on the toolbar to have WordPress add an Slide Show shortcode for you.
8. Click the 'Save Changes' button.
TIP: You can use a maximum of 1 Slider per Page. We do not recommend using the Slide Show shortcode on Posts.
Tabs top

Using tabbed content can make content easier to navigate and organize.
1. Use this shortcode to add a tabbed navigation inside any Page or Post Editing Area.
2. For a 3 tab area with sample content included.
  [tabwrap]
  [tab title="Tab 1"]Tab 1 content goes here.[/tab]
  [tab title="Tab 2"]Tab 2 content goes here.[/tab]
  [tab title="Tab 3"]Tab 3 content goes here.[/tab]
  [/tabwrap]
3. You can also use the Tab button on the TinyMCE WYSIWYG editor (a.k.a. content toolbar) to have WordPress add a sample Tab shortcode for you.
4. Click the 'Save Changes' button.
Toggles top

Use Toggles to organize content into expandable blocks.
1. Sample shortcode
  [toggle title="Click to Expand"]
  Sample content goes in here.
  [/toggle]
2. You can also use shortcode within the Toggle shortcode
  [toggle title="3 Columns"]
  [one_third] This is an example of a 3 column layout inside of a toggle.[/one_third]
  [one_third]This is an example of a 3 column layout inside of a toggle.[/one_third]
  [one_third_last]This is an example of a 3 column layout inside of a toggle.[/one_third_last]
  [/toggle]
3. Click the 'Save Changes' button.
Category Blog Feed top

Use the Blog Feed to display blog posts anywhere on the website.
1. Sample shortcode
  [blogfeed cat=3]
2. The 'cat' attribute is required and filters your posts by Category ID. You can include as many as you like separated by a comma, or use all to display all categories. By default, the shortcode will display the latest 3 posts. Use the 'max' attribute to define any other number of posts to display.
3. Sample with multiple categories
  [blogfeed cat=1,3 max=4]
4. Sample with all categories
  [blogfeed cat=all max=5]
5. You can also use the Blog Feed button on the TinyMCE WYSIWYG editor (a.k.a. content toolbar) to have WordPress add a sample blogfeed shortcode for you.
6. Click the 'Save Changes' button.

04 - Custom Sidebars - top

There are 3 sidebars included with Eatery. Drag and drop your widgets into any of the sidebars to choose where you would like your widget to show.

Above and Below Sidebar Navigation + Mobile Sidebar - top
1. Above Sidebar Navigation - Widgets added here will appear above navigation. Great for a text widget with your tag line or intro.
2. Below Sidebar Navigation - Widgets added here will appear below navigation. Great for Hours of operation, phone number, or address info (text centered widget).
3. Mobile Sidebar - Widgets added here will appear for mobile devices. Great for text or anything short and brief.
TIP: The mobile version of this theme will not show any sidebar widgets unless they are added to the Mobile Sidebar.

TIP: If you are using the Text widget check the 'Automatically add paragraphs' checkbox to ensure good line spacing.
Eatery comes with a custom Text Widget that makes centering text easy - top
1. Go to Apperance > Widgets then drag and drop the 'Text Centered' widget into one of the custom sidebars.
2. Enter your copy.
3. Check 'Automatically add paragraphs'
4. Click 'Save'
You can use the Links Widget to list Specials and Events in the sidebar. Here is how you do it. - top
1. Go to Links > Link Categories use the 'Add New Link Category' area to add a new Category. e.g.: 'Specials' or 'Events'
2. Click 'Add New Link Category'
3. Go to Links > Add New and create a new Link. e.g.: Name = '$5 Margaritas', Web Address = [http:// URL TO YOUR MENU, SPECIALS PAGE or EVENTS PAGE]
4. Check 'Specials' or 'Events' under Categories (or check the name of the Category you created in step #1.
5. Click 'Add Link' and repeat until you have all your specials / events added.
6. Go to Appearance > Widgets and drag / drop the 'Links' widget into one of the sidebars.
7. In the widget choose your category that should show up in the dropdown menu where it says 'All Links'.
8. Uncheck 'Show Link Image'.
9. Click Save.

05 - Custom Menus - top

There are 2 menus that should be created in order for Eatery to display links to your pages and blog posts.

Main Menu - top

Eatery makes use of the WordPress Menu System found under Appearance > Menus
1. Click on Appearance > Menus
2. If you do not have a Sidebar Menu setup, create one by entering 'Main Menu' in the space labelled 'Menu Name'
3. Click 'Create Menu' to save
4. Check 'Automatically add new top-level pages' if you would like WordPress to add pages to the side navigation menu as you create them.
5. Click 'Create Menu' to save
6. Select 'Main Menu' or if you have an existing menu make sure it is selected below the 'Sidebar Menu' label located under the 'Theme Locations' heading.
7. Click 'Create Menu' to save
8. Add Pages and Posts to your sidebar menu. See WordPress.org Codex for more details
TIP: You don't need to add a Mobile Menu however it's nice to have a shorter more condensed navigation for visitors using smartphones. We recommend adding a separate mobile menu with a minimal version of your Main Menu.
Mobile Menu - top

Adding a Mobile Menu is optional but recommended. If you do not add one the mobile menu will take from your Main Menu settings.
1. Click on Appearance > Menus
2. You will need to create a mobile menu by entering 'Mobile' in the space labelled 'Menu Name'
3. Click 'Create Menu' to save
4. Add links to your new mobile menu. Make sure the 'Mobile' tab is selected before adding links. See WordPress.org Codex for more details
TIP: Keep your Mobile Menu short and sweet. Remember that visitors using this menu will be on a smartphone so more than likely they won't be interested in every page on your site.

06 - Custom Page Templates - top

Use the reservation form to allow your visitors to quickly and easily request a reservation. If you would like something a little more fancy we recommend using the Gravity Forms Plugin

Reservation Form Template - top

Eatery comes with an easy to use reservation form. To use this form, create a page from Pages > Add New and use the "Reservations Page" from the template dropdown. The form will automatically display below your page content. The form includes jQuery validation to enhance the user experience and the recipient email can be configured in the theme options.
1. File Name: reservations-page.php
2. Location: /wp-content/themes/eatery
3. Set recipient email address under Appearance > Theme Options > General Options
Food Menu Item Custom Post Type Template - top

Eatery comes with a custom post type for the Food Menu. This page formats and displays Food Menu Items
1. File Name: single-food.php
2. Location: /wp-content/themes/eatery

07 - Child Themes - top

We highly recommend using our Theme Features to get the customized look your are seeking, however as a developer or designer you may want to create a child theme to satisfy your apetite for complete control. In this case, we recommend using our sample Child Theme.

Creating a Child Theme - top
1. Go to Appearance > Themes > and click on 'Activate' under the Eatery Child Theme.
2. Now you can add and fully customize your own PHP, CSS, JS, and other files under the themes/eatery-child/ folder.
3. To learn more about using a Child Theme please visit the WordPress.org Codex site.

08 - Theme Files - top

Cascading Style Sheets - top

All CSS (except style.css) is located under the css/ folder under the Eatery theme directory. There are also separate CSS files for each theme skin under their relative sub folders.
1. style.css - Core CSS styling for the Eatery Theme
2. css/1140-responsive.css - To enable responsive theme settings. You will find @media only screen settings in here.
3. css/1140.css - The responsive CSS framework
4. css/ie.css - Responsive CSS support for IE
5. nivo-slider.css - CSS for the Nivo Slider (Slide Show)
6. prettyPhoto.css - CSS for Image lightbox
7. shortcodes.css - CSS for all shortcodes
8. superfish-navbar.css - CSS for Menu Navigation - Dropdown and flyouts
9. superfish-vertical.css - CSS for Menu Navigation - Dropdown and flyouts
10. superfish.css - CSS for Menu Navigation - Dropdown and flyouts
JavaScript Files - top

JavaScript files are located under the js/ folder under the Eatery theme directory. There are 3 also located under the lib/ folder.
1. js/form-validation/jquery.metadata.js - jQuery reservation form validation
2. js/form-validation/jquery.validate.js - jQuery reservation form validation
3. js/nivo-slider/jquery.nivo.slider.js - Nivo Slider jQuery
4. js/nivo-slider/jquery.nivo.slider.load.js - Nivo Slider jQuery
5. js/prettyphoto/jquery.prettyPhoto.js - prettyPhoto Lightbox jQuery
6. js/prettyphoto/jquery.prettyPhoto.settings.js - prettyPhoto Lightbox jQuery
7. js/tinymce/tinymce_buttons.js - Custom Buttons for TiynMCE Toolbar
8. js/css3-mediaqueries.js - Responsive Design jQuery
9. js/jqsf.js - superfish navigation jQuery
10. js/jquery.toggle.js - toggle shortcode jQuery
11. js/mobile-menu.js - jQuery mobile menu
12. js/superfish.js - Superfish navigation jQuery
13. js/tabcontent.js - tabbed contact jQuery
PHP Files - top

Notes about the PHP files.
1. includes/timthumb.php - Optional image resizer
2. contact-page.php - Contact template file
3. header_generalOpt.php - Assists with general options
4. header_layoutOpt.php - Assists with layout options
5. header_typoOpt.php - Assists with typography options
6. nav.php - Mobile menu
7. reservations-page.php - Reservation template file
8. sidebar_socialOpt.php - Assists with social media options
9. sidebar_socialOpt.php - Assists with social media options
10. single-food.php - Custom Post Type Template for Food Menu Items
11. wp_mail.php - Used to send mail for the Reservation and Contact forms using the wp_mail() function
Photoshop Files - top

Eatery comes with a fully layered and well documented PSD file to help you easily customize and make use of our layered graphics.
1. Look inside the Eatery theme package under the /psd folder.
Stock Photos - top

Many of the stock photos that you see in our Live Preview are available for purchase on photodune.net.

Once again, thank you so much for purchasing this theme. As we said at the beginning, we will be happy to help if you have any questions relating to this theme. We welcome you to email us via our user page contact form here. We can't provide support for customization, but we'll do our absolute best to assist with anything related to the setup and usage. 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.

Themovation

Go To Table of Contents

“Eatery” Documentation by Themovation

Eatery v2.1

Table of Contents

01 - Getting Started - top

Installation - top

Permissions (optional)- top

Demo Content (optional)- top

Setting Default Homepage - top

02 - Theme Features - top

Header Image - top

Custom Logo - top

Skin Selection - top

Custom Colors - top

Background (Pattern or Full Image Background) - top

Homepage - top

Food Menu Groups (Menu Categories) - top

Food Menu Items - top

Events - top

Typography - top

Social Media Settings - top

Enable / Disable Responsive - top

Google Analytics Code - top

Custom CSS - top

Custom Footer Copy - top

03 - Theme Shortcodes - top

Typography Shortcode - top

Drop caps

Highlighting

Pull quotes

Column Shortcode - top

A two column example

Another two column layout example with different column proportions

Buttons Shortcode - top

Food Menu Shortcode - top

Google Map - top

Images and Lightboxes top

Ruler top

Slide Show top

Tabs top

Toggles top

Category Blog Feed top

04 - Custom Sidebars - top

Above and Below Sidebar Navigation + Mobile Sidebar - top

Eatery comes with a custom Text Widget that makes centering text easy - top

You can use the Links Widget to list Specials and Events in the sidebar. Here is how you do it. - top

05 - Custom Menus - top

Main Menu - top

Mobile Menu - top

06 - Custom Page Templates - top

Reservation Form Template - top

Food Menu Item Custom Post Type Template - top

07 - Child Themes - top

Creating a Child Theme - top

08 - Theme Files - top

Cascading Style Sheets - top

JavaScript Files - top

PHP Files - top

Photoshop Files - top

Stock Photos - top