Installation
Requirements:
- PHP version >= 5.3.6
- PHP memory_limit >= 96MB
- PHP max_execution_time = 300 (only for demo import)
Installation steps:
- Theme use big amount of configuration settings which can be installed via demo content import.
- Configuration settings use post ID for establish links so import demo content will work correctly only on fresh WP installation.
- Download the Theme archive and extract the files it contains.
- Using an FTP client to access your host web server, upload Theme folder (with all files) to the wp-content/themes directory provided by WordPress.
- Activate theme.
Find message at the top of the admin screen
Install and activate all required plugins
Import demo content for new site
Find menu item in administration sidebar
Import data with both checkboxes enabled
After import you need:
- Enable Visual Composer for Page if it provided with theme.
- Select appropriate menu in "VC Widgets" (if it used in theme) for all "WP Custom Menu" elements settings.
- Configure all used plugins by theme
Import demo content for existing site
- "AZEXO Import > Theme Options"
- "AZEXO Import > Pages"
- "AZEXO Import > AZH Widgets" – you will need to update all usages of AZH Widgets in this paces: "Appearance > Widgets", "AZEXO Options > Templates Configurations" and in cases when "AZH Widget" contain another "AZH Widget" as field
- import full demo on second WP installation and move JSON for: query forms and for submission forms
Import configuration for existing site
Find menu item in administration sidebar
Import configuration
After import you need:
- Enable Visual Composer for Page if it provided with theme.
- Select appropriate menu in "VC Widgets" (if it used in theme) for all "WP Custom Menu" elements settings.
- Create all contact forms used by "Contact Form 7" elements in "VC Widgets"
- Place imported "AZH Widgets" (or "VC Widgets") in sidebars and configure visibility rules
- Use AZEXO elements in Visual Composer (if it provided with theme) or use AZEXO HTML Customizer to make pages
- Configure all used plugins by theme
Places which need to translate
- Translate theme via "Loco translate" plugin - beginner gide
- Translate AZEXO plugins via "Loco translate" plugin - beginner gide
- Replace strings in form editor (or via JSON) of "AZEXO Query Forms" and "AZEXO Listings" plugins (open settings from left admin sidebar)
- Replace strings in "AZEXO Options > Templates configuration" (open settings from left admin sidebar)
- Replace strings in "AZEXO Options > WooCommerce templates configuration" (open settings from left admin sidebar)
- Replace strings in fields tabs "AZEXO Options > Fields configuration" (open settings from left admin sidebar)
- Translate all used plugins via "Loco translate" plugin - beginner gide
- Replace strings in Contact Form 7 templates
- External products "buy now" button – translated in product settings
How to find reason why translation not work
First of all check that correct MO file is loaded for required text-domain by add this code to child theme:
function debug_load_textdomain($domain, $mofile) {
echo "Trying " . $domain . " at " . $mofile . "<br/>\n";
}
add_action('load_textdomain','debug_load_textdomain', 10, 2);
After this check that your MO file correctly loaded all strings translations for required text-domain. You can test loaded translation for exact string by this code in child theme:
function debug_load_textdomain_string() {
$translations = get_translations_for_domain('TEXT DOMAIN');
var_dump($translations->entries['ORIGINAL STRING FOR TRANSLATE']);
}
add_action('after_setup_theme','debug_load_textdomain_string');
If you see "NULL" in this code output then your MO file not (correctly) provide translations for required string.
How to update
- Make backup database, theme and AZEXO plugins
- Make backup for all "languages" folders of theme and AZEXO plugins
- Remove old theme folder
- Extract and place new theme folder
- Update (or install new) required plugins "Appearance > Install Plugins"
- Return back all "languages" folders of theme and AZEXO plugins
Blank screen issue
In most cases this caused by some fatal error. Please check firstly apache error log file - is it contain error message at the moment when you get blank screen. You can ask help from your hosting support if you do not know where it placed.
Most frequent types of fatal errors:
- Wrong PHP version (< 5.3.6)
- Out of memory (< 96MB)
- Some required plugin not activated
- If you get blank screen after theme update then reason of this issue can be not updated AZEXO plugins. Go to "plugins" folder which is placed inside new theme folder and use archives with "az_" prefix to replace all old plugins.
- Error caused by third party plugin which is not supported by theme
- File system permission issues
Performance issue
- Use this instruction for WordPress Optimization.
- Enable Apache Compression.
- Install query monitor plugin and check for slow MySQL (or external HTTP) queries.
- Disable any object cache overriding in caching plugin you use. It not supported by WP Less plugin.
Theme styles customization
Theme provide Pro version of Yellow Pencil visual theme customizer plugin. If you have enough CSS skills you have possibility to customize theme via CSS as usually.
Yellow Pencil documentation
Create theme pages
If you need to make theme pages on existing site then you need:
- Open "Appearance > AZEXO Import"
- Choose "Import: Pages - existing site"
- Choose "Demo" if theme contain more than one demos
- Click "Import data"
Edit pages via AZEXO HTML Customizer
Every page which implemented as plain HTML can be edited via AZEXO HTML Customizer plugin which provided with theme. This plugin hide all non-editable HTML and show all strings/icons/images/links - click to change it and see result by clicking on "Preview changes" button.
Plugin can be disabled/enabled by clicking on "Switch to html"/"Switch to customizer" button.
How to edit/create header
Header implementation based on (ordered as it rendered in HTML):
- Header sidebar - which support only wide "AZH Widgets" (or "VC Widgets")
- Main header DIV - which support only header parts like: logo, primary_menu, secondary_menu, mobile_menu, mobile_menu_button, search
- Middle sidebar - which support only wide "AZH Widgets" (or "VC Widgets") and can be used as part of post (or any custom post type) template by use "AZEXO Field" or "AZEXO Post" shortcode.
If you need to enable theme header on existing site then you need:
- Import theme widgets as it described in How to edit/create widget
- Add appropriate "AZH Widgets" (or "VC Widgets") to Header/Middle sidebars
- Configure visibility rules of this widgets
Header/Middle sidebars use "JP Widget Visibility" plugin (alternative plugins "Widget Logic", "Conditional Widgets" also can be used) to allow show different header on different pages.
All used "AZH Widgets" (or "VC Widgets") in Header/Middle sidebars can be found in "AZH Widgets" (or "VC Widgets") list of left admin sidebar and can be edited via AZEXO HTML Customizer (or Visual Composer).
To make boxed content inside "VC Widget" of header - "Row" VC element must have "container" class
Main header parts
Theme have settings to set ordered list of header parts (for Main header DIV):
Theme can use custom header part which can be implemented as PHP template which must be placed in "template-parts" folder with "header-" prefix in file name. In this case it can be selected in "Header parts" theme settings.
Menu
Theme provide 2 possible menu locations and correspond menus:
Both of them can be rendered via header parts.
Mega Menu
To show page as mega menu (if it supported by theme) need to enter "mega" into "Title Attribute" of menu item:
To show "Title Attribute" settings of menu items: "Appearance" > "Menus" > "Screen Options" > "Show advanced menu properties" > "Title Attribute"
How to edit/create footer
Footer implementation based on Footer sidebar - which support only wide "AZH Widgets" (or "VC Widgets") and can be used as part of post (or any custom post type) template by use "AZEXO Field" or "AZEXO Post" shortcode.
If you need to enable theme footer on existing site then you need:
- Import theme widgets as it described in How to edit/create widget
- Add appropriate "AZH Widgets" (or "VC Widgets") to Footer sidebar
- Configure visibility rules of this widgets
Footer sidebar use "JP Widget Visibility" plugin (alternative plugins "Widget Logic", "Conditional Widgets" also can be used) to allow show different footer on different pages.
All used "AZH Widgets" (or "VC Widgets") in Footer sidebar can be found in "AZH Widgets" (or "VC Widgets") list of left admin sidebar and can be edited via AZEXO HTML Customizer (or Visual Composer).
To make boxed content inside "VC Widget" of footer - "Row" VC element must have "container" class
How to edit/create widget
If you need to enable theme widgets on existing site then you need:
- Import theme widgets - "Appearance > AZEXO Import > Import: AZH(VC) widgets - existing site"
- Add appropriate "AZH Widgets" (or "VC Widgets") to sidebars
- Configure visibility rules of this widgets
Many of theme widgets implemented as "VC Widget" or "AZH Widget" to allow use same shortcodes on pages and widgets.
All used "AZH Widgets" (or "VC Widgets") in sidebars can be found in "AZH Widgets" (or "VC Widgets") list of left admin sidebar and can be edited via AZEXO HTML editor (or via Visual Composer).
Every "VC Widget" which use in sidebars must have root "Row" element with 1 column and "h-padding-0" class
Sidebar on pages
Theme provide page templates to control visibility of sidebars:
Sidebar on single page of custom post type
Theme provide settings to control visibility of sidebars on custom post types:
Post/Product templates overview
Theme not provide CSS styles for all fields or all fields combinations configured in template - main purpose of fields/templates only generate HTML and JS
For all Post/Product HTML rendering theme use general HTML structure:
<div class="entry">
<div class="entry-thumbnail (or entry-gallery, or entry-video)">
used for showing media part of post/product
<div class="entry-hover">
mostly used for fields which showed when mouse is hovered thumbnail
</div>
</div>
<div class="entry-data">
used for showing textual part of post/product
<div class="entry-header">
<div class="entry-extra">
mostly used for any fields above title
</div>
<div class="entry-title">
</div>
<div class="entry-meta">
mostly used for any fields under title
</div>
</div>
<div class="entry-content (or entry-summary)">
used to show content or excerpt with more button possibility
</div>
<div class="entry-footer">
mostly used for any fields under content
</div>
</div>
<div class="entry-additions">
rarely used for any fields for free positioning
</div>
</div>
Theme allow to choose which fields will rendered in every DIV of every post/product template:
Change post template for Single/List pages
Theme allow to select template for custom post type on single/list pages:
Custom Post/Product templates
Theme allow to create new custom templates via settings and generate new settings tabs automatically:
AZEXO shortcodes with Post/Product templates support
Visual Composer elements can be found in AZEXO tab:
- AZEXO - Posts list for rendering any post type list with any template (with carousel support).
- AZEXO - Post for rendering any post type with any template (without Post ID will be rendered current queried post). Useful for header, footer and widgets as single post/product template part.
How to change image cropping and size
Theme not have single standard for image dimensions – it crop image automatically for fast page load and output image in background cover mode to show image with any dimensions. if you have standard image dimensions on your site, then you need to set:
- image cropping in "AZEXO Options > Templates configuration > Shop product > Thumbnail size" (where "Shop product" is template name) for every template
- "max-height" or "height" CSS property for DIV which contain product image as background (with ".image" class) - use template name (like "shop-product") class in your selectors - for every template
In this video showed one example for image size changing in AZEXO theme framework.
How to override field PHP code
Any field can be overridden in child theme "functions.php" file via "azexo_entry_field" filter:
add_filter('azexo_entry_field', 'example_entry_field', 10, 2);
function example_entry_field($output, $name) {
if($name == 'purchased') {
return esc_html(get_post_meta(get_the_ID(), 'total_sales', true));
}
return $output;
}
Custom fields templates
Custom field can be implemented as PHP template, with post type name prefix (e.g. "product-"), which must be placed in "fields" folder and started with:
<?php
/*
Field Name: Product event date time
*/
?>
In this case custom field will be registered in theme settings and AZEXO shortcodes automatically.
AZEXO shortcodes with theme fields support
Visual Composer elements can be found in AZEXO tab:
- AZEXO - Post field for rendering any field (without Post ID data will take from current queried post). Useful for header, footer and widgets as single post/product template field.
Registering meta keys with simple string values
Theme allow to register meta keys - after this they can be selected in theme templates settings and AZEXO shortcodes provided by theme:
To edit values of this fields on post (product/profile or any other custom post type) editing page you can enable "Custom Field" metabox in "Screen Options"
AZEXO shortcodes
Theme not provide CSS styles for all possible configurations of AZEXO shortcodes - they main purpose is only generate HTML and JS
AZEXO shortcodes with static content (in AZEXO tab):
- AZEXO - Generic Content universal static content element with HTML structure similar to post/product templates used in theme. CSS styles controlled by class entered in element settings.
- AZEXO - Carousel wrapper for "AZEXO - Generic Content" elements
- AZEXO - Panel wrapper for "AZEXO - Generic Content" elements
- AZEXO - Filters buttons for visibility control of DOM elements via jQuery selectors
- AZEXO - Progress bar replacement of native Visual Composer element with icons support
- AZEXO - Tabs replace classic Visual Composer tabs with theme CSS styles
- AZEXO - Accordion replace classic Visual Composer accordion with theme CSS styles
AZEXO shortcodes with dynamic content (in AZEXO tab):
- AZEXO - Taxonomy for output any WP taxonomy
- AZEXO - Post for output any post (or current post) with theme template support
- AZEXO - Post field for output any registered in theme field of any post (or current post)
- AZEXO - Posts list for output posts list with query builder, theme template and carousel support
AZEXO - Posts list: AZEXO shortcode
Theme provided few functions for "Posts clauses filter function name"
- azexo_current_user_author_filter to show posts where current user is author
- azexo_current_time_ordering_filter to use it need to set "Order By" = "Meta Value" and "Meta Key" = any timestamp contained meta key. if "Sorting" = "Descending" then show latest posts based on timestamp meta value. if "Sorting" = "Ascending" then show nearest in future posts based on timestamp meta value.
- azexo_woo_featured_post_clauses to show WooCommerce featured products
- azexo_woo_order_by_rating_post_clauses to show WooCommerce products ordered by rating
- azl_current_user_favorites to show posts which current user marked as favorite
- azl_current_user_subscriptions to show active WooCommerce subscription products which current user purchased
- azexo_azlp_closest_profile_author_filter to show posts with same author as in current "Profile" post
- azexo_azlp_closest_product_author_filter to show posts with same author as in current "Product" post
- azpl_liked_post_clauses to show posts which liked by current logged in user
- azexo_woo_vendors_filter to show posts with authors which have "vendor" role
Examples for WooCommerce products:
- Popular products
[azexo_posts_list post_type="product" max_items="10" orderby="meta_value_num" order="DESC" template="shop_product" meta_key="total_sales"] - Featured products
[azexo_posts_list post_type="product" max_items="10" posts_clauses="azexo_woo_featured_post_clauses"] - Last minute deals
[azexo_posts_list post_type="product" max_items="10" orderby="meta_value_num" order="ASC" template="shop_product" posts_clauses="azexo_current_time_ordering_filter" meta_key="_sale_price_dates_to"] - Upcoming deals
[azexo_posts_list post_type="product" max_items="10" orderby="meta_value_num" order="ASC" template="shop_product" posts_clauses="azexo_current_time_ordering_filter" meta_key="_sale_price_dates_from"] - Expired deals
[azexo_posts_list post_type="product" max_items="10" orderby="meta_value_num" order="DESC" template="shop_product" posts_clauses="azexo_current_time_ordering_filter" meta_key="_sale_price_dates_to"]
AZEXO - Filters: AZEXO shortcode
Universal element to show or hide any contained elements with masonry grid support. Main elements settings: "Filters". Every filter have "Title" (to render button) and "Selector" (jQuery selector to add/remove "showed" CSS class).
This element is most convenient to use with "AZEXO - Generic Content" element inside. In this case "AZEXO - Generic Content" must have:
- as usual CSS class for overall styling of content in "Extra class name" of "General" settings tab
- CSS class for filtering possibility to use it in jQuery selectors (in same "Extra class name" of "General" settings tab)
How to use Google Map from AZEXO Listings plugin
Google Map can be added to page via [azl-google-map] shortcode. This shortcode use main query to retrieve list of showed posts map.
To show full list of posts need to use "all" attribute: [azl-google-map all="1"]. By default this shortcode work only with "product" post type (provided by WooCommerce).
Location of posts take from latitude and longitude meta values (see here how to enter it).
How to change Google Map styles for AZEXO Listings plugin
Google Map Styles JSON can be generated on some online service and entered to plugin settings:
Where to set Google Map API Key
For AZEXO Listings plugin:
For AZEXO Query Form plugin:
How to enable bookable product
Open product for edit and enable bookable checkbox.
How to enable vouchers generation for product
Open product for edit and enable voucherable checkbox. After this you can optionally enter additional settings.
Vouchers will be generated as code-string after order payment and showed as order item meta data (on all order view pages) of appropriate product.
How to add vouchers redeem form
Vouchers redeem form can be added to page via [azv-voucher-check] shortcode.
Change voucher generation event
azv_payment_complete function used for voucher generation. Subscription to events declared by this code in az_vouchers.php file of the plugin:
add_action('woocommerce_payment_complete', 'azv_payment_complete');
add_action('woocommerce_order_status_processing', 'azv_payment_complete');
add_action('woocommerce_order_status_completed', 'azv_payment_complete');
Depends from used payment gateway you may need remove some actions or subscribe to new events in child theme.
How to enable group buying feature for product
Open product for edit and enter any minimum sales number of "Group Buying" settings tab.
After this set sale price and sale dates interval.
Use reports provided by plugin to make manual refunds for failed deals.
How to add "sales left" to product
This field can be added somewhere in the product template:
or via AZEXO - Post field AZEXO shortcode (in footer, header or sidebar "AZH Widgets" (or "VC Widgets")):
How to use subscription plans
- Install AZEXO Listings plugin
- Install YITH Subscriptions plugin
- Create WooCommerce product with subscription type provided by YITH Subscriptions plugin
- Setup posts publication limit in this product
- Make anywhere on your site "Purchase subscription plan" link with url like http://YOUR-DOMAIN.com/checkout/?add-to-cart=ID - where ID is ID of product you created
- Enable auto-hiding of posts based on author subscription plan
How to enable auto-hiding based on post authors subscriptions plans
In case when "Subscriptions post type" dropdown not equal to "None" - all post will be hided automatically based on post authors subscriptions plans:
Set published posts number limit (per author) for subscription plan
With YITH Subscriptions plugin it can be configured by adding Listing limit meta value to subscription product:
Link to purchase a subscription plan: http://YOUR-DOMAIN.com/checkout/?add-to-cart=ID
How to use WC Vendors plugin
This plugin create "vendor" role. User who have vendor role have access to plugin shortcodes. All WooCommerce products which have author with "vendor" role automatically make commission record in DataBase after order is paid. Site administrator have interface to pay commissions to all vendors. See more info in plugin online KnowledgeBase
AZEXO HTML Customizer plugin usage
How to use:
- After plugin activation post and page HTML editors will be replaced by AZEXO HTML Customizer.
- You can disable AZEXO HTML Customizer by clicking on “Switch to html” button.
Plugin can be used in three modes:
- Customization (previously entered) of post/page content by non-technical users.
- Build landing pages based on active theme CSS styles by use previously created HTML sections.
- Build landing pages based on extension-plugin CSS styles by use previously created HTML sections.
In second mode HTML sections must be placed in “azh” folder of active theme. If this folder not exists in theme plugin automatically will work only in first mode.
AZEXO HTML Customizer plugin development
How to use for development:
Use scroll mouse button to add description to editable fields – make effect only in backend editor and removed from result HTML.
Columns widths and their offsets determined based on Bootstrap class notation.
az-row/az-column classes can be used in backend to show tags in horizontal mode
Special attributes - make effect only in backend editor:
- data-section="SECTION NAME" - enable HTML editing possibility
- data-group="GROUP NAME" - wrap fields which placed inside by border-line which have name
- data-cloneable - enable possibility to clone/sort/remove of children
- data-cloneable-inline - same as data-cloneable but builder show children (in edit mode) with "display: inline-block" style
- data-element - enable possibility to add/remove shortcode
Special attributes - make effect only in frontend
- data-full-width="true" - shift left/right side of current tag to left/right side of window
- data-stretch-content="true" - same as data-full-width but for content also (used only with data-full-width)
Restrictions of HTML:
- shortcode inside (before/after) text not alowed
- more than one shortcode together not allowed
Icon patterns:
<div class="icon ICON-CLASS"></div>
<i class="ICON-CLASS"></i>
Numeric attributes - any attributes with "data-" prefix and numeric values.
Checkbox fields - any attributes with "data-" prefix and true/false values.
For dropdown fields need to add declaration to window.azh.dropdown_patterns array of objects in next format:
{
pattern: PATTERN WITH ONE GROUP TO REPLACE BY VALUE FROM OPTIONS,
options: {VALUE1: LABEL1, VALUE2: LABEL2, etc.}
}
How to edit/create Search/Filtering forms
Interface to configure forms placed on "Query forms" admin page, form builder can be opened by clicking on the "Open form editor" button:
Query form can be added to page or "AZH Widget" (or "VC Widget") by this shortcode [azqf-form name="filter"]. Where "name" attribute must equal to "Form name" entered in form settings.
Form editor can be disabled to edit form via JSON by adding this CSS to admin section (for example with Add Admin CSS plugin):
#forms_repeat .cmb-type-textarea-code .cmb-td pre {
display: block !important;
}
#forms_repeat .cmb-type-textarea-code .cmb-td textarea {
display: block !important;
}
#forms_repeat .open-form-editor {
display: none !important;
}
How to edit/create Front-end submission forms
Interface to configure forms placed on "Listings" admin page, form builder can be opened by clicking on the "Open form editor" button:
Front-end submission form can be added to page or "AZH Widget" (or "VC Widget") by this shortcode [azl-frontend-submission name="tour"]. Where "name" attribute must equal to "Form name" entered in form settings.
Form editor can be disabled to edit form via JSON by adding this CSS to admin section (for example with Add Admin CSS plugin):
#forms_repeat .cmb-type-textarea-code .cmb-td pre {
display: block !important;
}
#forms_repeat .cmb-type-textarea-code .cmb-td textarea {
display: block !important;
}
#forms_repeat .open-form-editor {
display: none !important;
}
How to set status of post after form submission
By default submitted post have "pending" status. Page of this post will return 404 (Not Found) HTTP error. It must be approved by site administrator to make it published.
Use "post_status" attribute to set status of post after submission [azl-frontend-submission name="YOUR FORM NAME" post_status="publish"]
How to set WooCommerce product type
By default submitted product have "simple" type.
Use "product_type" attribute to set type of product [azl-frontend-submission name="YOUR FORM NAME" product_type="variable"]
How to use AZEXO Social Login plugin
One of the way to use this feature is make url which will register/login user via social network: