Introduction

This documentation is last updated on 3 December 2015.

Thank you for purchasing FoodRecipe WordPress Theme . If you have any question that is beyond the scope of this documentation, Please feel free to create a support ticket using Our Support Site.

Disclaimer:
We offer limited support for theme customers. We only provide support for our themes and their core features. We cannot guarantee our themes will work properly with all third party plugins and server environments. If you plan on adding numerous plugins to this theme then please note, We cannot facilitate support for any conflicts that might arise with this theme's default functionality. The FoodRecipe WordPress theme is presented as it is.


Themeforest Item Purchase Code to Signup on Support Site

Please visit this knowledge base article to learn about how to get item purchase code from themeforest to signup on our support site.


Updating WordPress Theme

If this is a theme update and you want to apply it on your existing installation then please visit this knowledge base article to learn about a better way to update your theme


If you like this theme, Please support us by rating this theme with 5 stars (How to rate?)      

Install Theme

In start you must have a working version of WordPress already installed. For information in regard to installing the WordPress CMS, please see the WordPress Codex Installing WordPress

Once you have a working of version of WordPress, you need to download All Files and Documentation from themeforest and extract the downloaded zip to get various files including inspirythemes-food-recipes.zip.

Install Theme Via WordPress Dashboard

  1. Go to 'Appearance > Themes' section
  2. Click 'Add New' and select the 'Upload Theme' option
  3. Choose the inspirythemes-food-recipes.zip file and press 'Install Now'
  4. Once the theme is uploaded you need to activate it.

if you face any problem during upload through dashboard, please upload the theme using FTP as guided below.

Install Theme Via FTP

  1. Access your hosting server using an ftp client like FileZilla
  2. Go to the 'wp-content/themes' folder of your WordPress installation
  3. Upload 'inspirythemes-food-recipes' directory from downloaded package in 'wp-content/themes/'.
  4. Go to 'WordPress Dashboard > Appearance > Themes' section to activate the theme

Install Plugins

After you have installed and activated the theme, there'll be a list of required and recommended plugins at the top of the WordPress dashboard.



If you already hide it out, you can go to 'Appearance > Install Plugins' section instead.

So, you need to install and activate these plugins as demonstrated below.

Installing WP Post View, Display Tweets and WP Favorite Posts plugins are optional. WP Post View tracks the views of each recipe and display it at the end of rating box on single recipe page.

Option Tree plugin is mandatory. So, you must need to install and activate this plugin.

Install Child Theme

If you want to make modification in this theme then it is better to modify it in child theme only. This way you can easily update your parent theme whenever new update becomes available on themeforest. You can read more about child theme from here.

To install child theme, you need to upload the inspirythemes-food-recipes-child.zip and activate it in the same way as you uploaded and activated the parent theme's Food Recipes 1.5.zip.

Import XML for Demo Contents

Importing demo contents and making your site one step closer to the theme demo requires following steps.

  1. Importing XML file
  2. Configuring Menus

Look for Import XML folder in unzipped package downloaded from themeforest and use the XML within it.
Go to the WordPress Admin > Tools > Import and click WordPress as displayed in image below.



At 1st time you need to install WordPress importer plugin



Once installed you need to activate the plugin and run the importer.



Select the XML file from Import XML folder in unzipped package that you have downloaded from themeforest.



After importing XML file.

  1. Assign posts to an existing author.
  2. Mark the checkbox to download and import file attachments
  3. Click 'Submit' button



After that is done, you will have bunch of posts, pages, doctors, gallery items, services and other contents as on the theme demo.



Next step is to configure menu.

Configure Menus

Navigate to Appearance > Menus and use the Already Imported Menu from XML and assign it to theme location "Main Menu" from Menu Settings section below menu. After that save the menu. As pointed in screenshot below.





Create Home Page

In case of imported XML the home page is already created and you do not need to follow this section.

To set up the Home page you need to create a new page,

Go to Pages > Add New. You can give this page a title "Home" yet you do not need to include any contents for now.

Select the “Home Template” template from the Page Attributes section, as displayed in screenshot given below. Click “Publish” to make this page available for visitors.



Setting Up Main and Social Menu

The theme has two custom menu locations, one is main menu and other is social menu. You can assign each location a custom menu.

To setup your custom menus, navigate to Appearance > Menus. Give your menu a name and build it up. You can add a variety of items including pages, categories, custom links. Once you have built your menu, save it and assign it to a location.

Main Menu

Main Menu is intelligent menu. You can manage it by giving instruction and if it is getting wider than available space, it will automatically make a dropdown menu at the end for the rest of menus.

Social Menu

Social Menu is a class based menu. Enable Classes from screen options at the top right corner and give your every menu a class and add the related link for it.




Available Range of Classes are:

'facebook',
'twitter',
'rss',
'flickr',
'apple',
'bhance',
'dribbble',
'google',
'linkedin',
'pinterest',
'plus',
'sharethis',
'skype',
'stumbleupon',
'vimeo',
'wordpress',
'yahoo',
'youtube'

Create Home Page

In case of imported XML the home page is already created and you do not need to follow this section.

To set up the Home page you need to create a new page,

Go to Pages > Add New. You can give this page a title "Home" yet you do not need to include any contents for now.

Select the “Home Template” template from the Page Attributes section, as displayed in screenshot given below. Click “Publish” to make this page available for visitors.



Create Blog Page

In case of imported XML the blog page is already created and you do not need to follow this section.

To set up the Blog page you need to create a new page,

Go to Pages > Add New. You can give this page a title "Blog" yet you do not need to include any contents for now.

Select the “Default Template” template from the Page Attributes section, as displayed in screenshot given below and click “Publish”.



Configure Reading Settings

I am assuming that you have imported the XML successfully and you have home page and blog page available for use. If this is not the case then simply create a new page using Home Template and name it as Home after that create another page using default template and name it as Blog.

To configure reading settings you need to visit WordPress Admin > Settings > Reading and choose that front page displays as static page. Then select Home as Front Page and Blog as Posts Page. As, displayed in screenshot given below.



Logo, Favicon and Header Image

To configure homepage from theme options you have to click Appearance > Theme Options. Here you can see first tab Named Home Page on the left column and its options on right side. First Two options are given below.

  • Header Logo: Here you can upload a logo for your website. Food Recipes logo which you can see on demo site is 164px in width and 57px in height. It is batter that you put your logo near to these dimensions.
  • Favicon: Here you can upload a favicon for your website in PNG format. This will appear beside you title of the website in browser's title bar.
  • Header Image: Here you can upload header image for your website. Food Recipes header image which you can see on demo site has dimensions: 463 × 117. It is batter that you put your header image near to these dimensions. This image willbe override the image which you already uploaded through WordPres header tab under appearnce tab


Selecting and Setting Up Sliders

After Selecting Logo for the website and favicon, you can see an option for selecting slider type for your homepage. There are 5 types of sliders given in Food Recipes Theme. You can see setting up process for each slider in screenshots given below.

Recipe Post ID

For sliders you need recipe post id to attach slides/image with related recipe. So, this image below will guide you from where you can get Recipe ID to use it in sliders.



1) Setting Up Left Image Slider


2) Setting Up Basic Slider


3) Setting Up Nivo Slider


4) Setting Up Accordion Slider


5) Setting Up Thumbnail Slider


Add News Post

Go to WordPress Admin > Posts > Add New
  1. Provide the post title
  2. Enter the post contents if any and add MORE tag after few lines



  3. Provide the featured image. The image should have 575px minimum width and 262px minimum height.



  4. Publish the post once it is ready.

Add Recipes

Go to WordPress Admin > Recipes > Add New
  1. Provide the Recipe name



  2. Enter the text contents about Recipe



  3. Select or Add the Recipe Types



  4. Select or Add the Cuisines Types



  5. Select or Add the Courses Types



  6. Select or Add the Ingredients Types



  7. Select or Add the Skill level



  8. Provide the recipe related information in Recpie Information meta box



  9. Publish the recipe post once it is ready.

Add Recipes Listing Page

Go to WordPress Admin > Pages > Add New
  1. Provide the page title



  2. Select the appropriate page template for Recipes Listing.



  3. Publish the page once it is ready.
  4. After publishing you need to add the newly created page in menu from WordPress Admin > Appearance > Menus

Recipe Advance Search Page

In case of imported XML the Recipe Search Results page is already created and you do not need to follow this section.

To set up the Recipe Search Results page you need to create a new page,

Go to Pages > Add New. You can give this page a title "Recipe Search Results" yet you do not need to include any contents for now.

Select the “Advance Search Result” template from the Page Attributes section, as displayed in screenshot given below and click “Publish”.



Recipe Advance Search Configuration

This Search feature will only work with pretty permalinks (Post name). So, please change your permalinks setting before moving on this section.

To configure Recipe Advance Search from theme options you have to click Appearance > Theme Options. Here you can see first tab Named Home Page on the left column and its options on right side.

If you want to use Recipe advance search then select "show" form dropdown and then select Pages Checkbox for Advance Search on which you want to show advance search module.

Copy the URL of Property Search Page and use it. As displayed in screen shot below.









Add Submit Recipe Page

Go to WordPress Admin > Pages > Add New
  1. Provide the page title



  2. Enter some contents if you want.



  3. Select the appropriate page template for Contact US.



  4. Publish the page once it is ready.
  5. After publishing you need to add the newly created page in menu from WordPress Admin > Appearance > Menus
  6. Also make sure that you have allowed Membership from General Settings. So, that anyone can register and submit a recipe.



  7. Provide an email address in theme optoins. You will get notification about each submitted recipe on the given email address.



Add FAQs Page

Go to WordPress Admin > Pages > Add New
  1. Provide the page title



  2. Select the appropriate page template for FAQs page.



  3. Enter some text contents if you want.



  4. Publish the page once it is ready.
  5. After publishing you need to add the newly created page in menu from WordPress Admin > Appearance > Menus

User Listing Page

Go to WordPress Admin > Pages > Add New
  1. Provide the page title



  2. Select the appropriate page template for User listing page.



  3. Enter some text contents if you want.



  4. Publish the page once it is ready.
  5. After publishing you need to add the newly created page in menu from WordPress Admin > Appearance > Menus
  6. Here are some options to control the User Listing



  7. Here you can find the ID of User.



  8. Here is complete user's profile page.



Add User Profile Page

This page allow the user to modify it's profile information from front end.

Go to WordPress Admin > Pages > Add New
  1. Provide the page title



  2. Select the appropriate page template for Recipes Listing.



  3. Publish the page once it is ready.
  4. After publishing you need to add the newly created page in menu from WordPress Admin > Appearance > Menus

Add Contact Page

Go to WordPress Admin > Pages > Add New
  1. Provide the page title



  2. Select the appropriate page template for Contact US.



  3. Publish the page once it is ready.
  4. After publishing you need to add the newly created page in menu from WordPress Admin > Appearance > Menus
  5. Configure Contact Options

    Food Recipe Theme has a contact page template and few options in theme options panel to help you setup a contact page like the one you can see here.

    You can find your locations Latitude and Longitude from here.



  6. Configure Contact Sidebar Widget

    you can add simple text widgets in contact page sidebar to display your office address information as displayed in image below.



How to set up Custom jQuery Tabs Widget

This widget is for home page widgetized area and sidebars. You can make three tabs in it and select different types of listings for your recipes.



How to set up Custom Ads Widgets

There are two Custom Ad Widgets in this theme. One is for homepage and other one is for sidebar. Both can easily be identified by their names in widgets section. These widgets have specified the size of image and have link fields for image path URL and Target URL where you want user to go.

Custom Archive Widget

This widget is to display archive links in your sidebar or footer columns area. You can display archives Daily, Weekly, Monthly or yearly bases.



Recipe Types Widget

Recipe Types widget is to list all recipe types with links to their related archive pages.



News And Events Widget

News and Events Widget have latest posts from your blog. You can use this widget in sidebar, footer columns and also in homepage bottom area.



Weekly Special Recipe Widget

Weekly Special Recipe Widget have one special recipe to show. You can use this widget in sidebar, footer columns and homepage bottom area. To select that specific recipe you have to click on "Weekly Special Recipe" Dropdown and then select weekly special recipe from the given list.



Twitter Widget

Note: Custom Twitter Widget has been removed from this version.

To display tweets you have to install 'Display Tweets' Plugin. You can specify twitter ID and number of tweets to show from settings page of this plugin. You need four other fields to make your twitter widget work with twitter API. Fields are consumer Key, consumer Secret, Access Token, Access Token Secret.



How to Get Your Twitter Consumer Keys and Access Tokens
  1. Sign In to the Twitter Developers section. If you do not already have an account, you can login with your normal Twitter credentials
  2. Got to My Applications page.
  3. Click Create a New ApplicationButton and it will take you to Create an Application form page.
  4. Provide your website name, description and URL, Agree with contract and provide CAPTCHA and press Create your Twitter Application button.
  5. Details of your new twitter application will be shown along with your consumer key and consumer secret.
  6. But, you also need to create access tokens and for that you need to click on Create my access token button.
  7. The page will then refresh on the "Details" tab with your new access tokens. (if you are not able to view these first time, click on details tab and access tokens should appear after page refresh) You can recreate these at any time if you need to.
  8. Now use these consumer key, consumer secret, access token and access token secret in twitter widget back end. As, displayed in left screenshot.

Recent Recipes Widget

Recent Recipes Widget shows latest recipes from your recipe post type. You can select number of items to show from this widget options.



Recipe Slider Widget

There are two slider widgets for sidebar. You can choose between them to slide your recipes by recipe type or by cuisine.



Columns

Columns shortcode is easy way to make columns in your page or post. All short codes related to columns and usage of these codes is mentioned below:

                          [columns] <===== You should wrap all columns in it.
                            [two_column][/two_column]
                            [one_third][/one_third]
                            [two_third][/two_third]
                            [one_fourth][/one_fourth]
                            [three_fourth][/three_fourth]
                          [/columns]
                        

Usage

Output Example

jQuery Accordion

                            [accordion]

                                [accor_block active=true title="First Accordion Item"]Some Contents[/accor_block]
                                [accor_block title="Second Accordion Item"]Some Contents[/accor_block]
                                [accor_block title="Third Accordion Item"]Some Contents[/accor_block]

                            [/accordion]
                        

Usage

Output Example

jQuery Toggle

                            [toggle]

                                [toggle_block title="Your Toggle Title"]Toggle Contents[/toggle_block]

                            [/toggle]
                        

Usage

Output Example

jQuery Tabs

                            [tabs titles="First Tab, Second Tab, Third Tab"]

                                [tab_block] First Tab Contents [/tab_block]
                                [tab_block] Second Tab Contents [/tab_block]
                                [tab_block] Third Tab Contents [/tab_block]

                            [/tabs]
                        

Usage

Output Example

Buttons

                          [button link="http://www.google.com" target="_blank"]This is simple button[/button]
                        

Usage

Output Example

List Types

                            [list type="checked"]
                                your list item
                                your list item
                                your list item
                                your list item
                            [/list]
                        

Available types are: "checked", "arrow", "arrow2", "arrow3"

Usage

Output Example

Message Boxes

                            [note]Your Note Message Her[/note]
                            [note type="error"]Your Note Message Her[/note]
                            [note type="hint"]Your Note Message Her[/note]
                            [note type="alert"]Your Note Message Her[/note]
                            [note type="note"]Your Note Message Here[/note]
                        

Usage

Output Example

Special Headings

                            [red_heading]Red Heading[/red_heading]
                            [blue_heading]Blue Heading[/blue_heading]
                            [red_heading border="true"]Red Heading[/red_heading]
                            [blue_heading border="true"]Blue Heading with Border[/blue_heading]
                        

Usage

Output Example

Blockquote

                           [blockquote width="290" align="left"]Your quote here[/blockquote]
                        

Usage

Output Example

Custom Menus

                           [menu]
                                your menu list item
                                your menu list item
                                your menu list item
                                your menu list item
                                your menu list item
                            [/menu]
                        

Usage

Output Example

Step Headings

                        [step_head]Step 01[/step_head]
                        [step_head]Step 02[/step_head]
                        

Usage

Horizontal Line

                        [hline_fat]
                        

Usage

FAQ List

                                [faq_wrapper]

                                    [faq_item title="Maple and a layer of nuts in this buttery dessert makes Christmas oh so special!"]
                                            Put Your Answer Here.!
                                    [/faq_item]

                                    [faq_item title="Maple and a layer of nuts in this buttery dessert makes Christmas oh so special!"]
                                            Put Your Answer Here.!
                                    [/faq_item]

                                [/faq_wrapper]
                        

Usage

Output Example

Ingredients

                          			[ingredients]
	                                [ingredients title="My Heading"]
                        

Usage

Output Example

Method

                                [method]

                                [method title="My Heading"]
                        

Usage

Output Example

Shortcodes

1st List Style

Shortcode Example

Output Example



2nd List Style

Shortcode Example

Output Example



3rd List Style

Shortcode Example

Output Example



Buttons

Shortcode Example

Output Example



Messages

Shortcode Example

Output Example




Tabs

Shortcode Example

Output Example




Accordions

Shortcode Example

Output Example




Toggles

Shortcode Example

Output Example



How to Modify Styles

There are various options available to modify styles in this theme.
  1. Google Fonts - Go to 'Theme Options > Styling' for different Google Fonts.
    1. Chooe the font from select box. AS shown below



    2. You can add multiple fonts by clicking on 'Add Google Font', as show below



  2. Now save the options. Please note that if you didn't save the option then you can't get the font for body and hedaing styles.So, you have to save them before moving on.

  3. Now you can select fonts, colors, font-size, font-weight etc.. for your body and heading styles. Here is a complete procedure.



  4. Quick CSS - Go to 'Theme Options > Styling > Quick CSS' to write some short css.
  5. Custom CSS in Child Theme - 'style.css' file is provided in child theme to add major css changes.

  6. Custom CSS in Parent Theme - if you are not using child theme then 'css/style.css' file is provided in parent theme to add major css changes.

How to Modify Theme Options

This theme uses Option Tree for theme options and related file reside in theme-options.php'



So, you can easily modify the code of existing Theme Options. Or you can add new Theme Options using option_tree_settings_args filter in child theme.

How to Modify Meta Boxes

This theme uses Meta Box Plugin for meta boxes and related file reside in 'meta-box > config-meta-boxes.php'



So, you can easily modify the code of existing meta boxes. Or you can add new meta boxes using framework_theme_meta filter in child theme.