< to download and install the latest version of Wordpress.
## WordPress Information
To install this theme you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions in [WordPress Codex](http://codex.wordpress.org/Installing_WordPress). Below are all the useful links for WordPress information.
- [WordPress Codex](http://codex.wordpress.org/Installing_WordPress) – General info about WordPress and how to install on your server.
- [First Steps With WordPress](http://codex.wordpress.org/First_Steps_With_WordPress) – General info about multiple topics about WordPress.
- [FAQ New To WordPress](http://codex.wordpress.org/FAQ_New_To_WordPress) – The most popular FAQ’s regarding WordPress.
## Licensing Plugins
There are two licensing plugins used in the theme: **Visual Composer** and **Revolution Slider**, we purchased them from codecanyone.net and included them in the theme package. We are not allowed to include the license key for each of them. If there is any update, we are accountable for updating the theme with the newest version of plugins.
In fact, the license key will not help you anything even updating plugins to the newest version. Only direct buyers can do this. Because we provide those with the themes; therefore, we will take care of updating them for our customers. Just take a look at the link by the author of plugins to see more. http://www.themepunch.com/faq/how-to-update-the-slider/ We will keep the plugins up - to - date.
## Files included in the package
When you purchase our theme from ThemeForest, you need to download the theme package from your themeforest account. Navigate to your downloads tab on ThemeForest and find GardenHub. Click the download button to see the two options. The **All files & documentation** contain everything, the **Installable WordPress** Theme is just the installable WordPress theme file. Below is a full list of everything that is included when you download the main files, along with a brief description of each item.
- `gardenhub.zip`: main theme file that need to be uploaded to host to install GardenHub theme.
- `gardenhub-child.zip`: basic child theme of GardenHub theme. It is created for people who want to customize code of the GardenHub theme.
- `Demo Data`: this folder contains demo data.
- `widgets.wie`: this file contains all widgets which are exported from our demo.
- `demo-content.xml`: this file contains all sample content which will help you to have a first look of how we use GardenHub theme.
- customizer.dat: theme option backup file.
- Sliders: this folder contains sliders which are exported from our demo.
- `Documentation`: documentation folder that contains documentation files.
Getting Started
===============
## Installation
### Step 1 - Install theme
After you download the package from ThemeForest, please unzip it. You'll see a file called `gardenhub.zip`, which is the main file needed to upload and install.
You can either choose to upload and installl the theme using **WordPress theme install** or use **FTP** function.
**Install theme using WordPress install function**
- Go to `Appearance > Themes` and click **Add New**
- Select **Upload**
- Click **Browse** and select the `gardenhub.zip` file
- Click **Install Now**
- When upload and installation progresses are completed, click **Activate**, or go to `Appearance > Themes` and activate the **GardenHub** theme
**Upload and install using FTP**
If you get any fail when install theme by Wordpress install function, we recommend to use FTP:
- Unzip the `gardenhub.zip` file, you'll get a folder `gardenhub`
- Use a FTP client like [FileZilla](http://filezilla-project.org/) and upload that folder to `wp-content/themes` folder on your host
- Go to `Appearance > Themes` and activate the **GardenHub** theme
### Step 2 - Install plugins
After installing the GardenHub theme, you'll see a notification in the top of the page that says the theme needs some plugins to function properly.
The GardenHub theme **requires** following plugins:
- GardenHub Visual Composer Addons: extra elements for Visual Composer. It was built for GardenHub theme.
- [Meta Box](https://wordpress.org/plugins/meta-box/): plugin for creating meta boxes for posts, pages,... It is free and available on WordPress.org
- [Kirki](https://wordpress.org/plugins/kirki/): is a Toolkit allowing WordPress developers to use the Customizer and take advantage of its advanced features and flexibility by abstracting the code and making it easier for everyone to create beautiful and meaningful user experiences.
- [WPBakery Visual Composer](http://vc.wpbakery.com/): it is Drag and Drop Frontend and Backend Pagebuilder Plugin for Wordpress.
- [Revolution Slider](http://revolution.themepunch.com/): is an all-purpose slide displaying solution that allows for showing almost any kind of content with highly customizable, transitions, effects and custom animations. Due to its visual oriented interface and countless options, Slider Revolution is suited for beginners and pro’s alike!
The GardenHub theme **recommends** following plugins:
- [Woocommerce](https://wordpress.org/plugins/woocommerce/): it is a powerful, extendable eCommerce plugin that helps you sell anything.
- [Contact Form 7](https://wordpress.org/plugins/contact-form-7/): plugin for creating contact forms. It is free and available on WordPress.org
- [ MailChimp for WordPress](https://wordpress.org/plugins/mailchimp-for-wp/): helps you add more subscribers to your MailChimp lists using various methods.
- STH Project: this plugin is used to manage project.
- STH Service: this plugin is used to manage service.
- STH Testimonial: this plugin is used to manage testimonial.
GardenHub is working perfectly with these plugins. It automatically adds more styles to them to make the design match the theme.
To install these plugins:
- Click **Begin installing plugins**
- You'll be redirect to a page where all needed plugins are listed. Just click on **Install** below each plugin's name
- After installing, if it's required to activate the plugin, just activate
### Step 3 - Config plugins
**1. Woocommerce Settings**: After finish installing this plugin, you need to change the size of product images for catalog.
- Go to `Woocommerce > Settings > Products > Display`, under the Product Images section, you will find Catalog Images, Single Product Images, and Product Thumbnails.
- Catalog Image is for your images on the shop page and for shortcodes. Single Product Image is for your images on the single product pages. Product Thumbnail is for your smaller product thumbnails for widgets.
- Change the size of Catalog Image to 270x 270, Single Product Image to 370x 415, Product Thumbnail to 70x 70.
## Activate & Save Permalinks
To prevent any 404 errors on custom post type pages, after installing and activating plugins for this theme, you need to activate & save permalinks.
- Go to **Settings> Permalink** settings
- Select the format you would like to use.
- Click the **save** button.
## One click import demo content
### Step 1 - Import demo content
- Download [Soo Demo Importer](http://demo2.steelthemes.com/plugins/soo-demo-importer.zip) plugin.
- Install a Plugin using Upload Method
- Go to Plugins > Add New.
- Click to Upload Plugin.
- Click to Choose File, browse soo-demo-importer.zip in plugins folder of package theme and upload it.
- Click to Install Now.
- Click on Activate the plugin.
- Install a Plugin using FTP Manager
- You can use a FTP client like FileZilla.
- Unzip the soo-demo-importer.zip file, you'll get a folder soo-demo-importer.
- Upload that folder to wp-content/plugins folder on your host.
- Go to Appearance > Plugins and activate the soo-demo-importer plugin.
### Step 2 - Import demo content
- Go to Appearance > Import Demo Content
- Choose the demo and data you want to import.
- Click Install.
### Step 3 - The final step
The import function of WordPress doesn’t support to import setting of widget Custom Menu and there are some things you need to change. To do them, please see the steps below.
- **Custom Menu**
You need to do this setup if your demo has Footer Widgets.
For Footer Layout 1 or Footer Layout 2:
- Go to Appearance > Widgets.
- Go to Footer 2 > select Custom Menu is Service Menu > Click Save.
### MailChimp Form
- Go to `MailChimp for WP`>`Forms`:
- Click **Save Changes**
### Contact Form 7:
- Go to `Contact`>`Contact forms`>`Edit Contact form`>`Mail`:
- Contact Form 7 : There are several things you need to change here such as the email addresses...(as red-made in the screenshot):
## Setup Menu
Following these steps to create a menu:
- Go to `Appearance > Menus`
- Click the **create a new menu** link to create new menu.
- Select items from the left meta boxes and click **Add to Menu**
- On the right, feel free to drag and drop menu items to organize them
- When you're done moving menu items, check **Primary Menu** for **Theme locations** at the bottom of the page
- Click **Save Menu**
## Manual Import demo content
### Step 1 - Where To Find Demo Files
Go to the download package >Demo Data folder you will see homepage folders, each of them containing an XML file, the slider folder, a customizer.dat file and a widgets-data.wie file.
Read our Files Included In The Package to know file structure of homepages.
### Step 2 - How to Import XML Files
- Go to `Tools > Import`
- Select WordPress from the list and install the WordPress Importer Plugin.
- If you haven't installed the **WordPress import plugin**, a popup window will appears and ask you to install it. Just click **Install Now**. When the installation progress is completed, click **Activate Plugin & Run Importer**. If you have installed this plugin, skip to next step.
- Click **Browse** and select `demo-content.xml` file from the download package
- Click **Upload file and import**
- When you are asked to import author, you can create new author or import to existing author. You also should check the checkbox **Download and import file attachments**.
After completing all above steps, go to `Posts`, `Pages`, `Products` to see imported data.
### Step 3 - Import Widgets Data
- Install and activate the [Widgets Importer/Exporter](https://wordpress.org/plugins/widget-importer-exporter/) plugin.
- Go to Tools > Widget Importer & Exporter, click Choose file button and select widgets-data.wie file from the download package.
- Click to Import widgets.
### Step 4 - Import Revolution Sliders
- Go to Revolution Slider.
- Click Import Slider button on the bottom right.
- Click Choose file and select a slider in Slider folder from the download package.
- Click Import Slider button to start importing. It usaually takes seconds to finish.
### Step 5 - How to Import Customize File
- Install and activate the [Customizer Export/Import](https://wordpress.org/plugins/customizer-export-import/) plugin.
- Go to Appearance > Customize > Export/Import.
- Click Choose File and select customizer.dat file from your homepage folder.
- Click the Download and import image files and Import button.
### Step 6 - Setup homepage and blog page
After install demo content, you'll see a page `Front Page`. This page will be used as the homepage of the website. To set it as homepage, please go to `Settings \ Reading`, under **Front page displays**, please chose **A static page (select below)** and select **Front Page** for **Front page** and **Blog** page for **Posts page**.
### Step 7 - Setup Menu
Although the theme is working now and it shows menu, but because we haven't created a menu for primary location, the theme will display all pages by default.
When you import the demo data, WordPress automatically create menus for you. These menus are the same as our demo.
**Primary Menu**
- Go to `Appearance > Menus`
- Select **Primary Menu** and click **Select** button to edit it.
- Scroll to bottom of page and check **Primary Menu** for **_Theme location_**
- Click **Save Menu**
Create Menu
======================
Following these steps to create a menu:
- Go to `Appearance > Menus`
- Click the **create a new menu** link to create new menu.
- Select items from the left meta boxes and click **Add to Menu**
- On the right, feel free to drag and drop menu items to organize them
- When you're done moving menu items, check **Primary Menu** for **Theme locations** at the bottom of the page
- Click **Save Menu**
Visual Composer Basics
======================
It has very simple and intuitive interface, but before getting started, you may find it useful to get accustomed with its documentation:
[Visual Composer Documentation](https://wpbakery.atlassian.net/wiki/display/VC/Visual+Composer+Pagebuilder+for+WordPress?title=Visual_Composer)
In GardenHub theme, we also create some new elements and add some new parameters to exists elements of Visual Composer. It will help you a lot to build your HomePage easier.
**Section Title**
This element is used to create the title area for each section. It is used in almost section in our demo. It contains following parameters:
- Icon: select icon for this title.
- Title: the title content ( Remember enter correct format )
- Style: choose size of title.
- Version: choose version dark or light of title.
- Position: choose left and center position.
- Extra class name: enter extra class names if you want to apply your own style rule.
**Icon Box**
This element is used to present a single service or small paragraph with an icon. It contains following options:
- Icon: select icon for this box.
- Title: enter the box's title.
- Content: the box's content.
- Style: select style for icon box ( 3 styles ).
- Link: Add link for icon box
- Extra class name: enter extra class names if you want to apply your own style rule.
**Testimonials Carousel**
This element is used to display testimonials. It contains following parameters:
- Icon: select icon to show.
- Number: enter the number of testimonial to be get.
- Style: select style.
- Title: Enter the title (this option for style 1).
- Autoplay: Enable/Disable autoplay
- Autoplay timeout: Duration of animation between slides (in ms). Enter the value is 0 or empty if you want the slider is not autoplay.
- Autoplay speed: Set auto play speed in mini-second. Enter 0 to disable auto play.
- Show Navigation: Enable/Disable navigation
- Show Dots: Enable/Disable dots
- Columns: select columns to show.
- Extra class name: enter extra class names if you want to apply your own style rule.
**Services**
This element is used to display services.It contains following parameters:
- Style: select style.
- Number: enter the number of services to be get.
- Button text: Enter text of button ( this option for style 2 ).
- Columns: Select number columns want to display.
- Category: select a category or all categories to get posts from.
- Extra class name: enter extra class names if you want to apply your own style rule.
**Projects**
This element is used to display project portfolio.It contains following parameters:
- Style: select style.
- Number: enter the number of project to be get.
- Active Category: Enter active section number.
- Project Categories: choose category, the project with that category will be show.
- Extra class name: enter extra class names if you want to apply your own style rule.
**Latest Posts**
This element is used to display project portfolio.It contains following parameters:
- More News Button: enter text for link go to blog.
- Number: enter the number of project to be get.
- Text Button: enter text for button
- Style: select style ( 2 style ).
- Type: select type ( 2 type: grid - carousel ).
- Autoplay: Enable/Disable autoplay
- Autoplay timeout: Duration of animation between slides (in ms). Enter the value is 0 or empty if you want the slider is not autoplay.
- Autoplay speed: Set auto play speed in mini-second. Enter 0 to disable auto play.
- Show Navigation: Enable/Disable navigation
- Show Dots: Enable/Disable dots
- Columns: select columns to show.
- Extra class name: enter extra class names if you want to apply your own style rule.
**Team**
This element is used to display team member.It contains following parameters:
- Images: Select images from media library.
- Image size: Enter image size (Example: "thumbnail", "medium", "large", "full" or other sizes defined by theme). Alternatively enter size in pixels (Example: 200x100 (Width x Height)).
- Style: Choose style to display text.
- Name: Enter member's name.
- Job: Enter member's job.
- Website: Enter member's website.
- Desc: Enter member's short description.
- Facebook, Twitter, Google Plus, RSS, Pinterest, Instagram, Linkedin, Youtube: Enter link member's Social Network
- Extra class name: enter extra class names if you want to apply your own style rule.
** Google Maps**
This element is used to display the map for the site.
- Api Key: Go to [Google Maps APIs](https://developers.google.com/maps/documentation/javascript/get-api-key#get-an-api-key) to get your key
- Marker: Select an image from media library
- Address Infomation: enter the address here.
- Width(px): set up the width of the map.
- Height(px): set up the height of the map.
- Zoom: fill this field to set up the zoom ratio for the map
- Extra class name: If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
Template
=============
**HomePage**: This template is full width and has no banner, no custom layout, no padding between the content and the header, the content and the footer.
------------------------------
Theme Options
=============
GardenHub theme comes with unique, creative and easy-to-use Customize page. You can change all theme options in Appearance->Customize with live-previewing those changes before saving them.
All options have full description so you can know what you are doing. Just click and save!
General Settings
-------------------
** Custom Site Identity**
This option will help you edit your title and tagline, and set site icon (The Site Icon is used as a browser and app icon for your site).
Simply go to ‘Appearance->Customize->General->Site Identity’ and change your title, tagline and upload your site icon.
Styling
-------
**How to custom CSS**
Simply go to ‘Appearance->Customize->Styling->Custom Css’ and enter your code css.
**Color Schemes**
Change color on while site.
Layouts
---------------
**Site Layouts**
There are 3 different layouts: sidebar-content, content-sidebar and full-content. Simply go to ‘Appearance->Customize->Layout->Site Layout’ and change your layout.
The theme included options to alter your layout for whole site, page, portfolio and shop page.
**Default Layout**: Select this option to change layout for whole site, such as: blog, archive, category, single post…
**Page Layout**: Select this option to change layout for pages. You can custom layout for every pages, simply edit pages and check to cutom layout option and select your layout
**Shop Layout**: Select this option to change layout for shop page.
**Service Layout**: Select this option to change layout for service archive, catefory and tag page.
**Single Service Layout**: Select this option to change layout for single service.
**Project Layout**: Select this option to change layout for project archive, catefory and tag page.
Header
-------------
**1. How to enable topbar?**
Simply go to ‘Appearance->Customize->Header->Topbar and enable Topbar.
**2. Header Styles**
The theme includes 4 different Header styles and it easy to switch your header style.
Simply go to ‘Appearance -> Customize -> Header->Header Layout’ to select your header style.
You can enable header sticky in this option
**3. How to Change Your Logo?**
The theme includes options to upload and custom your logo such as: logo width, logo height, logo margin. Simply go to ‘Appearance -> Customize -> Header->Logo’ to upload your logo.
Logo Transparent just is used for homepage that has header is transparent.
**4. Page Header**
The theme includes options to setting page header for whole site, pages, shop and portfolio.
Simply go to ‘Appearance->Customize->Page Header->' and choose page header section and choose your settings.
Content
--------------
**1. How to change excerpt lenght**
Simply go to ‘Appearance->Customize->Content-> Excerpt Length' and choose page header section and choose your settings.
**2. How to change blog and portfolio layout**
The theme includes 2 layout for blog page : grid, classic ; 2 layout for project portfolio: Full Width, Grid. You can choose number of columns to display post.
Simply go to ‘Appearance->Customize->Content->' and choose your settings.
Shop
--------------
** Catelog**
This section includes options to setting your shop:
- Show number product per page
- Setting product columns
Simply go to ‘Appearance->Customize->Shop->Catelog' and choose your settings.
Footer
-------------
**1. How To Enable Back To Top Button?**
Simply go to ‘Appearance->Customize->Styling->Footer and enable Back To Top option.
**2. How To Enable Footer Widget**
Simply go to ‘Appearance->Customize->Styling->Footer and enable Footer Widget.
------------------------------
Post Format
===========
[Post Formats](http://codex.wordpress.org/Post_Formats) is theme feature which is a piece of meta information that can be used by a theme to customize its presentation of a post.
In short, with a theme that supports Post Formats, a blogger can change how each post looks by choosing a Post Format from a radio-button list.
MrBara theme supports the following post formats:
- `gallery` - A gallery of images, which will be displayed in a responsive image slider, powered by Flexslider.
- `link` - A link to another site.
- `image` - A single image, which will be shown above post title.
- `quote` - A quotation.
- `video` - A single video, which can be any video from Youtube, Video or other video websites. Support URL or embed code. The video will be displayed above post title.
- `audio` - An audio file, which can be any video from Youtube, Video or other video websites. Support URL or embed code. The video will be displayed using a powerful HTML5 audio player provided by Wordpress as default player.
Using post format in MrBara lets you differentiate post from each other and make the blog page / single page looks more beautiful.
When you edit a post, select a format you want to apply to that post on the **Format** meta box on the right:
When you choose a format, a corresponding meta box will appear **below** the content editor, here's the list of them:
All you need to do is just enter **all** information in the fields in these meta boxes. This information will be used to decorate the post. For example: gallery post format will uses uploaded images to show a slider above post title, a video post will display a video player above post title, etc.
------------------------------
Portfolio
=========
## Create Portfolio Page
After you enable Portfolio support, you can view your portfolio in the link: `http://your_domain/portfolio`. But we recommend you to create a page for this to easier management in future. Please remember your portfolio URL will be that page's URL.
1. Go to **Pages > Add New** to create a new page for your portfolio. Name it as "Portfolio" or whatever you want.
1. Go to **Settings > Reading** to select Portfolio page.
## Change Permalink Structure
CW-Portfolio plugin allows you to change the permalinks of Portfolio and project pages as you want. To do this, you can go to **Settings > Permalinks**. Besides default settings of WordPress and WooCommerce, you will see new options for Portfolio there.
------------------------------
Service
=========
## Create Service Page
After you enable Service support, you can view your service in the link: `http://your_domain/service`. But we recommend you to create a page for this to easier management in future. Please remember your service URL will be that page's URL.
1. Go to **Pages > Add New** to create a new page for your service. Name it as "Service" or whatever you want.
1. Go to **Settings > Reading** to select Service page.
## Change Permalink Structure
CW-Service plugin allows you to change the permalinks of Service as you want. To do this, you can go to **Settings > Permalinks**. Besides default settings of WordPress and WooCommerce, you will see new options for Service there.
------------------------------
Testimonial
=========
## Create Testimonial Page
After you enable Testimonial support, you can view your team in the link: `http://your_domain/testimonial`. But we recommend you to create a page for this to easier management in future. Please remember your testimonial URL will be that page's URL.
1. Go to **Pages > Add New** to create a new page for your testimonial. Name it as "Testimonial" or whatever you want.
1. Go to **Settings > Reading** to select Testimonial page.
------------------------------
Translation
=========
**Tell WordPress which language file to use.**
If you don’t use WordPress in your native language so far, you have to tell WordPress which language to use to activate the theme translation.
You can do this by editing the wp-config.php file (the file is located in the main directory of your WordPress files) and defining the WPLANG constant. You have to set your language code there, for example fr_FR for French translation.
ust add the line below to your wp-config.php or change it if it already exists:
`define ('WPLANG', 'fr_FR');`
## Using Plugin
The easiest way to translate your theme locally is by using the [Loco Translate](https://wordpress.org/plugins/loco-translate/) plugin. After you have installed and activated the plugin, simply go to `Loco Translate > Home` in the left-hand menu to start translating the theme from your WordPress backend.
## Using Poedit
Poedit is a common program which you can use to translate the theme. It’s available for free on [poedit.net](http://www.poedit.net/).
After you have installed Poedit, you can open it and select `File > New Catalog from POT file`. Then select the .pot file from the theme you wish to translate which you can find in the `/lang/` folder of theme.
Then go through every line of text and translate it to your native language. Afterwards you can save the catalog with your language code (for example `es_ES.po`). Normally Poedit automatically creates the .mo file and saves it, too.
The last step you have to do is to upload your created language files to the language folder of your theme using FTP.
------------------------------
Child Theme
===========
GardenHub is fully child theme compatible. We have attached a basic child theme to the download package which contains the minimum of required files. If you are planing any code customizations we highly recommend to do this inside the child theme! Learn more about child themes [here](http://codex.wordpresss.org/Child_Themes)
------------------------------
FAQs
====
1. **How to change the default logo to other?**
Go to `Appearance > Customize > Header`, the option for change logo is there.
2. **How to change the color of theme?**
Go to `Appearance > Customize > Styling > Color Scheme`. There are options to pick color form pre-defined colors or pick your favorite color.
3. **Does GardenHub theme support child theme?**
Yes, it does. Please see details in above section.
-------------------------
]]>