To install this theme you must have a working version of WordPress already installed. If you need help installing WordPress, follow the instructions here: http://codex.wordpress.org/Installing_WordPress

REQUIREMENTS

To use Zaya, you must be running WordPress 4.9 or higher. We have tested it with Mac, Windows and Linux. It has been tested on Chrome, Firefox, Safari, Opera, Internet Explorer 10+.

There are system requirements in order to install and setup Zaya theme and its components properly. Make sure that you are running the latest version of WordPress, PHP version 7 or higher and MySQL version 5.6 or higher. We also recommend the following PHP configuration limits:

Recommended PHP configuration limits

Please contact your server provider to verify your current PHP limits and have them set it up again if needed.

After purchasing Zaya theme on Nictes.com, Download the Zaya.zip file and unzip it. In this zip file you have everything you need:

Zaya.zip
The main theme zip file you need to upload to your WordPress in order to install Zaya (see below). In this zip you will find the theme itself. NOTE: Do not unzip this file. Do not upload the entire Zaya.zip file you get from Nictes, upload ONLY zaya.zip.

Child Theme
Here you will fid Zaya Child Theme (zaya-child.zip).

Demo Sliders
All demo sliders we have used on our demo website. (demo-data/sliders).

Demo Default Widgets
Default widgets used for widget site footer area and default page sidebars on our demo website. (demo-data/default-data).
XML Files with demo content, which you can use for manual content import in WordPress.

Plugins
Gantry 5.4.23+ is required for Zaya to work correctly. For more details on the Gantry Framework, please visit its Dedicated Website gantry.org

Documentation
A link to this documentation.

Licensing

You can install Gantry 5 Framework via 2 ways: Upload Gantry 5 or Via WordPress Plugin Repository

Upload Gantry 5

1. To install the Gantry plugin, you’ll need to navigate to Plugins → Add New in the admin area of WordPress.
2. Browse on your Zaya Package → Plugins and find wordpress-pkg_gantry5_v5.4.23.zip file on your computer and click Install Now.
3. Once installation is done, select the Activate button to turn the Gantry 5 plugin on.

WordPress Plugin Repository

1. To install the Gantry plugin, you’ll need to navigate to Plugins → Add New in the admin area of WordPress.
   
2. The next step is simple. Use the Search Plugins field at the right-hand side of the page to search for Gantry. This will enable you to find the Gantry 5 Framework plugin.
   
3. The next thing you will need to do is select the Install Now button on the Gantry 5 Framework plugin’s box. Make sure you are installing Gantry 5 and not Gantry 4.
   
4. Once installation is done, select the Activate button to turn the Gantry 5 plugin on. This button will appear in the same place the Install Now button was before.
   
   

You can install Zaya theme via 2 ways: Via WordPress or via FTP

Via WordPress

Follow these steps below to install Zaya theme via WordPress:

1. Visit Dashboard > Appearance > Themes > Add New.
2. Click Upload Theme.
3. Browse zaya.zip file (not the theme package zip file) on your computer and click Install Now.
4. Activate Zaya theme.
   
   
   

Via FTP

Follow these steps below to install Zaya theme via FTP:

1. Login your FTP account via FTP software to access your host web server.
2. Extract zaya.zip file.
3. Upload the extracted folder zaya to wp-content/themes folder.
4. Activate Zaya theme in Dashboard > Appearance > Themes.
   

In order to get Zaya properly work you need to install some useful plugins. All these plugins are included in Zaya, you don’t need to purchase them extra!

After the theme is installed successfully you will get following message about the installation of required and recommended plugins:

1. Click on “Begin installing plugins”
2. Check all plugins, select “Install” and click on “Apply”

REQUIRED PLUGINS
In order to use Zaya in its full, please note, that following plugins SHOULD BE installed during the theme installation (see installation instructions above):

• Gantry 5 – Framework for Gantry 5 based themes.
• Gantry 5 Outline Picker – allows you to choose your desired Gantry 5 outline when creating pages.

RECOMMENDED PLUGINS

In addition, you can take an advantage of enriching your Zaya’s experience with following recommended plugins:

• WPBAKERY Page Builder – leading visual drg’n’drop page builder for WordPress
• Revolution Slider – leading slider plugin for WordPress
• WooCommerce – leading eCommerce plugin for WordPress.
• Projects – show off your recent work using our shortcode, widget or template tag.
• Breadcrumb NavXT – adds a breadcrumb navigation showing the visitor’s path to their current location.
• Contact Form 7 – one of the most popular plugins for managing contact & feedback forms
• MailChimp for WordPress – adds various highly effective sign-up methods to your site.
• Invisible reCaptcha – Google Invisible reCaptcha for WordPress.
• Social Login, Social Sharing by miniOrange – allow your users to login, comment and share with Social Networks.
• One Click Demo Import – start the website development process at the same starting point as the theme demo page, so you can quickly develop the website you want.
• Regenerate Thumbnails – useful when changing their sizes or your theme.

That’s all! Now you are ready to go on with Zaya, installed on your WP.

If you plan to modify the source code of the main parent theme (php, js, style.css, .scss) we strongly recommend to install this child theme and make such modifications inside this child theme in order to avoid any possible problems & issues by installing updates of Zaya’s main parent theme in future. You can find this child theme in your Zaya Package folder – please check for zaya-child.zip

The installation of the child theme works in the same way as the installation of the main parent theme (see description above).

IMPORTANT: DON’T TRY TO INSTALL CHILD THEME IF THE MAIN THEME IS NOT INSTALLED – THIS WILL GIVE NO RESULT

NOTE: Make sure the wp-content > uploads folder is writeable

RECOMMENDED PHP SETTINGS

In order to avoid any possible import issues because of your server and php setings, we would recommend setting following PHP values in your server’s php.ini:

• Upload Max File: – upload_max_filesize = 256M
• Max Input Time: – max_input_time = 400
• Memory Size: memory_limit = 256M
• Script execution time: max_execution_time = 400
• Post Size: – post_max_size = 512M

If you don’t have an access to the php configurtation on your server, you can try to set this values in .htaccess file:

php_value upload_max_filesize 256M
php_value max_input_time 400
php_value memory_limit 256M
php_value max_execution_time 400
php_value post_max_size 512M

Please be careful, because some of hosting companies don’t allow to change php settings directly using .htaccess. In case you have some problems after modifying your .htaccess file, log in to your FTP account and remove these modifiactions from .htaccess

Zaya comes with the plugin “One Click Demo Import”, allowing you to import the whole demo content from the main multipurpose demo site (https://zaya.nictes.com/).

This plugin is a demo importer which imports all posts/pages, sample sliders, widgets, customization, and more.

Follow these steps below to import demo via Zaya Demo Import:

1. Visit Dashboard > Appearance > Zaya Import Demo.
   
2. Before you begin, make sure all the required plugins are activated.
3. Click Import Demo Data.
   
4. After you import Zaya demo, please check your page and make sure that everything has imported correctly. If it did, you can deactivate the One Click Demo Import plugin.
5. Also, we recommend you will have to regenerate thumbnails, go to Tools > Regenerate Thumbnails.

The importing process may take up to 15 minutes.

Next step after making your general website settings would be to set your homepage – starting page of your website.

Go to “Settings -> Reading”
Select a static page option to be displayed as your front page
Choose a page from the select box “Front page” that should be your homepage
Save your changes

You are able to customize your website in Dashboard > Zaya Theme or Zaya Child Theme

COLORS

In some cases, if you will need to use transparent website navigation or header, where your logo and the main menu will be placed above some dark image or background, you will need other colors for your logo as well. In order to prevent the situation, where your logo will not be seen, for instance, because it is black on a very dark background. For such cases, you would prefer am inverted version of your logo, i.e. in white or light gray colors.

UPLOADING YOUR LOGO

The Logo particle enables you to set the image and/or text you want to have appeared as your logo for the site. Through this particle, you can add your logo to the site in a position you set in the Layout Manager.

In order to set up your logo, go to “Zaya Theme or Zaya Child Theme → Particle Defaults → Logo / Image”. As described above, here you can set:

We recommend to initially prepare your logo in the right size in order to avoid some unwanted artefacts.

<svg width="400" height="180">
  <rect x="50" y="20" rx="20" ry="20" width="150" height="150" style="fill:red;stroke:black;stroke-width:5;opacity:0.5">
  Sorry, your browser does not support inline SVG.
</svg>

This would produce a rectangle in place of your image. This is a great way to save on bandwidth as there would be no image file at all to load, just the SVG code.

UPLOADING YOUR FAVICON – TOUCH ICON

In order to set up your favicon and touch icon, go to “Zaya Theme or Zaya Child Theme → Pages Settings → Assets → Favicon / Touch Icon”.

We recommend to initially prepare your favicon (512×512) and your Touch Icon (192×192) in the right size in order to avoid some unwanted artefacts.

SETTING UP NAVIGATION

The Menu particle gives you the ability to place menus and define how they appear on the front end.

The Menu particle settings are different than the ones found in the Menu administrative panel. Here’s a quick breakdown of the life cycle of a menu in Zaya with Gantry 5.

Select the menu you wish to assign to the Navigation bar.

Go to Zaya Theme or Zaya Child Theme → Particle Default → Menu
Chose your “Primary menu”

Edit Item of your Primary Menu

Go to Appearance → Menus
Select your “Primary menu”
Edit your menu as usually

NAVIGATION LAYOUTS & STYLES

Disable Fixed Header

Go to Zaya Theme or Zaya Child Theme → Layout (Base Outline)→ Navigation Section
Click Section Settings
Remove Tag Attributes
Click Apply and Save

NAVIGATION COLORS

In order to set up colors for your main and sub-navigation, go to “Zaya Theme or Zaya Theme Child → Styles (Base Outline) → Navigation Styles”. Here you can set any color for main navigation and subnavigation.

SETTINGS

The Mobile Menu Particle is made for the Offcanvas Section in the Layout Manager. It has one primary purpose: to display a mobile version of the main menu for visitors displaying your site from a mobile device. Because of this, the Mobile Menu Particle does not appear on desktops and other larger-screened devices. Instead, the standard Menu Particle which is located elsewhere on the Layout is used.

Please note that this Particle must be unique in the Layout and positioned in the Offcanvas section. You will also need a Menu present in the Layout.

Because the Mobile Menu acts as a container for the menu, it doesn’t have any Particle-specific settings. You can, however, use standard Block-level settings to add custom CSS, Variations, etc.

Mobile Menu Targeting

Let’s say you have multiple menus assigned in the page layout, but you have a specific one you want to have pulled for the mobile menu. This is where menu targeting comes in handy, and it’s very simple to do.

All you have to do is open the settings for the Menu particle you would like to target for use as the mobile menu, and check the Mobile Target option. This will tell Gantry that this menu is the one that you want to have referenced by the mobile menu.

The Menu Editor panel in the Gantry Admin is where you can configure and refine menus used on the front end of the site. This does not totally replace the Menu Manager provided by WordPress, but gives you the ability to quickly and easily add elements, such as in-line particles, to make a better experience for your users.

The Menu Editor administrative panel takes what WordPress built-in Menu Manager has and enables you to override it. Changes you make in this panel do not in any way affect the way the WordPress handles Menu items.

This panel is a Global panel, that is not specific to any outline. It’s because of this that the changes you make here will affect all instances of a particular menu as it appears in any outline.

Selecting a Menu

The first thing you will want to do is select the menu you wish to edit. This can be done using the dropdown located near the top of the Menu Editor administrative panel. These menus are sourced from your WordPress Menu Manager. Select it in this dropdown and its contents will load, ready for you to work with.

If you would like to change which menu loads in a Menu Particle on the front end, you will need to set this in the menu Particle’s settings. Switching between menus here only enables you to access the menu’s settings, and does not assign the menu to any particular Particle.

Menu Settings

The menu itself has a settings icon (cogwheel) on the right-hand side which gives you the option to access settings that relate to the menu as a whole.

One common setting is the Base Path which sets the base path by which the menu is rendered. For example, if you would like the menu to render on the front end from the /blog directory down, rather than the full menu as provided by WordPress, this is where you would set it.

Keep in mind that within the Menu Particle, you can further refine this, setting a Base Path as well as the Start Level and End Level which comes in handy when creating a split menu.

In cases where you want to have multiple columns on a drop-down, you may experience issues where your dropdown only displays a single column. If this happens, you can resolve it by setting the Dropdown Style setting to Extended or Default and the Dropdown Width to either Auto or to a specified width large enough to accommodate your columns.

Menu Item Settings

Each menu item has a set of settings which can be configured to meet your needs. These may vary slightly between CMS, but have the same basic functions. You can activate the Menu Item settings by selecting the cogwheel icon on the right-hand side of the menu item itself.

Here is a breakdown of these settings and what they can do.

Once you have set the settings as you prefer, simply select Apply to save the changes and close the pop-up.

In cases where you want to have multiple columns on a drop-down, you may experience issues where your dropdown only displays a single column. If this happens, you can resolve it by setting the Dropdown Style setting to Extended or Default and the Dropdown Width to either Auto or to a specified width large enough to accommodate your columns.

One of the most important aspects of Zaya Gantry theme is its ability to be easily customized using the settings presets in the Theme Settings page. These settings can be adjusted by navigating to Zaya or Zaya Child Theme.

Basically, this panel serves as a one-stop-shop for changing the way the theme itself looks for a specific outline.

Controls

As you configure the commands in this panel, you may notice the Recompile CSS and Save Styles buttons at the top of the page. These buttons allow you to save your outline Styles settings, as well as to recompile the CSS of the page so that you can preview your settings on an associated page.

The Save Styles button saves your new style settings to the outline and recompiles the CSS so that your changes appear on the frontend. If you select this button, you do not have to click Recompile CSS as this action is automatically performed.

Select a Preset

Zaya Theme on Gantry makes use of a powerful preset system that allows developers and site builders to create preset styles and configurations.

Zaya Styles Presets are a combination of features and configuration settings which allow you to create predefined groupings for the entire theme, as well as on a per-outline basis. Presets can consist of any Zaya configuration option such CSS style, link color, background, body graphic levels, font settings, and much more.

The Preset Selector gives users the ability to quickly switch between Presets, with a pre-designed color palette and style settings. This is a quick and easy way to dramatically change the look of your site. Once you have selected the preset of your choice, you can further customize the style of the outline using the Theme-specific Settings, below.

Theme-specific Settings

Zaya comes with a set of Style settings you can use to customize the look and feel of the theme. These settings can appear in multiple sections, with each section focusing on a particular area or type of Style quality. For example, there might be a section dedicated to section-by-section color, while another focuses on the background section of the site, specifically.

If you are changing these settings for a non-default outline, the settings themselves will appear faded out until these settings are changed from their defaults. You can either click on the setting itself or check the box to the right of the setting to indicate that you wish to make a change from the default before making your changes.

If you wish to have the setting for the outline revert back to defaults, simply uncheck the checkbox and save the style.

Configuration Styles

The Configuration Styles area of the Styles administration panel gives you the ability to set responsive breakpoints for the outline, as well as menu options such as the dropdown width for the Simple dropdown setting.