© Arrowhitech JSC 2016.

Overview

Foodfarm Documentation v1.0

ArrowHiTech Jsc Is one of the Vietnamese leading IT outsourcing companies which puts high-quality services and customer’s satisfaction our top priorities. Since our establishment in 2007, we have increasingly widened our skills and our HR so as to meet all the demands of the customer all over the world with our dedicated services focusing on Web design & development, Extension/ Theme building, Mobile applications/ Games development and Internet marketing.

Version: 1.5.1
Author: ArrowHiTech.
Designed by: ArrowHiTech


Install WordPress

If you haven't have a working version of WordPress, you need to install it first in order to install Foodfarm theme. You can find many instructions to install WordPress in WordPress Codex or the Instructional Video created by Woo Themes. Below are some helpful links for you about WordPress information.



1. Install Theme

1.1 Installation

- Requirements for Theme

You can click here to find out more about requirements of WordPress.

Below are three requirements for working version of WordPress, php, and mysql.

You also need to make sure that your host can comply with follow requirements. We recommend using WP Engine or Blue Host for all your hosting needs.

  1. Your web host has the minimum requirements to run WordPress.
  2. Your host are running the latest version of WordPress.
  3. You can download the latest release of WordPress from official WordPress website.
  4. Always create secure passwords for FTP and Database.

- Recommended PHP Configuration Limits

Low PHP configuration limits can cause many issues. When related issues occur, you need increase your PHP limits to a minimum as follows:



1.2 Theme Installation

- Install new theme manually via FTP Client

In order to add a new theme to your WordPress installation, pleae follow these basic steps:

  1. Download the zip package of Foodfarm theme in ThemeForest
  2. Unzip Foodfarm.zip package which you can find inside Theme files folder.
  3. Connect to your FTP server and navigate to the WordPress installation folder.
  4. Go to wp-content/themes/ and upload Foodfarm folder.
  5. Open WordPress admin panel (navigate through web browser to the folder where you have installed the WordPress e.g www.your_domain.com/wp-admin/) and go Appearance > Themes on admin sidebar. Activate Foodfarm theme.


- Install Theme via WordPress Admin Panel
  1. Open WordPress admin panel (e.g www.your_domain.com/wp-admin/) and go Appearance > Themes on admin sidebar and click "Add New" button.


  2. After that, click Upload Theme link and upload zip package of Foodfarm theme.


  3. Once uploading theme is finished, it will install theme automatically.

    You can click Activate link or go to Appearance > Themes on admin sidebar to activate theme.

Once theme is installed, you need to install Required Plugins to get full working features.



1.3 Plugins Installation

- First method

Install plugins via "Begin installing plguins" message.

After installing and activating the theme you will see the message about installing required plugins at the top of the page.

You should click Begin Installing plugins link in order to install needed plugins for Foodfarm theme.

You will be redirected to Install Required Plugins page, here you will find all of the theme required plugins. In order to install these plugins, you just need to check all of them and select install then click apply.

- Below are list of required plugins for Foodfarm.

- Second method

Install plugins via WordPress Admin Panel.

Besides, you can install some plugins for Foodfarm by navigating Plugins > Add New in admin sidebar. After that, enter plugin name to search plugin and click "Install Now".

When installation process is done, you can click Return to Required Plugins Installer and select active then check all plugins to active these plugin.

- Third method

Install plugins manually (Via FTP)

If you want to manually install plugins, you can follow some basic steps below.

  1. Download your WordPress Plugin to your desktop and extract plugin folder if it is a zip archive.
  2. With your FTP program, upload the Plugin folder to the wp-content/plugins folder in your WordPress directory online.
  3. Go to Appearance > Plugins and find the newly uploaded Plugin in the list.
  4. Click Activate to activate it.

After finishing plugin install, you need to configure the plugins.



1.4 Plugin Configuration

Visual Composer for WordPress is drag and drop frontend and backend page builder plugin that will save you tons of time working on the site content. You will be able to take full control over your WordPress site, build any layout you can imagine – no programming knowledge required. Moreover, now you can choose either work on a backend or move your page building process to frontend and instantly see changes you make.

You can see here for more details.

After installing the Visual Composer, please go to Visual Composer > Role Manager. In the post types field, you should select Custom and check 'post' and 'page' checkbox . After making the changes, remember to click Save Changes button.


Navigate to Settings > Foodfarm Latest Tweets to access "Twitter API Authentication Settings" page. You need to enter Consumer Key, Consumer Secret, Access token and Access Secret and twitter username in order to get posts from your twitter account.

In order to get Twitter Access keys, you need to create Twitter Application:

  1. Go to https://dev.twitter.com/apps/new and log in, if necessary.

  2. Supply the necessary required fields, accept the Terms Of Service, and solve the CAPTCHA. Submit the form by clicking the Create your Twitter Application.

  3. Go to the API Keys tab and copy the consumer key (API key) and consumer secret from the screen into our application.


Navigate to Settings > Instagram Settings to access "Instagram Settings" page. You need to enter Access token and User ID of your instagram account in order to get images. Remeber to click Save Changes to save information.

Go to MailChimp for WP > MailChimp to access general setting page of MailChimp. You should connect to your mailchimp account by entering API Key.


Also, in order to make MailChimp Form work effectively, you should navigate to MailChimp for WP > Forms in admin sidebar and click Save Changes.

For detail instruction, please click MailChimp for WP.


Go to WP Knowledgebase > Settings to access general setting page. You should click Save changes for WP Knowledgebase works effectively.


For detail instruction, please click this link WP Knowledgebase.


Once Required Plugins are configured, you may be interested to install sample content as our demo sites. In the next section, we will guide you about demo installation.



1.5 Demo Installation

- First Method

Install demos via Foodfarm option.

The First, You must active plugin ArrowPress Importer

With Foodfarm theme, you will be able to import several demos seperately. Foodfarm contains 22 awesome demos for you to choose. Let select which one you like and click install to start import process.

Before installing demos, remember to check all PHP configuration to ensure your server meets all requirements for a successful import. Please read Install Theme > Installation for all requirements.


In order to import demo, you must import dummy content. After import dummy content successfully, you can choose which demo version you want and click Import Content as normally.


After that, click button Import Content


After import demo finish successfully, if revolution slider not showing. Please select slider in sidebar when edit page

Note: If this method don't work with your server, you can try import all demos by second method.


- Second Method

Install demo via All-in-One WP Migration plugins.

Remember that your site database will reset entirely after using this method.

Please follow steps lised below to import demo.

- Step 1: Install and activate All-in-One WP Migration plugin to use this method.

- Step 2: Download Demo backup file (version 1.4.0).

- Step 3: Upload backup file to wp-content/ai1wm-backups folder.

- Step 4: Navigate to All-in-One WP Migration > Backups on admin sidebar

.

- Step 5: Click Restore button and wait for few seconds. You will see success message after click continue.

- Step 6: Login to the site with account: Username: admin, Password: admin. After login with this account, you can change username and password back to your credentials.

- Third Method

Import demo data manually.

Note: Please remember to install all needed plugins before import demo data. If you have not install plugins, please see Plugins Installation to finish that step.

2. Build Your Site

2.1 Build Your Site

Please read carefully Theme Installation / Plugin Configuration before perform these follow configurations.

2.2 WP Configuration

- WordPress Configuration

You can adjust WordPress settings as follows:

General Setting

You can set Site Title in Settings > General in admin sidebar.


Settings Reading

In Settings > Reading page, You can set number of posts to show in blog pages and select page for Front Page and Posts Page .


Discussion settings

Discussion settings in Settings > Discussion provide a lot of options for you to explore such as "Default article settings", "Other comment settings". Also, you should choose 3 levels deep for nested comment display effectively.


Permalinks Settings

You should ensure that a non-default permalink setting is selected, e.g. Month and name in Settings > Permalinks.

2.3 Theme Options

As you can see in the screenshot below, Foodfarm provides several usefull options for you to explore. You can find all options after clicking Foodfarm link in the top page or in the admin sidebar.


You can see Theme Options for more details.

2.4 Menu Setup

- Create New Menu

In order create new menu, you can navigate to Appearance > Menus in admin sidebar then click Create a new menu link. Give your new menu a name and click "Create Menu" button.

You can add new menu item by dragging item you prefer from the column on the left.


If you want to enable mega menu for your menu item, you should check "Mega Menu" box and choose number of columns to display.

After that, remember to assign theme location for your new menu.

2.5 Header Setup

Go to Foodfarm > Header in order to access header setup page.

General, Foodfarm supports 3 types of header with other options for contact information, mini cart, search and enable sticky menu. You can see screenshot below for detail.


To find out more about these options, you can go to Theme Options > Header.



3. Theme Options

Foodfarm provides many options for you to customize your page effectively. These options are organized into logical tabbed sections which will be very easy for you to navigate. Because of the sizable amount of options, we cannot go over them in full detail here in our documentation. We encourage you to please take some time and navigate through each tab to see what we offer. See below for screenshots and short descriptions of Foodfarm Options panel.

- There are 2 ways to access theme options.

1) Click Foodfarm links in the top of page.

2) Click Foodfarm in admin sidebar.


- After that, you will see a logical tabbed sections including a lot of tabs for you to discover. Below sections will go through each tab in detail for you.

3.1 General

- In this tab, you will see options for layout, sidebar, breadcrumb,logo icon, favicon and options for 404 page. Specifically, there are 2 possible sidebar position for you to select either left or right or event you can choose to hide your sidebar. For logo customization, you can freely to upload your desired logo image. Additonally,you can change background image and logo image in 404 page to what you want. Below will be a screenshot about these options.


3.2 Skin

There are 6 sub-tabs:

  1. General: After navigating to this sub-tab, you will see some options for you to set background color or background image, primary color and highlight color for hover and active links. Furthermore, general font for your website is customizable with several google font family available as well as font weight, font style, font size and line height.


  2. Header: Foodfarm allows you to set background color for header.


  3. Footer: You also can change background color for footer. Furthermore, you also can upload background image for footer left box.


  4. Breadcrumbs: Foodfarm provides option for you to modify background image.


  5. Typography: Foodfarm provides several choices to modify color as well as font family and font size of h1, h2, h3, h4, h5 and h6 font.


  6. Custom: this tab allows you to enter your custom css code.



3.3 Header

These options enable you to change header appearance with 3 types of header. Besides, there are existing selection for you to decide whether or not to display search form, mini cart and contact information in header. Also, Foodfarm provides option to show currencies switcher and languages switcher.


Specifically, for only header type 3, you will see other options for hide/show header toplink and vertical menu.


3.4 Footer

- Foodfarm supports 3 footer types for you to select. In addition, Foodfarm allows you to customize logo image in footer, copyright text. Furthermore, you also can choose to display payment information in footer. You can enter your link for paypal, visa, master card, discover and amex.


3.5 Blog & Single Post

Foodfarm gives you multiple selections for blog page.

For blog layout default, You can change sidebar positions (Left, right) with wide or fullwidth layout. Also, Foodfarm allows you to choose sidebar content and blog excerpt length. Furthermore, changing page title is also enable for you.



3.6 Gallery

These options not only let you select layout and sidebar position but also allow you to choose gallery columns, gallery page layout ( either grid or mansory) and pagination type.


3.6 Recipes, Press media

- Recipes

The same as blog page, this tab also let you to customize page layout, sidebar and page title.


- Press media


3.7 Shop

- Product listing page

Beside some options for layout, Foodfarm allows you to change number of products to display per page, number of product columns. Additonally, options for display quickview, wishlist, compare button are also available. You also can hide/show "Hot", "New", "Sale"label and discount percentage.

- Single product

For single product page, you also can customize page layout as well as sidebar position. Furthermore, you can choose to display related products, Mail to Friend block, share product links and limit number of related product shown. In additionally, you can freely to upload advertisement image to show in the bottom of page.

Please look at sceenshot below to see clearly about these available options.


3.8 Under construction

This tab provides options for your comming soon page when your site on maintainance mode.

Look at sceenshot below, you can see that there are several useful options for background image, content customization, display countdown timer and subcribe form.



4. Content Types

To use Foodfarm content type, please ensure that Foodfarm Post Types plugin, which allows you to create some custom post types, is already installed. If not, you can install this by following some steps below.

4.1 Post

- Creating / Editing Posts

Step 1 - Navigate to Posts in your WordPress admin sidebar.

Step 2 - Click on the Add New option to make a new post. Create a title, and insert your post content in the editing field.


Step 3 - Add Categories from the right side. To assign it to the post, check the box next to the category name.


Step 4 - Add Tags from the right side. Type the name of the tag in the field, separate multiple tags with commas.


Step 5 - Add Featured Image for your post. In order to add featured image for your post, click the first Featured Image Box, select an image and click the Set Featured Image button.

Step 6 - Check "Feature" box if your post is featured post.

Step 7 - Once you are finished, click Publish or Update in the right side to save the post.


4.2 Members

- Creating / Editing Members


Step 1 - Navigate to Members in your WordPress admin sidebar.

Step 2 - Click on the Add New option to make a new member. Enter member name in title field.

Step 3 - Click the first Featured Image Box, select an image and click the Set Featured Image button.

Step 4 - Add additional information for member including facebook link, twitter and google link.

Step 5 - Once you are finished, click Publish or Update to save the member.


4.3 Recipes

- Creating / Editing recipe

Step 1 - Navigate to Recipes in your WordPress admin sidebar. Click on the Add New option to make a new recipe post.

Step 2 - Enter a title, and insert recipe steps in the editing field.


Step 3 - Add description, ingredient and preparation information such as preparation time, cook time, ready time and servings number.

Step 4 - Add cook's note and editor's note.

Step 5 - Add Categories from the right side. To assign it to the post, check the box next to the category name.


Step 6 - Add Tags from the right side. Type the name of the tag in the field, separate multiple tags with commas.


Step 7 - Add Featured Image for your post. In order to add featured image for your post, click the first Featured Image Box, select an image and click the Set Featured Image button.

Step 8 - If you want different layout for your post, you can modify several options for layout in layout options box.

Step 9 - Once you are finished, click Publish or Update in the right side to save the post.


4.4 Knowledgebase

- Creating / Editing knowledgebase

If you don't see this post type, you should install WP Knowledgebase plugin in order to continue create new article.

Step 1 - Navigate to Knowledgebase in your WordPress admin sidebar. Click New Article to make a new post.

Step 2 - Enter title, and insert your post content in the editing field.


Step 3 - Add Categories from the right side. To assign it to the post, check the box next to the category name.

Step 4 - Add Tags from the right side. Type the name of the tag in the field, separate multiple tags with commas.

Step 5 - Add Featured Image for your post. In order to add featured image for your post, click the first Featured Image Box, select an image and click the Set Featured Image button.

Step 6 - Add releated post from related post box in the right side.

Step 7 - Once you are finished, click Publish or Update in the right side to save the post.


4.5 Press Media

- Creating / Editing

Step 1 - Navigate to Press Media in your WordPress admin sidebar. Click Add New to make a new post.

Step 2 - Enter title, and insert your post content in the editing field.

Step 3 - Add Categories from the right side. To assign it to the post, check the box next to the category name.

Step 4 - Add Featured Image for your post. In order to add featured image for your post, click the first Featured Image Box, select an image and click the Set Featured Image button.

Step 5 - Add press media information


Step 6 - Once you are finished, click Publish or Update in the right side to save the post.


4.6 Gallery

- Creating / Editing gallery

In order to add or edit gallery content, you can follow these basic steps below.

Step 1 - Navigate to Gallery in your WordPress admin sidebar. Click Add new if you want to create new gallery, otherwise, click Gallery and select post if you want to edit existing post.

Step 2 - Enter title, and insert your post content in the editing field.

Step 3 - Add Categories from the right side. To assign it to the post, check the box next to the category name.

Step 4 - Add Featured Image for your post. In order to add featured image for your post, click the first Featured Image Box, select an image and click the Set Featured Image button.

Step 5 - Once you are finished, click Publish or Update in the right side to save the post.


4.7 Static Block

Visual Composer is enable for this content type. In order to add or edit static block content, you can follow these basic steps below.

Step 1 - Navigate to Static Block in your WordPress admin sidebar. Click Add new if you want to create new, otherwise, click Static Block and select post if you want to edit.

Step 2 - Enter title, and insert your post content in the editing field. You can click to Backend editor to use several shortcodes to static block content.

Step 3 - Once you are finished, click Publish or Update in the right side to save changes.



5. Shortcode

Remember to install and activate Foodfarm Shortcodes plugin.

In order to add shortcodes using visual composer, you should enable visual composer editor and select the element you want to add. If you click the following button, will be show the popup.



There are several content elements for you to choose. Specifically, Foodfarm enable user to use Utimate VC Addons with several effective shortcodes.

- Screenshot of all elements in Foodfarm


- Screenshot of available shortcodes in Utimate VC addons


- Foodfarm shortcodes

In total, Foodfarm provides 15 effective shortcodes for you. Besides some general settings for extra class, each shortcodes will contain their own options. Below will list detaily all available choices of each shortcodes.

5.1 Foodfarm Top Rate Product

This shortcode will help you to display top rated products into beautiful grid. It supports option for enter number of product to display. For layout option, you can choose number of items to display in desktop, tablet, mobile and small mobile. In default, there are 6 items, 4 items, 2 items and 1 item displayed on desktop, tablet, mobile and small mobile respectively.

List of options available in Foodfarm Top Rate Product.

- Set total number of posts to display.

- Enter product numbers to show in desktop, tablets and mobile.

- Add extra class name


5.2 Foodfarm Bestseller Product

It allows you to display grid of best seller products. List of options available in Foodfarm Bestseller Product.

- Enter number of items to display.

- Select column number to show in desktop, tablets, mobile and small mobile for block responsive.

5.3 Foodfarm Featured Product

This shortcode helps you to display featured products with limited number of items. After add this shortcode, you will see list of options which are the same as Foodfarm Bestseller Product shortcode.


5.4 Foodfarm Recent Product

Like above shortcodes, this shortcode also allow you to show limited number of recent products.


5.5 Foodfarm Sale Product

This shortcode provides options for you to display sale products into grid.


5.6 Foodfarm Product Category

Same as above shortcodes, this shortcode also allow you to change number of items to show in different devices. Furthermore, this shortcode have their own options such as adding title, selecting order ways and category.

List of options available.


5.7 Foodfarm Static Block

This shortcode will generate all post of "static block" content type for you to select. Specifically, it provides a dropdown containing name of all published static blocks for you to select.


5.8 Foodfarm Container

This shortcode helps you to wrap all the content inside into a container class. After add this shortcode to your content, you can add another shortcode placed inside Foodfarm Container by click "plus" button.


5.9 Foodfarm Brands

This shortcode will help you to display brand images into slider. Beside some options for changing number of items in different devices and limiting number of items, there are a option for you to change image color to white.

5.10 Foodfarm Our Team

List of options available in Foodfarm our team shortcode.

- Enter block title.

- Enter number of posts to display.

- Select number of items to show on desktop, tablet and mobile.


5.11 Foodfarm Products

This shortcode will present product items into slider with existing choices for displaying number of items. Below will list all available options in this shortcode.

- Enter number of posts to display.

- Select product types to show.

- Select number of items to show on desktop, tablet and mobile.


5.12 Foodfarm Product Filter

This shortcode lets you to display latest products based on category name.

Options are available in Product Filter shortcode

- Enter shortcode title.

- Enter number of items to display.


5.13 Foodfarm Gallery

List of options available:

- Enter block title.

- Enter number of posts to display.

- Select number of columns

- Hide/show "View more" button.

- Set item delay for appearance animation.


5.14 Foodfarm Recipes

There are 2 setting tabs for this shortcodes: General or data. General tab contains a lot of options for choosing layouts, number of recipes to show and adding title , moreover, the data tab will let you select data type to display.

- General tab:

In this tab, you also can filter recipes based on category IDs. You can find category ID by navigating Recipes > Categories. Select category you prefer and click edit. In the navigation path of broswer, you will see category ID as "tag_ID".

- Data tab:

You can select either recent recipes or most viewed recipes to show.


5.15 Foodfarm Blog

The same as Recipes shortcode, Foodfarm Blog shortcode also supports 2 setting tabs named General and Data.

General Tab:

The first tab of this shortcode includes options for title, items limit, layout and category filter. Furthermore, this tab provides selection for displaying sticky post.


Data Tab:

There are 3 data types for you to select: recent, featured and most viewed



6. Widgets

6.1 Foodfarm Recent Recipes


6.2 Foodfarm Recipe Categories

This widget organizes category information into a list with category name and post count. It allows you to customize widget title.


Below is screenshot of category widget appearance.

6.3 Foodfarm Product Widget

This widget lets you to make change of block title to whatever you want and modify number of products to display. Also, you can select type of product including recent product, related, featured, top rated, and best seller product.


6.4 Foodfarm Latest Tweets

Note: Remember to activate Foodfarm Latest Tweets plugin to use this widget.

This widget will get latest tweets in your twitter account follow Twitter API setting. If you haven't enter API information, please see Plugin Configuration > Foodfarm Latest Tweets and follow instructions. Foodfarm Latest Tweets lets you change block title to whatever you want. In addition, you will be able to decide number of tweets to display.

- Foodfarm latest tweets widget settings


6.5 Foodfarm Instagram Feed

Note: if you do not see this widget in Appearance > Widget , please navigate to Plugins and activate Foodfarm Instagram Feed plugin.

This widget will display images from your instagram account. If you haven't set Instagram API information, please see Plugin Configuration > Foodfarm Latest Tweets and follow instructions. The same as latest tweets widget, you also can add widget title and set number of photos to display.

- Foodfarm Instagram Feed options


6.6 Foodfarm Ajax Reset Filter

This widget will display current filter in the sidebar if filter options are available. Like other widget, you can change widget title and you also can modify button label for this widget.



7. Translation

Use WPML

WPML is the most popular plugin for multi language support. Below you will find documentation their team created for using WPML plugin. If you've purchased WPML and have any questions or issues, please check the links below.




8. Site Speed Up

We recommend using the WP Super Cache, W3 Total Cache plugins.