AZEXO Theme Framework Documentation

Almost all settings (including AZEXO shortcodes) in admin-interface of theme used as part of development framework - it allow to make HTML/JS output with high flexibility. It is complex to make CSS theme styles to cover such a big freedom fully. Many possible settings/configurations which not provided with demo content must be used with LESS/CSS sources editing.

Installation

Requirements:

  1. PHP version >= 5.3.6
  2. PHP memory_limit >= 96MB

Installation steps via FTP:

  1. Download the Theme archive and extract the files it contains.
  2. 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.
  3. Activate theme.

Installation steps via WP Admin:

  1. In your WordPress dashboard, go to Appearance > Themes > Add New.
  2. From there you’ll see an option for “Upload” at the top of the screen. Click the “Browse” button, navigate your computer files and select the .ZIP file for your downloaded extension. For an in-depth documentation about WordPress theme manual installation, read the official WordPress.org documentation.

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 demo data

Places which need to translate

  1. Translate theme via "Loco translate" plugin - beginner gide
  2. Translate AZEXO plugins via "Loco translate" plugin - beginner gide
  3. Replace strings in "AZEXO Options > Templates configuration" (open settings from left admin sidebar)
  4. Replace strings in "AZEXO Options > WooCommerce templates configuration" (open settings from left admin sidebar)
  5. Replace strings in fields tabs "AZEXO Options > Fields configuration" (open settings from left admin sidebar)
  6. Translate all used plugins via "Loco translate" plugin - beginner gide

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

  1. Make backup database, theme and AZEXO plugins
  2. Remove old theme folder from "wp-content/themes"
  3. Extract and place new theme folder into "wp-content/themes"
  4. Update (or install new) required plugins "Appearance > Install Plugins"

Code navigation

  1. list.php - universal list of contents template
  2. *.php in theme root directory - standard WordPres template files
  3. yarpp-template-default.php - YARPP plugin related posts template
  4. framework/exporter/exporter.php - export theme settings for developers
  5. framework/importer/*.php - import demo content code
  6. framework/importer/data - demo content files
  7. framework/options/*.json - default theme options for skin
  8. framework/less-variables.php - link less variables with theme settings
  9. framework/options-init.php - REDUX framework theme settings configuration
  10. framework/tgm-init.php - TGM class configuration
  11. framework/woocommerce.php - WooCommerce related theme hooks
  12. framework/widgets.php - widgets provided by theme
  13. less/*.less - theme styles (table of contents in theme style.css file)
  14. fields - fields PHP templates used in theme
  15. css - CSS theme styles to work without WP-Less plugin and animation CSS libraries
  16. fonts - fonts files
  17. images - images used by theme
  18. js/frontend.js - main JS theme script
  19. js/woocommerce.js - main JS theme script for WooCommerce plugin
  20. js/*.js - JS libraries
  21. languages - theme translation files
  22. page-templates/*.php - WordPress page templates
  23. plugins - WordPress plugins distributives required by theme
  24. post-like-system - post like feature files
  25. redux-extensions - REDUX framework extensions
  26. template-parts - template parts which reuse in other theme templates
  27. tgm - TGM class
  28. woocommerce - templates for WooCommerce plguin

CSS styles navigation

All less files compiled automatically via WP Less plugin. To override CSS styles via child theme need to copy "less" folder from parent theme and edit source less files.

  1. variables.less - less variables
  2. general.less - main layout
  3. typography.less - typography and base HTML/WP tags
  4. comments.less - WP comments
  5. post.less - WP post (mostly for single)
  6. profile.less - public user profile templates
  7. header.less - WP header
  8. menu.less - WP site menu
  9. pagination.less - WP pagination
  10. sidebar.less - WP sidebars
  11. widgets.less - WP widgets
  12. archive.less - WP archive page title
  13. templates.less - various post templates
  14. helpers.less - reusable classes
  15. visual-composer.less - visual composer shortcodes
  16. like.less - post like feature
  17. content.less - styles to use it inside post content
  18. woo-checkout.less - WooCommerce checkout page
  19. woocommerce.less - WooCommerce general styles
  20. woo-product.less - WooCommerce single product page
  21. woo-reviews.less - WooCommerce reviews
  22. woo-templates.less - WooCommerce product templates
  23. woo-widgets.less - WooCommerce widgets
  24. booking-form.less - WooCommerce Bookings plugin form
  25. cmb-form.less - CMB2 plugin form
  26. azexo-html.less - AZEXO Builder styles
  27. ui-datepicker.less - jQuery UI datepicker element
  28. ui-slider.less - jQuery UI slider element
  29. ui-tabs.less - jQuery UI tabs element
  30. ui-accordion.less - jQuery UI accordion element

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:

  1. Wrong PHP version (< 5.3.6)
  2. Out of memory (< 96MB)
  3. Some required plugin not activated
  4. 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.
  5. Error caused by third party plugin which is not supported by theme
  6. File system permission issues

Performance issue

  1. Disable WP Less plugin if you do not need less files auto-recompilation.
  2. azh_extension plugin contain very big elements library with a lot of less code - you can disable this plugin or disable not needed parts in wp-content/plugins/azh_extension/less/skin.less file.
  3. define('WP_DEBUG', true) force all less files recompilation every page load by WP Less plugin - set recompilation strategy you need - more info here wp-content/plugins/wp-less/doc/Common-Usage.md
  4. Use this instruction for WordPress Optimization.
  5. Enable Apache Compression.
  6. Install query monitor plugin and check for slow MySQL (or external HTTP) queries.
  7. Disable any object cache overriding in caching plugin you use. It not supported by WP Less plugin.
  8. Enable Keep-Alive

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.

Create theme pages

If you need to make theme pages on existing site then you need:

  1. Open "Appearance > AZEXO Import"
  2. Choose "Import: Pages - existing site"
  3. Choose "Demo" if theme contain more than one demos
  4. Click "Import data"

Edit pages via AZEXO Builder

Every page which implemented as plain HTML can be edited via AZEXO Builder 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 "Edit with AZEXO"/"Back to WordPress Editor" button.

How to edit/create header

Header implementation based on (ordered as it rendered in HTML):

  1. Header sidebar - which support only wide "AZH Widgets"
  2. Main header DIV - which support only header parts like: logo, primary_menu, secondary_menu, mobile_menu, mobile_menu_button, search
  3. Middle sidebar - which support only wide "AZH 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:

  1. Import theme widgets as it described in How to edit/create widget
  2. Add appropriate "AZH Widgets" to Header/Middle sidebars
  3. 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" in Header/Middle sidebars can be found in "AZH Widgets" list of left admin sidebar and can be edited via AZEXO Builder.

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.

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 widget

Many of theme widgets implemented as "AZH Widget" to allow use same shortcodes on pages and widgets.

All used "AZH Widgets" in sidebars can be found in "AZH Widgets" list of left admin sidebar and can be edited via AZEXO Builder.

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:

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:

  1. image cropping in "AZEXO Options > Templates configuration > Shop product > Thumbnail size" (where "Shop product" is template name) for every template
  2. "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.

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"