Overview

Gatsby WordPress Theme Documentation v1.0

Version: 1.0
Author: mad_velikorodnov.
Designed by: http://themeforest.net/user/mad_velikorodnov/

---

Welcome to Gatsby!

We would like to thank you for purchasing Gatsby WordPress + eCommerce Theme! We are very pleased you have chosen Gatsby Wordpress for your website, you will be never disappointed! Before you get started, please be sure to always check out this documentation. We outline all kinds of good information, and provide you with all the details you need to use Gatsby WordPress Theme. Gatsby WordPress can only be used with WordPress and we assume that you already have WordPress installed and ready to go.

If you are unable to find your answer here in our documentation, we encourage you to contact us through themeforest item support page with your site CPanel (or FTP) and WordPress admin details. We're very happy to help you and you will get reply from us more faster than you expected.

Thank you, we hope you to enjoy using Gatsby WordPress Theme!

Install WordPress

If you haven't have a working version of WordPress, you need to install it first in order to install Gatsby 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.

• WordPress Codex - This link provides overall information about WordPress and WordPress installation guide.
• Instructional Video - Guide to install WordPress video created by Woo Themes.
• First Steps With WordPress - Multiple useful topics about WordPress.
• FAQ New To WordPress - Common questions about WordPress.

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.

• WordPress 4.0 or higher.
• PHP 5.4 or higher.
• MySQL 5 or higher.

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:

• max_execution_time 1800
• memory_limit 128M
• post_max_size 100M
• upload_max_filesize 100M
• max_input_vars 5000

---

1.2 Theme Installation

- Install new theme manually via FTP Client

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

1. Download the zip package of Gatsby theme in ThemeForest
2. Unzip Gatsby.zip package which you can find inside Theme files folder.
3. Connect to your FTP server and navigate to the WordPress installation folder.
Go to wp-content/themes/ and upload Gatsby folder.

4. 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 Gatsby 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. After that, click Upload Theme link and upload zip package of Gatsby theme

   
   
   

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

   
   
   

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

   
   
   

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

---

1.3 Plugins Installation

After installing and activating the theme you will see the following message at the top of the page.

You should click Begin Installing plugins link in order to install needed plugins for Gatsby 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 theme and select install then click apply. The picture below will list some required plugins for Gatsby.

 

1.4 Plugin Configuration

- Visual Composer

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.

 

- Woocommerce

WooCommerce is the most popular WordPress eCommerce plugin. Packed full of features, perfectly integrated into your self-hosted WordPress website.

You can see here for more details and woocommerce documentation.

- Install Woocommerce Pages

You can see the following message after install woocommerce plugin and you should click Install Woocommerce Pages.

Important! If you want to import dummy data, you can skip to install woocommerce pages.

You can see "Shop", "Cart", "Checkout" and "My Account" pages in Pages on admin sidebar.

- Change Image Sizes

You can change the product image sizes in Woocommerce > Settings > Products > Display > Product Images on admin sidebar.

We used the following image sizes on our demo sites:

• Catalog Images: 410 x 410


• Single Product Image: 600 x 600


• Product Thumbnails: 100 x 100

After change the image sizes, you should regenerate all the thumbnails using Regenerate Thumbnails plugins.

- Enable Registration on My Account

Please go to WooCommerce > Settings > Account > Registration Options and enable registration on the "My Account" page.

- Gatsby twitter Feed

This plugin used to get your twitter images based in your twitter User ID and Access token

In order to add User ID and access token of your twitter account, click Appearance > Twitter API in admin sidebar

1.5 Demo Installation

- Traditional Method

Click Appearance --> Install Demos in admin sidebar and you will find option for import demo.

It takes several minutes.

- Import Dummy Content

Click Import in Import Dummy Content.

If the process of import demo is failed, we suggest you to increase max_execution_time in php.ini.

We recommend:

• max_execution_time 1800
• memory_limit 128M
• post_max_size 100M
• upload_max_filesize 100M
• max_input_vars 5000

 

- Import Demo

After finishing process of importing widget, you should select demo. Please read the message.

 

- Alternative Method

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.

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

- Step 7: If you want to change demo version, you should select demo in Theme Options > Import Demo > Import Demo on admin sidebar. Please read the message and click OK.

2. Build Your Site

2.1 Build Your Site (if you didn't make our demo import)

- Before Build Your Site

You need to configure WordPress and the plugins.

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:

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

  
  
  

• 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 in Settings > Discussion provide a lot of options for you to explore such as "Default article settings", "Other comment settings".

  
  
  

• You can change Image sizes in Settings > Media.

  
  
  

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

2.3 Theme Options

Gatsby uses Redux Framework with plenty settings

You can see Theme Options for more details.

2.4 Menu Setup

Gatsby provides 4 areas of the theme where you can assign a menu.

• Primary Menu
• Footer Menu
• Onepage Menu
• Topbar menu

- Add Menu

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

After that, you can select menu location for your menu in Menu Settings.

---

3. Theme Options

Gatsby comes with advanced settings panel that is loaded with options. We have the options organized into logical tabbed sections, and each option has a description of what it will do on the front end. Because of the sizable amount of options Gatsby provides, 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. Go to Appearance > Theme Options on admin sidebar to access the setting options. See below for screenshots and short descriptions of our Theme Options panel.

3.1 Theme Options

There are 2 ways to access theme options.

1) Click Gatsby links in the top of page.

2) Click Gatsby in admin sidebar.

After that, you will see a logical tabbed sections including a lot of tabs for you to discover.

• General- You can change logo and favicon icon, loading, page layout, default sidebar.

• Skins - You can change h1-h6 settings, all colors, border radiuses, Main menu styles, footer settings Shope elements colors and add custom css.

• Header - You can choose Header style, network share icons, show/hide some elements and manage some specific settings for different headers.

• Breadcrumbs - You can adjust global settings for subheaders, titles and breadcrumbs on subpages.

• Blog - These option allow you to switch on/off some blog and post elements like tags, categories, etc and choose sidebar positions for the global Blog and post pages.

• Portfolio - These options give you several great options to customize Portfolio Archive Page and portfolio detail page.

• Members Team - Here you can choose rectangled or rounded member's style, columns, nubers, etc.

• Testimonials - These options allow you to configure layout settings for Testimonial page, columns and posts per page.

• Javascript Code - Here you can add your custom js.

• Footer - This tab allows you to change Copyright and add social button links

• 404 Page - Theme has several 404 page styles and you can choose one of them and replace images and texts

• Shop - This tab contains several choices to change settings on archive page, single products page, cart options, show/hide compare, wishlist, etc.

• Google - Here you can insert your google map API key https://developers.google.com/maps/documentation/javascript/get-api-key.

• Import/Export - Here you can make import/export demo data.

3.2 General

- In this tab, you can show or hide preloader, choose boxed or wide page layout, default sidebar and position.

 

- Logo

Here you can upload Logos for different header types and upload favicon. We have different headers (transparent, black and white). Depends on header you have to use dark or light logo image

 

3.3 Skin

You can change border radiuses and primary colors. For sure you can inspect any element and replace color using custom.css by yourself

- Typography

Here you can change typography for all fonts and H1- H6 tags

 

- Backgrounds

Here you can change typography for all fonts and H1- H6 tags

 

- Main Menu

Here you can change typography and colors for Main Menu for different headers

 

- Footer

Here you can change color, images for footer

 

- Shop

Here you can change color styles for Shop elements

 

- Custom CSS

Here you can insert your custom css. It's dynamic css and it will be saved after updates

 

3.4 Header

Theme has 9 headers. Here you hide/show some elements on different header types

 

- Top Bar

Different header types has different settings. Here you can edit them or show/hide some elements

 

- Page Header Type

We have 9 different headers. Here you can choose default Header

 

- Shop Header Type

Here you can choose Default header for Shop Pages

 

 

3.5 Breadcrumbs

- Pages & Posts

Pages & Posts, Portfolio, testimonials, Team Members have the same settings. Here you can adjust show/hide Titles, breadcrumbs and upload background images

- you have tons of option to adjust this area. You can use mono or color background, image or video, breadcrumbs or zoom out effect

- Shop

Here you can adjust show/hide Titles, breadcrumbs and upload background image and adjust Opacity Overlay

 

 

3.6 Blog

- These option allow you to switch on/off visibility of Date, Author, Categories, Tags and Comments

- Blog Post

Here you can adjust Excerpt Lenght for different Blog Post Styles

 

- Post Archive

Here you can choose default Sidebar position and Blog style

 

- Single Post

Here you can choose default Sidebar position and show/hide content elements

 

3.7 Portfolio

- Portfolio Archives

- These options affect your website's sidebar's positions portfolio style. You can choose default Portfolio style for Archive Portfolio Page

- Single Portfolio

- Here you show/hide Portfolio elements and choose 'order by' for related works

3.8 Team Members

- Here you can adjust Excerpt Length for Member description.

- Archive Team Members

- Here you choose layout type, description position and column numbers

3.9 Testimonials

- These options give you several great options to customize Testimonials Archive Page

3.10 Javascript Code

- Here you can add your custom js code.

3.11 Footer

- Here you can insert copyright and show or hide bottom Menu.

- Social Links

- Here you show/hide social links and add social profile links

3.12 404 Page

Gatsby gives you 3 types of 404 page. Choose one and upload own images and insert your text

3.13 Shop

- This tab contains several choices to change apperance of your compare, wishlist, quick-view, labels

- Product Archives

- Here you choose default sidebar position, sidebar, product layout, view mode and columns for Shop Archive page

- Single Product

- Here you choose default sidebar position, product elements visability, columns and labels

- Cart

- Here you adjust Cross-Sells products on Cart page

3.14 Google

- Here you have to insert Google Map API Key. How to create it read here https://developers.google.com/maps/documentation/javascript/get-api-key

3.15 Import/Export

- Here you can make import/export demo data file.

4. Content Types

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

• Navigate Appearance > Install Plugins on admin sidebar.
• You should select and install Gatsby Custom Content Types and Taxonomies
• You should activate this plugin.

 

---

4.1 Post

- General Information

Gatsby provides many options to present your blog posts, along with several different blog layouts. In addition there are numerous Theme Options and Blog VC Options. The Gatsby blog is very powerful. The following sections will cover each of these aspects of the blog that are listed below.

- 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 4 - Post it.

---

4.2 Photography

We have very cool post type Photography. You can add images and drag and drop them to adjust the position, order and size

- Creating / Editing Photography

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

Step 2 - Click on the Add New option to make a new post. Create a title, and insert images and adjust them.

Step 4 - Post it.

---

4.3 Team Members

Creating / Editing block

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

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

Step 3 - If you need you can assign categories from the right side to post.

Step 4 - Post it.

---

4.4 Testimonials

- Creating / Editing portfolio

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

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

Step 3 - Post it.

---

4.5 Portfolio

- Creating / Editing team

Step 1 - Navigate to Portfolio in your WordPress admin. Click on the Add New option and enter all needed information for Portfolio such as title, and content in the editing field.

 

---

5. Visual Composer elements

Remember to install and activate Gatsby Custom Content Types and Taxonomies plugin.

• Please go in Appearance > Install Plugins on admin sidebar.
• You should select and install Gatsby Custom Content Types and Taxonomies plugin.
• You should activate this plugin.

- How to add shortcodes using visual composer

You should enable visual composer editor.

You should select the element. If you click the following button, will be show the popup.

There are several content elements for you to choose.

- WooCommerce

Image below lists a lot of useful shortcodes of WooCommerce such as Cart, Product, Checkout and My Account.

- Gatsby Shortcodes

In total, Gatsby provides a lot of effective shortcodes for you. Besides some general settings for animations such as animation type, item delay and extra class, each shortcodes will contain their own options.

5.1 Gatsby Accordions

This shortcodes will help you to show accordion or toggle. Type shortcode have accordion or toggle option.

 

Below is the screenshot of accordions and toggles:

- Several styles

 

 

5.2 Gatsby Alert Boxes

It allows you to display item of Alert Boxes.

Below is the screenshot of shortcode Alert Boxes:

5.3 Gatsby Buttons

Gatsby provides this shortcode for you to display different buttons.

Below is the screenshot of shortcode buttons:

- See all styles.

 

5.4 Gatsby Call to Action

This shortcode will display different Call to Action blocks.

Below will be screenshot for layout of Call to Action.

5.5 Gatsby Testimonials Carousels

It helps you to create Carousels.

Below will be screenshot for layout of Carousels.

5.6 Gatsby Images Carousel

In this shortcode allows you to make image carousel.

Below will be screenshot for layout of Carousels.

5.7 Gatsby Counters

This shortcode show counters.

Below will be screenshot for Counters.

 

5.8 Gatsby Blog element

This shortocode show different blog elements.There are 4 layouts:

- Masonry v1

- Masonry v2

- Small thumbnails

- Big thumbnails

 

Below will be screenshot for layout of Blog.

5.9 Gatsby Dropcap

This shortocode show different dropcap.There are 3 layouts

Depend on type you can upload background image or choose the color

Below is the screenshot of shortcode Grid Portfolio:

5.10 Gatsby Infoblocks

Main infoblock element has such settings:

- Title and font size

- 5 styles

- Number of columns

Info Block view

5.11 Gatsby Lists

This shortocode has 5 design layouts

See all settings:

Below is the screenshot of 2 Product box types:

 

5.12 Gatsby Separators

This shortocode show Separators elements settings

See all settings:

Below is the screenshot of Lookbook Page:

5.13 Gatsby Pricing Tables

This shortocode show Pricing Tables settings

See main settings:

Below is the screenshot of Pricing tables:

5.14 Gatsby Progress Bar

This shortocode show progress bar settings

See main settings:

Below is the screenshot of progress bars:

5.15 Gatsby Tables

This shortocode show progress bar settings

See main settings:

Below is the screenshot of tables:

5.16 Gatsby Tabs

This shortocode show tabs settings. This element has 4 styles

See main settings:

Below is the screenshot of tables:

5.17 Gatsby Portfolio

This shortocode show tabs settings. This element has 4 styles

See main settings:

You can create tons of variants. Below is one of variants. You can find more on our demo site:

6. Widgets

6.1 Gatsby Advertizing area widget

• Please go in Appearance > Widgets on admin sidebar.
• You should addAdvertizing widget in the sidebar.

• This widget provides update title, image link and external link.

  
  

6.2 Gatsby Contact Us widget

• Please go in Appearance > Widgets on admin sidebar.
• You should add Contact widget in the sidebar.

• This widget provides such options.

  - Display title

  - Display address

  - Display phone

  - Display email

  - Display skype

  

  Contact

  

   

6.3 Gatsby Flickr feed widget

This widget helps you to filter products into a list all product.

• Please go in Appearance > Widgets on admin sidebar.
• You should add Flickr product widget in the sidebar.

• This widget provides such options.

  - Display title

  - Flickr user ID

  - Number of images to display on front-end

   

  
  

6.4 Gatsby Instagram widget

This widget helps you to show image flick in library image count flick.

• Please go in Appearance > Widgets on admin sidebar.
• You should add Instagram widget in the sidebar.

• This widget provides 5 option.

  - Add title widget.

  - Add id user instagram.

  - Number image show.

  - Target page.

  - Button text.

  
  

6.5 Gatsby Popular and Latest Posts widget

This widget helps you to show like page facebook.

• Please go in Appearance > Widgets on admin sidebar.
• You should add Popular and Recent Posts widget in the sidebar.

• This widget provides 2 option.

  - Add title widget.

  - Choose type of posts.

  
  

6.6 Gatsby Social links widget

This widget helps you to show post new about post.

• Please go in Appearance > Widgets on admin sidebar.
• You should add Social links widget in the sidebar.

• This widget provides 10 option.

  - Add title widget.

  - Insert needed social links.

   

  
  

6.7 Gatsby Testimonials widget

This widget helps you to show video vimeo and video youtube.

• Please go in Appearance > Widgets on admin sidebar.
• You should add Testimonials widget in the sidebar.

• This widget provides 4 option.

  - Add title widget.

  - Number of testimonials.

  - list or Grid view.

  - Order.

  
  

 

---

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.

• WPML Plugin - The highly recommended plugin to manage multi-lingual sites
• WPML Forum Support - If you bought WPML then you get free support from their amazing team
• Translating Widgets - Tutorial recommended by wpml team for translating widgets

---

8. Site Speed Up

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

Excluding pages from the cache

If using caching plugins, make sure you exclude the following pages from the cache through their respective settings panels:

• Cart
• My Account
• Checkout
• Wishlist

These pages need to stay dynamic since they display information specific to the current customer.

9. Plugin's Documentation

We do not provide the support for 3rd party plugins and modules. In this case you will have to purchase a personal license on the plugin's/module's official website in order to get the help
Please read following documentations

• WooCommerce documentation
• Visual Composer documentation
• MailChimp API documentation
• Layer Slider documentation
• WooSale documentation
• Mega Menu documentation
• Revolution Slider documentation
• Contact Form7 documentation
• WOOF Filter documentation