Church WordPress Theme Zoo Navigator Documentation

## Introduction
---

First and foremost we want to give a huge thank you for purchasing this <a href="http://www.zootemplate.com/wordpress-themes">WordPress Theme</a>. We greatly appreciate your feedback from you on how, if anywhere, you would like this documentation imporved. If you have any further question, please kindly contact to us via our <a href="http://member.zootemplate.com/helpdesk">Helpdesk</a>

<a href="http://wp.rivertheme.com/zoo-navigator/">Zoo Navigator</a> Wordpress theme is a WooCommerce Wordpress theme designed and developed for use with Wordpress 4.7 or higher. The code was written to be backwards compatible where possible, however we recommend you use the current WP version when possible. If you are not using WordPress 4.7 or higher and can upgrade your site we recommend you do this before installation.

Although every effort has been made to ensure the theme is bug free and easy to use there is always a chance errors may occur. If you do find a problem please notify us immediately through our <a href="http://member.zootemplate.com/helpdesk" target="_blank">Help Desk</a> so we can ensure it gets fixed as quickly as possible.

## Help & Support
---

First of all if you are all new to WordPress, I would recommend to learn a little bit about it before you get started. Here are some nice Resources on how to get started with WordPress:

<ul>
 <li>WordPress FAQ: <a href="http://codex.WordPress.org/FAQ_New_To_WordPress" target="_blank">http://codex.WordPress.org/FAQ_New_To_WordPress</a></li>
 <li>Full Installation Guide: <a href="http://codex.WordPress.org/First_Steps_With_WordPress" target="_blank">http://codex.WordPress.org/First_Steps_With_WordPress</a></li>
 <li>WordPress Video Tutorials: <a href="http://wp.tutsplus.com/sessions/wp101-basix-training/" target="_blank">http://wp.tutsplus.com/sessions/wp101-basix-training/</a></li>
</ul>
There are many tutorials, acticles and forums to help you learn how to use this WordPress theme and its features.
This section provides helpful links to instructions on commonly used this WordPress template features, but you can learn even more by exploring these resources:
<ul>
 <li>Download: <a href="#">Zoo Navigator</a></li>
 <li>Live Demo: <a href="http://wp.rivertheme.com/zoo-navigator/" target="_blank">http://wp.rivertheme.com/zoo-navigator/</a></li>
 <li>Online Documentation: <a href="http://doc.zootemplate.com/zoo-navigator/" target="_blank">http://doc.zootemplate.com/zoo-navigator/</a></li>
 <li>Help Desk: <a href="http://support.zooextension.com" target="_blank">http://support.zooextension.com</a></li>
</ul>
All of our items come with free support, and we have a dedicated support system to handle your requests. Support is limited to questions regarding the theme’s features or problems with the theme. We are not able to provide support for code customizations or third-party plugins. If you need help with anything other than minor customizations of your theme then you should enlist the help of a developer.

To submit a Ticket always remember:
<ul>
 <li>Include as many information as possible to explain your issue.</li>
 <li>Your URL.</li>
 <li>Name of the Theme.</li>
 <li>Your WordPress version.</li>
 <li>If you installed extensions, specify which are these.</li>
</ul>
(We reserve the right to change or modify current Support Policy with no prior notice.)
<blockquote>
We refuse to assist in the cases below:
<ol>
 <li>Purchase code invalid</li>
 <li>Theme has been edit/changed by user. All change on main theme we will denie. So If you have any change, please do it on child theme.</li>
 <li>Support time is ended.</li>
 <li>Edit or install theme and plugin. Except case theme/plugins can't install by problem of theme.</li>
</ol>
</blockquote>

## What you get

---

Once you have made the purchase you will find our product in your <a href="http://themeforest.net/downloads/" target="_blank">ThemeForest Downloads</a> page. Click on Download and you will a dropdown will popup with following options :
<ol>
<li>All Files & Documentation</li>
<li>Installable WordPress File Only</li>
<li>License Certificate & Purchase Code (PDF)</li>
<li>License Certificate & Purchase Code (text)</li>
</ol>
We recommend to download all files & documentation (the package) however you can simply download installable WordPress file only if you just want the WordPress Theme file.

### The Folder Structure

---
Once you download the package, unzip it and you will find it contains the following folders.

<ul>
 <li>readme.txt</li>
 <li>documentation – This folder contains the documentation for the theme.</li>
 <li>themes-files - This folder contains the installable theme files.
 <ul>
 <li>zoo-navigator.zip installable WordPress theme </li>
 </ul>
 </li>
</ul>

## Installation
---

To install this theme you must have a working version of WordPress already installed. For information in regard to installing the WordPress platform, please see the WordPress Codex - <a href="http://codex.wordpress.org/Installing_WordPress">http://codex.wordpress.org/Installing_WordPress</a>

### Pre-Installation Requirements
---
 <ul>
 <li>WordPress 4.7 or higher and PHP 5.4 or higher;</li>
 <li>To avoid problems with demo content import you must be sure that file_get_contents() function is enabled in the server configuration;</li>
 <li>Recommended memory_limit is no less than 128M;</li>
 <li>upload_max_filesize should be no less than 64M.</li>
 <li>max_execution_time should be no less than 3600.</li>
 </ul>

### Theme Installation
---
When you are ready to install a theme, you must first upload the theme files and then activate the theme itself. The theme files can be uploaded in two ways:
 <ol>
 <li>FTP Upload: Using your FTP program, upload the non-zipped theme folder into the /wp-content/themes/ folder on your server</li>
 <li>WordPress Upload: Navigate to Appearance > Add New Themes > Upload. Go to browse, and select the zipped theme folder. Hit “Install Now” and the theme will be uploaded and installed.</li>
 </ol>

#### Wordpress Upload
---

<ol>
<li>Login to your WordPress admin.</li>
<li>In the Appearance > Themes menu click the tab "Install Themes"</li>
<li>At the top of the page click, "Upload", then click the file input to select a file.</li>
<li>Select the zipped theme file, "zoo-navigator.zip" available in theme-files folder from the package downloaded from ThemeForest, and click "Install Now"</li>
<li>After installation you will receive a success message confirming your new install.</li>
<li>Click the link "Activate"</li>
</ol>

#### FTP Upload
---

<ol>
<li>Login to your FTP server and navigate to your WordPress themes directory.</li>
<li>Normally this would be "wp-content/themes"</li>
<li>Extract the files from the zipped theme available in the package downloaded from ThemeForest.</li>
<li>Copy the folder "zoo-navigator" to your themes directory.</li>
<li>After the files finish uploading, login to your WordPress admin.</li>
<li>In the "Appearance" menu click "Themes"</li>
<li>Click "Activate" for the theme "zoo-navigator"</li>
</ol>

Recommended Additional Step We highly recommend the use of child themes. The additional step involves repeating steps 1 to 7 for zoo-navigator-child.zip file.

Once the theme is uploaded, you need to activate it. Go to Appearance > Themes and activate zoo-navigator.

### Install plugins & Import Demo Content
---
#### Plugin Installation
---

First of all, we would like to specify that we do not guarantee the compatibility of our theme with all the third-party plugins for WordPress . Our template is fully compatible only with the plugins that are included in our theme . You often (not always) need to customize the extension to make it work properly with your theme. It's impossible for theme author to make the theme compatible with all existing extensions. Please, take that into your consideration and treat with understanding!

After you had activated the theme, you need to install the plugins required by the theme. This theme comes bundled with many plugins. Some are required and some are optional.

<ul>
<li><a href="https://wordpress.org/plugins/contact-form-7/" target="_blank">Contact From 7</a> — Allows you create contact forms.</li>
<li><a href="http://www.zootemplate.com/wordpress-plugins/clevervcaddon" target="_blank">Clever Visual Composer Addon</a> — An untimate addon for Visual Composer and Zoo Theme Core.</li>
<li><a href="https://codecanyon.net/item/clever-mega-menu-for-visual-composer/19228144" target="_blank">Clever Mega Menu</a> — Mega Menu for Visual Composer. An ultimate responsive mega menu for WordPress with the ease of visual editing.</li>
<li><a href="https://github.com/envato/envato-wordpress-toolkit" target="_blank">Envato Wordpress Toolkit</a> — This toolkit plugin establishes an Envato Marketplace API connection to take advantage of the new wp-list-themes & wp-download methods created specifically for this plugin.</li>
<li><a href="http://codecanyon.net/item/visual-composer-page-builder-for-wordpress/242431" target="_blank">WPBakery Visual Composer</a> - This is a drag and drop frontend and backend page builder plugin that will save you tons of time working on the site content. This is a premium plugin and comes bundled with your theme.</li>
<li><a href="https://wordpress.org/plugins/meta-box/" target="_blank">Meta Box</a> — Create custom meta boxes and custom fields in WordPress.</li>
<li><a href="http://codecanyon.net/item/slider-revolution-responsive-wordpress-plugin/2751380/" target="_blank">Slider Revolution</a> - Allows you to create a responsive(mobile friendly) or fullwidth slider with must-see-effects and meanwhile keep or build your SEO optimization. This is a premium plugin and comes bundled with your theme.</li>
<li><a href="https://wordpress.org/plugins/WooCommerce/" target="_blank">WooCommerce</a> — WooCommerce is a powerful, extendable eCommerce plugin that helps you sell anything. Beautifully.</li>
<li><a href="https://wordpress.org/plugins/wp-instagram-widget/" target="_blank">WP Instagram Widget</a> — WP Instagram widget is a no fuss WordPress widget to showcase your latest Instagram pics</li>
<li><a href="https://wordpress.org/plugins/image-widget/" target="_blank">Image Widget</a> — Image Widget is a simple plugin that uses the native WordPress media manager to add image widgets to your site.</li>
<li><a href="https://wordpress.org/plugins/newsletter/" target="_blank">Newsletter</a> — Newsletter is a real newsletter system for your WordPress blog: perfect for list building, you can easily create,
send and track e-mails, headache-free. It just works out of box!</li>
</ul>

#### Theme Setup Wizard
---

After you have successfully uploaded zoo-navigator.zip, you proceed to the active theme and start installing plugin and demo content.

This step allow you install all required plugins and sample data of theme for your site.

Install demo content: After you activate the theme or active path Apperance/Theme Setup Wizard

<blockquote>Note: You can skip step you don't want setup/install. </blockquote>
<ol>
 <li> Welcome to theme setup wizard. Let's Go!</li>
 <img src="./images/step1.png" alt="theme-customizer">
 </li>
 <li> Check your system environment (Minimum system require)</li>
 Make sure your site pass all system require before go next step.
 <ul>
 <li>XML Parser : SimpleXML</li>
 <li>PHP Version : 5.4</li>
 <li>PHP Memory Limit : 128Mb</li>
 <li>WordPress Version : 4.7</li>
 <li>Maximum Execution Time : 3600ms</li>
 <li>Maximum Upload File Size : 64Mb</li>
 <li>Server Max Post Size : 128Mb</li>
 </ul>
 <img src="./images/step2.png" alt="theme-customizer">
 <li> Setup a Child Theme</li>
 <ul>
 <li>Create child theme</li>
 </ul>
 <img src="./images/na_step7.png" alt="theme-customizer">
 <li> Setup Plugins</li>
 <ul>
 <li>WPBakery Visual Composer Installation required</li>
 <li>Slider Revolution Installation required</li>
 <li>Clever Visual Addon Installation required</li>
 <li>Clever Portfolio Installation required</li>
 <li>Contact Form 7 Installation required</li>
 <li>WooCommerce</li>
 <li>Meta Box Installation required</li>
 <li>Newsletter Installation required</li>
 <li>Zoo Framework Installation required</li>
 </ul>
 <img src="./images/na_step3.png" alt="theme-customizer">
 <li>Import Sample Content</li>
 <ul>
 <li>User</li>
 <li>Categories</li>
 <li>Tags</li>
 <li>Terms</li>
 <li>Posts</li>
 <li>Widget</li>
 <li>Options</li>
 </ul>
 <img src="./images/na_step4.png" alt="theme-customizer">
 <li>Select site demo</li>
 <img src="./images/na_step5.png" alt="theme-customizer">
 <li>Congratulations! Your website is ready!</li>
 <img src="./images/na_step6.png" alt="theme-customizer">
</ol>
### Child Theme
---

Zoo Navigator’s main download folder includes a child theme. A child theme is a theme that has all the functionality and styling of another theme; referred to as the parent theme. Child themes are the recommended way of modifying the code of an existing theme, since a child theme preserves all custom code changes and modifications; even after a theme update. If you modify code directly from a parent theme, and then update the parent theme, your changes will be lost.

Although child themes can be a great way to add custom changes to Zoo Navigator, they are most often used to customize core code taken from the parent theme. Because of this, please be aware that customizations of this nature fall outside our scope of support, and we will be unable to assist you with any issues that may arise. The Fusion child theme is primarily inserted in the package for developers’ convenience.

Always use a child theme when modifying core code. Child themes can also be used for custom CSS applications, template file modifications, and custom PHP functions and/or hooks. There are two ways to modify a child theme. Bear in mind that using child themes is no guarantee that an update of custom code on the parent theme will not require further maintenance.

<blockquote>Note: If you want to make changes in theme’s templates or functions, we recommend that you install child theme and make changes there. To learn more about the purpose and basis of creation of child theme, visit WordPress Codex on <a href="http://codex.WordPress.org/Child_Themes"> http://codex.WordPress.org/Child_Themes</a>.</blockquote>

## Update theme & plugin
---

### Update theme
---

#### Update using FTP
  ---

Please note: make a backup of the theme prior to updating.
 The theme is located in wp-content/themes/zoo-navigator.
 Go to <a href="http://themeforest.net/downloads">http://themeforest.net/downloads </a>to download latest version of the theme. The theme is located inside the downloaded zip in "Theme files" folder.
 Unzip the theme zip file (zoo-navigator.zip) into wp-content/themes/ folder. Make sure this folder is named "zoo-navigator" (replace with old).
 It seems scary but you really won’t loose any of your data. The only exception is if you have made edits to theme files like header.php, footer.php etc. These changes will need to made again to the new files. But all of your content and theme settings are preserved.

#### Update using WordPress Envato Market (Automatic Updates)
---

The Envato Market plugin can install WordPress themes and plugins purchased from ThemeForest & CodeCanyon by connecting with the Envato Market API using a secure OAuth personal token. Once your themes & plugins are installed WordPress will periodically check for updates, so keeping your items up to date is as simple as a few clicks.

You can add a global token to connect all your items from your account, and/or connect directly with a specific item using a singe-use token & item ID. When the global token and single-use token are set for the same item, the single-use token will be used to communicate with the API.

Step 1: Installing the Envato Market plugin

The latest version of the Envato Market plugin can be <a href="http://envato.github.io/wp-envato-market/dist/envato-market.zip">downloaded</a> from the <code>gh-pages</code> branch as a WordPress installable package. DO NOT click the Github "Download ZIP" button, this plugin is meant to be installed in the WordPress <code>plugins</code> directory as <code>envato-market</code> and Github will not package the plugin correctly.

<ol>
<li>Download the <code>envato-market.zip</code> and unpack the archive.</li>
<li>Upload <code>envato-market</code> to the <code>/wp-content/plugins/</code> directory.</li>
<li>Activate the plugin through the 'Plugins' menu in WordPress.</li>
<li>Click the 'Envato Market' menu in WordPress and connect to the API.</li>
</ol>

Step 2

You should now be connected to your Envato account, and ready to update the theme:

<ol>
 <li>Click the Themes tab on top of the page.</li>
 <li>And finally, click the Install link in the notification box to update to the latest version.</li>
</ol>

### Update Plugin
---

When the new versions of the theme integrated plugins are available, they are always included in the latest theme update. We always include plugin need update in the <code>wp-content/themes/zoo-navigator/lib/plugins</code>.

---

This guide only apply for Requires plugin update (with Revolution Slider, Visual Composer, Clever Visual Composer Addon...).

We will tell you how to update plugin then please follow the same procession to update Revolution Slider and Visual Composer.
 
After update theme with new version of required plugins, you will got notice at top admin page. Follow this guide for update required plugins.
<ol>
<li>On notice block, click to Begin updating plugins
<img src="./images/update-plugin-1.png" alt="Setup your Envato Market"></li>
<li>At page update plugin, check to plugins you want update, select Update at option Bulk Action and click to Apply. Or you can click to Update below name of plugin.
<img src="./images/update-plugin-2.png" alt="Setup your Envato Market"></li>
<li>Wait a miniute and plugins will update to new version.
<img src="./images/update-plugin-3.png" alt="Setup your Envato Market"></li>
</ol>

## Theme Settings
---
This theme takes advantage of the WordPress Live Customizer, where you can tweak all design-related settings and see the effect of the changes on the fly. Use it to preview and modify many of your site’s appearance settings, significantly improving the way you work with the theme.

<blockquote>
Note:
<ul>
<li>After each step, do not forget to choose Save & Publish to apply your configuration</li>
<li>Options in these parts have lower priority than ones in Page (override by page options), i.e options in Customize are are default configuration for Page.</li>
</ul>
</blockquote>

To start using the Customizer, please go to WordPress Admin > Appearance > Customize. In the Customize panel you will see the following tabs:
<img src="./images/na_customize.png" alt="theme-customizer">

### General
---

This panel allow you control site layout and page loader.

### Site Identity
---

This panel allow you control all information of your site, logo, site name, site description, favicon...

#### Uploading your logo
---

By default the theme displays the site title in the Header Theme Area. You can easily change it and display the logo image instead by following these simple steps:
Logo padding top, padding bottom allow you change white space top and bottom of logo.

<ol>
 <li>Open the WordPress Admin › Appearance › Customize > Site Identity</li>
 <li>Upload the desktop logo and set its width and height</li>
 <li>Add sticky logo to field Site Logo - Sticky if you have different logo when header is sticky.</li>
</ol>

#### Uploading favicon
Put your favicon to field Site icon

### Header Image & Header
---

#### Header Image
---

This option allow you add backgound for Header

#### Header
---

On this panel, you can select and control layout for Header as disable top header, set header sticky ...
<img src="./images/na_header_layout.png" alt="Header Options">

### Footer
---

All options about layout of footer user can config at here.
<ul>
 <li>Navigate Appearance > Customize > Footer</li>
 <li>Do some settings as the following image:</li>
</ul>

### Blog
---

All option about blog, single post, post archive, categories page you can config at this tab.
<ol>
<li>Blog archive: On this section, you can control layout and content display of the blog, post archive and categories.</li>
<li>Blog single: All options about layout of single post will on this section.</li>
<li>Blog sidebar: Allow control sidebar for all blog page.</li>
</ol>

### WooCommerce
---

If you want config layout for WooCommerce you can config at this panel.
#### Shop Page
---

All option about layout of shop page will appear at this section.
You can control sidebar, active/deactive Catalog Mode, items product display width of product item. Another this panel allow you control to per parameter will display of product
<img src="./images/shop-page.png">

#### Single Product page
---

You can select layout for single product page, sidebar, and active/deactive some feature of single product.
<img src="./images/na_woo_sing.png">

### Style
---

If you want change color, font, background of site you can change it on this panel.
<img src="./images/na_typepo.png">
<blockquote>Note: Have to many options about color and typo on this panel, so try find to right block you want change before change. All change on this panel will apply for all page of site. All options will defaults settings if you leave it blank. On page some options will use options of Page, so if you want change style for only one page, you can do it by using page options (Below content block of page).</blockquote>

## Menus
---

This theme uses WordPress built-in menus feature which can be found in your WordPress Dashboard > Appearance > Menus.

This theme has 2 menu locations

<ol>
 <li>Primary Menu</li>
 <li>Mobile Menu</li>
</ol>

To setup a new menu, please follow the steps below. Its best to already have your pages created, even if they are blank pages.

<img src="./images/menus_edit.png" />
<ul>
 <li>Navigate to Appearance > Menus page</li>
 <li>Click the Create a new menu link to make a new menu. Enter the name then hit Create Menu.</li>
 <li>To add a menu item, you can easily select one of your already made pages on the left hand side and click Add to Menu.</li>
 <li>You can also add menu items by entering a custom name and custom link into the Links box.</li>
 <li>You can manage your menus using the drag and drop functionality. To create a dropdown menu, simply drag a menu item below and slightly to the right of another menu item and it will lock into place and create a dropdown section.</li>
 <li>After setting up your menu, select the menu you just created as the Primary Navigation in the Menu Settings and Create a new menu and select it as the Top Menu Navigation in the Menu Settings.</li>
 <li>Once its all done, make sure you click the Save button.</li>
 <li>You can change menus locations in any time from Manage Locations tab .</li>
</ul>
<ul>Once you've created your menu, you need to assign it to the menu location which you would like to use it for. You can do so by setting it under the Manage Locations tab.</ul>

<ul>You can also set the top header menu, and footer menu here, so if you would like to use both make sure you create a menu for each area.</ul>

## Pages & Posts
---
<blockquote>NOTES: Below content block you can find block Layout Options, Color options with page. Use it if you want change layout for only this page.
 
<img src="./images/page-opts.png"/>
</blockquote>
In this section you can find all the information needed to create your pages, your blog posts and your portfolio items. Many options for this final destination pages are equal to all of these types.

Simple pages, blog post and portfolio items are usually referred in WordPress as static contents. That means that the information displayed on a page doesn’t change, or doesn’t change often. A great example of a page would be the About or Contact Us section of a website, a simple Blog Post or a Portfolio item page where you showcase your case study. This theme includes several page options to work with. All of this is done in the Page Options section of your page WordPress admin.

To create a new Page, Post or Portfolio you just need to follow this steps:

<ol>
<li>Navigate to Pages, Posts or Portfolio in your admin sidebar and click Add New option.</li>
<li>Input a new name for your page, then find the Page Attributes box on right side.</li>
<li>Select any number of page options in the Page Options box.</li>
<li>Content for your page goes in the editing field, use the Visual, Text editor or use the Page Builder for advanced layouts.</li>
</ol>

<blockquote>NOTES: You must install Virtual Composer to be ensured this theme run extend options and custom page options smoothly.</blockquote>

### Add New Page
---

<ul>
 <li>Navigate Page > Add New</li>
 	<img src="./images/add-new-page.png" />
</ul>
<ul>
 <li>Input the name for your page</li>
 <li>Select any number of page options in the Page Options box.</li>
 <li>Content for your page goes in the editing field, use the Visual or Text editor. Page content is mainly built using Shortcodes, see the Shortcodes section for how to use them. You can also use our demo content, see the corresponding section of this document for the demo code of each page</li>
</ul>

### Visual Composer 
---

When use Visual Composer you can find many ways to creat pages through using RIT elements. It will make your pages with full of features and visual friendly. For more advance options, we build more extra options. 
<ul>
 <li>Go to Pages > Add New then choose BACKEND EDITOR</li>
 <img src="./images/add-new-page-vc.png" />
</ul>
<ul>
 <li>Here is the place you work with Visual Composer:</li>
 <img src="./images/vc-backend.png" />
</ul>
<ul>
 <li>Now choose Add new element and start your editting:</li>
 <img src="./images/vc-add-new-element.png" />
</ul>
<ul>
 <li>We have additional options for you to create page, portfolio, page layout and product, which lie in the CleverSoft tab:</li>
 <img src="./images/vc-rit-shortcode.png"/>
</ul>

### Predefined Page Layouts
---

<ul>
 <li>All Pages on the Demo Page are created through a combination of shortcodes. You can found their setting in Pages >All Pages.</li>
 <li>The default WordPress themes  give you the option to change the page layout on the right hand side of the page you are editing.  The default template has one sidebar.</li>
 <li>For each pages you can setting layout by edit Page Attributes, Page Background Options and Meta Options :</li>
 <li>Page Attributes:
 <img src="./images/page-attributes.png" /></li>
 <li>Page Options & Layout Options:
 <img src="./images/page-option.png" />
 </li>
</ul>

## Homepage Settings
---

By default, your homepage will also display your post feed, listing all of your latest posts for visitors to see. If you would like to instead have your homepage be a static page and your post feed display on a separate page, you can follow these instructions.

For this tutorial, we will be naming our static homepage "Home" and our post feed page "Blog".

Next, navigate to Settings > Reading. At the top of this screen, you'll see a section titled "Front page displays". Click the little bubble next to the "A static page" option. 
From this option's "Front page" drop-down menu, select your newly created "Home" page. 
From the "Post page" drop-down menu, select your newly created "Blog" page.

<ul>
 <li>The Front Page Display setting allows you to choose what content appears on your blog’s front page. You can decide if you want posts, or a static Page, displayed as your blog's front (main) page.
 <ul>
 <li>Front page: Select in the drop-down box the actual Page that you want displayed as your front page.In this case, we choose Home.</li>
 <li>Post Page: Select in the drop-down box the name of the Page that will now contain your Posts. If you do not select a Page here, your Posts will only be accessible via other navigation features such as category, calendar, or archive links.</li>
 </ul>
 </li>
 <li>Blog pages show at most lets you choose how many blog posts are displayed per page. The default setting is 10 posts per page.</li>
 <li>Syndication feeds show the most recent lets you set how many blog posts will be sent out at once via your RSS feed (located at <a href="http://your-domain.WordPress.com/feed/">http://your-domain.WordPress.com/feed/</a>).</li>
 <li>For each article in a feed you can select Full text or Summary. Full text means that the entire contents of a post are included in the feed. Summary means that only the first 55 words are included in the feed, along with the option to continue reading the rest of the post.</li>
 <li>After that Save Changes to apply the changes to your WordPress site.</li>
</ul>

The last step involves adding your "Home" and "Blog" pages to your navigation menu. To do so, go to Appearance > Menus. Click the "Pages" drop-down menu on the left, check the boxes next to your "Home" and "Blog" pages, and add them to the menu. Drag and drop them to wherever you'd like them to be positioned in your menu. Be sure to save when finished.

Now, when you refresh your site, your homepage will display your newly created "Home" page and your "Blog" page will now display your post feed.

## Slider
---

In this theme, we use Revolution Slider for building sliders on homepages. Revolution Slider is an innovative, responsive WordPress Slider Plugin that displays your content the beautiful way. Whether it’s a Slider, Carousel, Hero Scene or even a whole Front Page, the visual, drag & drop editor will let you tell your own stories in no time!

Everything you need to know for building your sliders or just for customizing imported slider from our demo is in this plugin's documentation. We highly recommend you to take a look at it here: <a href="https://www.themepunch.com/revslider-doc/slider-revolution-documentation/" target="_blank">Revolution Slider Documentation</a>.

## Cause / Campaign 
---

Adding a fundraising campaign in Charitable is designed to be a straightforward process.
<div style="width: 100%;"><iframe src="https://www.youtube.com/embed/xv2bTQ8twKQ?feature=oembed" frameborder="0" allowfullscreen="" name="fitvid0" width="100%" height="560"></iframe></div>

### Creating a New Campaign 
---

<ol>
<li>In your WordPress dashboard, go to Charitable > Add Campaign.</li>
<li>Enter your campaign title. Try something action-oriented or catchy; your goal is to attract people’s attention.</li>
<li>Add a short description. Aim for something short but sweet that clearly communicates the purpose of your campaign.</li>
<li>If you have a specific fundraising target, you can add a fundraising goal.</li>
<li>If your campaign needs to end on a certain date, you can set an end date. Leave this blank for ongoing fundraising campaigns.</li>
<li>Next, scroll down to the Donation Options area. Here, you can add suggested donation amounts and choose whether to allow custom donations, where the donor can donate any amount they choose.</li>
<li>Next, click on Extended Description. Write more about your campaign or add photos.</li>
<li>If you have a lot of campaigns, you can group them by category or tag with the Campaign Categories and Campaign Tags boxes on the right side of the screen.</li>
<li>Finally, if you have a photo or image to go along with your campaign, you can add this using the Featured Image box.</li>
<li>Now it’s a good idea to take a look at your campaign. Click the Preview button inside the Publish box to see how your campaign is looking.</li>
<li>Once you are happy with your campaign, click on Publish. Your fundraising campaign is now live!</li>
</ol>
<img src="./images/add-campaign-diagram.png">

### Adding Payment Gateways 
---

#### Adding Paypal Gateways & Offline Donations 
---

Paypal and Offline Donations are available out of the box.
<ol>
<li>To activate them, go to Charitable > Settings and click on the Payment Gateways tab.</li>
<li>Click Enable Gateway, then Gateway Settings.</li>
<li>For Offline Donations, add donation instructions. For PayPal, add your PayPal email address. Lastly, click Save Changes.</li>
</ol>

#### Adding Stripe Gateways 
---
 
After the extension is installed, you will need to add your license keys. We assume that you already have a Stripe.com account activated.

<ol>
<li>Go to Charitable > Settings.</li>
<li>Click on the Payment Gateways tab.</li>
<li>You will see Stripe listed as one of the gateway options. Click Enable Gateway to activate it.</li>
<li>After the page reloads, you will see a new button called Gateway Settings. Click this.</li>
<li>On the following page, you can add your license keys, as well as setting the gateway label (this is what donors will see when choosing their payment method). If you are not sure where to find your Stripe keys, see the section below:

<img src="./images/add-stripe-gateway.png"></li>
<li>When you have finished adding your settings, click Save Changes.</li>
</ol>

Finding Your Stripe Keys

You can access your Stripe keys via your Stripe dashboard.
<ol>
<li><a href="https://dashboard.stripe.com" target="_blank">Log into your Stripe account</a>.</li>
<li>Click on the “Account Settings” link under the dropdown menu in the top right corner.</li>
<li>You may be prompted to re-authenticate with your password.</li>
<li>Next, click on the “API Keys” tab. You will see all your keys listed here.</li>
</ol>

Supporting Refunds
Charitable Stripe supports automatic refund processing, which means that donations that are refunded via the Stripe dashboard are automatically refunded in your website.
To set this up, you will need to register a new webhook in your Stripe account.
<ol>
<li>Log into your <a href="https://dashboard.stripe.com" target="_blank">Stripe dashboard</a>.</li>
<li>From the menu in the top right corner, click on Account Settings.</li>
<li>Click on the Webhooks tab.
<img src="./images/stripe-dashboard.png" ></li>
<li>Click on + Add Endpoint.</li>
<li>The webhook URL takes the form of https://yoursite.com/?charitable-listener=stripe</li>
<li>Click Create Endpoint.</li>
</ol>

#### Adding Authorize.Net Gateways 
---

After the extension is installed, you will need to add your license keys. We assume that you already have an <a href="http://www.authorize.net" target="_blank">Authorize.Net account</a> activated.
<ol>
<li>Go to Charitable > Settings.</li>
<li>Click on the Payment Gateways tab.</li>
<li>You will see Authorize.Net listed as one of the gateway options. Click Enable Gateway to activate it.</li>
<li>After the page reloads, you will see a new button called Gateway Settings. Click this.</li>
<li>On the following page, you can add your license keys, as well as setting the gateway label (this is what donors will see when choosing their payment method). If you are not sure where to find your Authorize.Net keys, see the section below.</li>
<li>When you have finished adding your settings, click Save Changes.</li>
</ol>
<img src="./images/add-authorizenet-gateway.png">

Finding Your Authorize.Net Keys
To access your API Login ID and Transaction key, login to your Authorize.Net account at <a href="https://account.authorize.net/" target="_blank">https://account.authorize.net/</a> and click Account > API Login ID and Transaction Key in the Merchant Interface.
<img src="./images/authorizenet_API_Login_ID_and_Transaction_Key.png">

### Changing a Donation’s Status 
---

There are two ways to change a donation’s status in Charitable.

#### Update donations in bulk 
---

<img src="./images/donations-bulk.png">
<ol>
<li>In your WordPress dashboard, go to Charitable > Donations.</li>
<li>Tick the box next to each donation that you would like to update.</li>
<li>Change the “Bulk Actions” dropdown to the status you would like to change the donations to.</li>
<li>Click Apply to update all of the selected donations.</li>
</ol>

#### Update individual donations 
---

<ol>
<li>From the Charitable > Donations page, click on the “View Donation Details” link for the donation you would like to view.</li>
<li>On the next screen, change the donation status by selecting the status you would like to change it to. The page will automatically reload.</li>
</ol>

### Widgets 
---

### Creating Couses/Campaigns Page 
---

Just like by any page you can start editing your couses/campaigns page by entering the title and main text in the WYSIWYG editor. You have an option to use Visual Composer (backend and / or frontend editor) to build your couses/campaigns page with any RIT shortcodes

### Widgets 
---

Charitable comes with five widgets built-in. To manage your widgets, log into your WordPress dashboard and go to Appearance > Customize. Open up the Widgets panel (in certain themes, this panel may be named something else).
After choosing the widget area that you want to manage, you can click on any existing widgets to edit them, drag them up or down to re-arrange their position, or click the Add a Widget button to add a new widget.

#### Campaigns 
---

Display a list of campaigns with the Campaigns widget.
Available options:
<ul>
<li>Title: The title of your widget. This may be left blank.</li>
<li>Number of campaigns to display.</li>
<li>Show thumbnail: If checked, the campaign thumbnails will be shown above their titles.</li>
<li>Order: Display campaigns ordered by when they were published (newest shown first) or by how soon they will be finishing (endless campaigns will be excluded).</li>
</ul>

#### Campaign Donation 
---

Display a simple donation widget in your sidebar. Your donors choose their donation amount and are redirected to the campaign donation page to finalize their donation.
Available options:
<ul>
<li>Title: The widget title to be displayed at the top of the widget.</li>
<li>Campaign: Show a particular campaign’s form, or choose “Campaign currently viewed” to show a donation form for the current campaign on individual campaign pages (the widget will be hidden on all other pages).</li>
</ul>

#### Campaign Categories / Tags 
---

Display a list of your campaign categories or tags.
Available options:
<ul>
<li>Title: The widget title to be displayed at the top of the widget.</li>
<li>Taxonomy: Either “Categories” or “Tags”.</li>
<li>Show count: Whether to show the number of campaigns in each category/tag.</li>
<li>Hide empty: Whether to hide categories or tags without any campaigns.</li>
</ul>

#### Donation Stats 
---

Display a simple widget to show the number of campaigns, amount donated and number of donors.
Available options:
<ul>
<li>Title: The widget title to be displayed at the top of the widget.</li>
</ul>

#### Donors 
---

<img src="./images/widget-donors.png">
Display a list of donors. This can be used to show donors for a specific campaign or for all campaigns.
Available options:
<ul>
<li>Title: The widget title to be displayed at the top of the widget.</li>
<li>Number of donors to display.</li>
<li>Order by: Order donors by how recently they donated (most recent shows first) or by the amount they donated.</li>
<li>Show donors by campaign: Display donors who donated to any campaign or limit it to show donors who donated to a specific campaign. Set to “Campaign currently viewed” to just show the donors for the current campaign on individual campaign pages (the widget will be hidden on all other pages).</li>
<li>Group donations by the same person: Choose whether multiple donations by the same person should be grouped together, or whether to show the same donor multiple times.</li>
<li>Show donor’s name: Tick the box to show the donor’s name.</li>
<li>Show donor’s pledge amount: Tick the box to show how much the donor gave. If multiple donations by the same person are grouped, this will show the total amount donated.</li>
<li>Show donor’s location: Show the donor’s city, state and/or country.</li>
<li>Hide if there are no donors: Tick the box to hide the widget when there are no donors yet.</li>
<li>Hide anonymous donors: Hide donors who chose to donate anonymously. Requires <a href="https://www.wpcharitable.com/downloads/charitable-anonymous-donations/">Charitable Anonymous Donations</a>.</li>
</ul>

## Blog
---

### Creating a Blog Page
---

By default Wordpress displays blog posts in front page but this theme uses a static page as its front page. So we'll have to create a new page called Blog and will use it to display the blog posts.

To display your blog posts, you will then need to create a page that includes the Blog, Recent Posts or Posts Carousel page builder asset.

<ol>
<li>Navigate to Pages > Add New.</li>
<li>Enter the title Blog and click on Publish.</li>
</ol>
<blockquote>Note: DO NOT set the posts page in Settings > Reading, as this will force your page to show the archive layout, and not follow your created page.</blockquote>

### Creating a Post
---

The Posts menu option on the left is where you add blog posts. To add a new blog post, select the Posts > Add New option from the left hand WordPress menu.

Once you're on the Add New Post screen, you will then be able to set a title for the blog post, add the body content, and also provide all the meta information such as extra details and media. In the blog meta you can set the image for the thumbnail, and also the media type for the detail page.

You can use the Swift Page Builder to create the content of the item, which effectively allows you to have limitless possibilities for what you can display, and also how you can display it. If you do use the Page Builder to create the content, you will want to provide a custom excerpt (can be found in the item meta).
The item meta also contains post slider options, allowing you to set the image for the slide that will show if the item appears in a posts slider, and also the display for the caption.

## Shop
---

### Setup WooCommerce
---

Moza is an ecomemrce WordPress theme and WooCommerce is the main plugin which provides all functionalities about selling products online. If you are new with WooCommerce plugin, please take a look at its' documentation first - <a href="https://docs.woocommerce.com/">WooCommerce Documentation</a>

After WooCommerce installed and activated on your website, it will require you to do some setup steps. You should follow it to complete the installation. In these steps, WooCommerce will recommend you to create some pages such as: Shop, Checkout, Cart, My Account page.

If you imported our demo content before, you can skip this step to avoid duplicate these pages. Because they are imported from our demo content. And if you skip this step, you must go to WooCommerce > Settings and select these pages manually.

The Products menu option on the left is where you can add and manage products. To add a new product, select the Products > Add Product option from the left hand WordPress menu.

### Add A Product
---

Once you're on the Add New Product screen, you will then be able to set a title for the product item, add the description, and also provide all the data information such as price, stock status, attributes, etc.

You can add a featured image in the right column box, and above that set any other gallery images. Any images you add here will be used for the product slider images.

### Create a new Category
---

Creating categories is one of the easiest ways to organize your products. The more products you have, the more benefit you will receive by organizing into multiple categories. What do categories do? They allow your customers to easily sort and navigate your products.
<ul>
 <li>To set up your product categories, click the Categories link under Products Menu in your WordPress Dashboard.</li>
</ul>
<img src="./images/create-shop-category.png" alt="create-shop-category.png"/>

### Setting A Shop Page
---

To display your products, you will want to create a page, leave the content blank, and then set the Shop Base Page in WooCommerce > Settings > Pages.

If you would like to add products within a page that you create using the page builder, you can also use the Products & Products (Mini) assets.

### Order Tracking Page
---

If you want to have `Order Tracking` page, you must create it manually. But if you imported our demo content before, you can use the page we created for you.

To create `Order Tracking` page, please go __Pages > Add New__ to create a new page. You can name this page as "Order Tracking" or anything else you want. Inside that page content, please insert this shortcode: `[woocommerce_order_tracking]`

After created the `Order Tracking` page, please go to __WooCommerce > Settings__ then select __Checkout__ tab. You will see an option for selecting what page is `Order Tracking` page.
<img src="./images/woocommerce-order-tracking-setting.png">

### Currency
---

#### Config Currency
---

To change your shop currency settings go to: __WooCommerce > Settings > General > Currency Options__ and select your desired currency from the Currency drop down.

- __Currency__ – Choose the currency the store will be priced in.
- __Currency Position__ – Choose whether the currency symbol is placed to the left or right of the price.
- __Thousand Separator__ – Choose the character to use for the thousand separator.
- __Decimal Separator__ – Choose the character to use for the decimal separator.
- __Number of Decimals__ – Choose the number of digits to appear after the decimal separator.

#### Multiple Currencies
---

WooCommerce only allows for one base currency at a time. If you want to have multi-currencies in your website, we recommend you to use this plugin - <a href="https://wpcodefactory.com/item/currency-switcher-woocommerce-wordpress-plugin/">Currency Switcher for WooCommerce</a>.

This plugin provides ability to add more currencies to your store. It also provide shortcodes and a widget to display currency switcher. But in Moza theme, we create a eye catching switcher that match with theme's style. Therefore, you don't need to add the switcher manually, just activate this plugin and add more currencis as you wish.

## Language Translations
---
<blockquote>Note: You can use <a href="https://wordpress.org/plugins/polylang/">Polylang</a> and <a href="https://wordpress.org/plugins/loco-translate/">Loco Translate</a> to translate the theme into multiple languages.</blockquote>
All of our Themes are able to be translated into any language. The process of translating the theme is a user responsibility. In this case, we recommend that you use the very popular WPML plugin.

To translate the static strings, if you aren't using WPML then I recommend downloading <a href="http://www.poedit.net/">POEdit</a> (or any Text Editor: TextWrangler, TextEdit, NotePad++). Once you have installed please follow the steps below:

<ul>
 <li>Open the /wp-content/themes/zoo-navigator/languages/ folder and duplicate the en_US.pot file, then rename it to your desired language code. For example; for German you need to re-name it as de_DE.pot for Spanish es_ES.pot for Turkish tr_TR.pot etc. You can find all the codes from this link <a href="http://codex.WordPress.org/WordPress_in_Your_Language">http://codex.WordPress.org/WordPress_in_Your_Language</a>.</li>
 <li>Then you will need to open the .pot file in POEdit. Once opened, you will see all strings that needs to be translated. Type the translation of a string into the "Translation" column. Do not delete or edit "Original string" part.</li>
 <li>When you finish translating, save the file. This will create an .pot file in the same directory.</li>
 <li>Upload the new files into the languages folder of the theme /wp-content/themes/zoo-navigator/languages/ and then follow this guide: <a href="http://codex.WordPress.org/Installing_WordPress_in_Your_Language#Single-Site_Installations">http://codex.WordPress.org/Installing_WordPress_in_Your_Language#Single-Site_Installations</a></li>
</ul>

In order to keep your translation after each theme update, please send us the two files (MO and PO) and we will bundle them with the theme.

## Credits
---

<ul>
<li><a href="https://wordpress.org/" target="_blank">Wordpress</a> by WordPress.org.</li>
<li><a href="http://www.woothemes.com/WooCommerce/" target="_blank">WooCommerce</a> by WooThemes</li>
<li><a href="http://themepunch.com/revolution/" target="_blank">Slider Revolution</a> by ThemePunch</li>
<li><a href="http://vc.wpbakery.com/" target="_blank">Visual Composer</a> by WPBakery</li>
<li><a href="https://wordpress.org/plugins/yith-WooCommerce-wishlist/" target="_blank">YITH WooCommerce Wishlist</a> by yithemes</li>
<li><a href="http://contactform7.com/" target="_blank">Contact Form 7</a> by Takayuki Miyoshi</li>
<li><a href="https://github.com/envato/envato-wordpress-toolkit/" target="_blank">Envato Toolkit</a></li>
<li><a href="http://getbootstrap.com/" target="_blank">Bootstrap</a> by Twitter</li>
<li><a href="http://fontawesome.io/" target="_blank">Font Awesome</a> by Dave Gandy</li>
<li><a href="https://github.com/thomasgriffin/TGM-Plugin-Activation" target="_blank">TGM-Plugin-Activation</a> by Thomas Griffin</li>
<li><a href="https://wordpress.org/plugins/newsletter/" target="_blank">Newsletter</a> by Stefano Lissa & The Newsletter Team </li>
<li><a href="https://wordpress.org/plugins/meta-box/" target="_blank">Metabox</a> by Anh Tran</li>
</ul>

## Troubleshooting
---

### Visual Composer / Slider Revolution — Cannot update, asking for License Activation
---

Question:

I'm trying to update the Visual Composer / Slider Revolution, but I receive this error message "To receive automatic updates license activation is required. Please visit Settings to activate your Visual Composer."

If I try to activate Visual Composer I get the message "It seems that you do not have any valid license for Visual Composer. What does it mean? It may be so that you got Visual Composer by purchasing WordPress theme which does not grant you with direct license for Visual Composer."

What do I have to do?

Answer:

Since Visual Composer is coming as a bonus / free with the theme, users don't get to have their own purchase codes, but it's not required, assuming you need it to be able to update the plugin. The option to activate a license was left open for those who already have a license.

We always make sure to include the latest version when we release theme updates, so go to this section "<a href="#update-plugin">Update Plugin</a>" to know how to you update the plugins coming with the theme.

### How to speed up your theme?
---

Our support team often gets asked questions such as "How to speed up my website, the theme's demo is much faster, what plugins are you using?".
A site can get to be slow for many reasons, from server and domain setup, to bad plugins or themes, image sizes, etc. From the theme's perspective, we've been able to achieve great results with Zoo Navigator so the theme should help you in your mission of optimising your site for better performance.
After valuable user feedback, extensive research and testing, we spotted several opportunities to make Zoo Navigator faster and more efficient. The goal was to keep the theme and its code as clean and fast as possible while packing the same awesome features people love without slowing things down. By minifying JavaScript and CSS code, we managed to improve performance and speed up page loading, making both visitors and search engines happy.
We use the following plugins to get the best of Zoo Navigator in terms of performance and loading times.
<ul>
<li><a href="https://wordpress.org/plugins/wp-super-cache/" target="_blank">WP Super Cache</a> (default settings)</li>
<li><a href="https://wordpress.org/plugins/bwp-minify/" target="_blank">Better WordPress Minify</a> (default settings)</li>
<li><a href="https://wordpress.org/plugins/stone-html-compressor/" target="_blank">Stone HTML Compressor</a> (no settings)</li>
</ul>

Beside Server Caching, Minifying and HTML compression, we've also made sure the Browser Caching is enabled for the site by adding the following lines in the .htaccess file. 
<pre># Leverage Browser Caching by setting HTTP header expires <IfModule mod_expires.c> ExpiresActive On ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType text/css "access plus 1 month" ExpiresByType application/pdf "access plus 1 month" ExpiresByType text/x-javascript "access plus 1 month" ExpiresByType application/javascript "access plus 1 month" ExpiresByType text/javascript "access plus 1 month" ExpiresByType application/x-shockwave-flash "access plus 1 month" ExpiresByType image/x-icon "access plus 1 year" ExpiresDefault "access plus 30 days" </IfModule></pre>

A quick test on the shop catalog page with the settings above returned the following results:
<ul>
<li>Pingdom Results: Load Time: 812 ms / Requests: 62 / Page Size: 1.3 MB</li>
<li>Web Page Test Results: Load Time: 2.541 ms</li>
</ul>

Hope you'll be able to use this info to speed up your site too. Remember that each setup is different and it depend on your content, the plugins you're using, the server that hosts your site and basically all that's involved with it. If you're looking for professional help in this matter, there's always someone available for such tasks on the <a href="http://studiotracking.envato.com/" target="_blank">Envato Studio</a>. Pricing and timeline are always straightforward there and that's the main reason for recommending it.

## Change Log
---

<pre>

## Version 1.1.6 Release May 26, 2019

- WordPress 5.2.x compatibility.
- WooCommerce 3.6.x compatibility.
- Fixed some texts for translate.
- Fixed show icon youtube.

## Version 1.1.5 Release Feb 21, 2019

- Fixed falta error when install theme demo content.
- Upgrade WPBacker Page Builder to latest version 5.7

## Version 1.1.4 Release Dec 21, 2018

- WordPress 5.0.x compatibility.
- WooCommerce 3.5.x compatibility.
- Upgrade Slider Revolution to latest version 5.4.8.1
- Upgrade WPBacker Page Builder to latest version 5.6

Please notice: If you update WordPress 5.0.x, you have to update plugin WPBackery Page Builder latest version 5.6  to use page builder.

## Version 1.1.3  Release  Nov 10, 2018

- Upgrade plugin WPBakery Page Builder  to latest version 5.5.5
- Upgrade plugin Clever Mega Menu  to latest version 1.0.9

## Version 1.1.2  Release  Jul 05, 2018

- Fixed import theme demo content.
- Upgrade plugin WPBakery Page Builder  to latest version 5.5.2
- Upgrade plugin Slider Revolution  to latest version 5.4.8

## Version 1.1.1 Release Jun 04, 2018

- Fixed fatal error in shop page.
- Fixed control Header Width in Customize / Header.
- Minor css improvements.
- Minor js improvements.

## Version 1.1.0 Release May 24, 2018

- WordPress 4.9.6 compatibility
- Woocommerce 3.4.0 compatibility
- Minor css improvements
- Minor js improvements
- Upgrade WPBakery Page Builder to latest version 5.4.7
- Upgrade Slider Revolution to latest version 5.4.7.3
- Upgrade Clever Mega Menu to latest version 1.0.8

## Version 1.0.1 Release  Oct 19, 2017

- Upgrade Visual Composer to latest version 5.4.2

## Version 1.0.0 Release  Oct 13, 2017

! Initial Release

</pre>