WordPress Page Builder Documentation

Installation

  1. Install using the WordPress built-in Plugin installer, or Extract the zip file and drop the contents in the `wp-content/plugins/` directory of your WordPress installation
  2. Activate the plugin through the 'Plugins' menu in WordPress
  3. Go to Pages > Add New
  4. Press the 'Switch to customizer' button - backend builder activated
  5. Add empty row
  6. Save page
  7. Click on 'Edit page in frontend' button - frontend builder activated

Shortcode

  1. Create AZH Widget
  2. Build any content via backend or frontend builder
  3. Remember post id of AZH Widget
  4. Insert it as [azh_post id="..."] shortcode

Files and folders organization

For add new design-project in to builder extension-plugin (azh_extension) you need:

  1. Create skin LESS file in "less" folder of extension-plugin (this is main project skin file) with PROJECTNAME-skin.less filename
  2. Create "PROJECTNAME" project folder inside "azh" folder of extension-plugin - it will contain sections and elements files and its previews
  3. Create "PROJECTNAME" project images folder inside "azh/images" extension-plugin folder - it will contain images which will used in sections and elements
  4. Create azh_settings.json file and put it into project folder - it will contain project settings
  5. Put any *.css files into project folder - it will load when used any section/element from project
  6. Put any *.js file into project folder - it will load when used any section/element from project

For create new section/element you need:

  1. Create file in project folder with html extension for section and htm for element
  2. Create section/element preview in project folder with jpg format with same name

Google fonts

Add "\r\n" separated fonts list into azh_settings.json file in to google-fonts property with "Playfair+Display:400,400i,700,700i,900" format - this fonts will be loaded on every page where used any section/element from this project

Set font in project LESS file with this format "font-family: @{google-font-family-Playfair-Display}"

Images

Put images into project images folder.

Use images in HTML with this url format {{azh-uri}}/images/PROJECT-NAME/FILE-NAME.jpg

Icons

Add icon only by this html <span class="az-icon ICON-CLASS"></span>

You can include new font in azh.css file

To add new font classes into icon select dialog of front-end builder: set space (or new-line) separated classes list in HTML Customizer > Custom icons classes in left admin sidebar

Forms

Add action="" method="post" data-azh-form="[azh_form]" attributes to form tag for enable AJAX form submission.

Add <input type="hidden" name="form_title" value="form title in CFDB forms submissions"/> field into form - for support CFDB plugin.

Grid

Use azh-row, azh-col-lg-X, azh-col-mb-X, azh-col-sm-X, azh-col-xs-X classes (which is just prefixed bootstrap grid classes) if you need to enable column resizer via front-end builder

Sort/Clone/Remove feature

Add data-cloneable attribute to parent tag - if you need to enable sort/clone/remove features for its children

General dynamic content

Classes list for template-wrapper which used for shortcodes generation:

az-logo - parser will search link and image for template of site logo shortcode

az-page-title - parser will search text for template of page title shortcode

az-page-subtitle - parser will search text for template of page subtitle shortcode

az-page-meta - parser will search text for template of page meta shortcode

az-menu - parser will make 3 parts of menu shortcode template:

  1. root menu template - from tag with az-menu class to first occurence tag with data-cloneable attribute (which must contain first level menu items)
  2. menu item with children - menu item from first level with data-cloneable attribute (second level will be cleared)
  3. menu item without children - menu item from first level without data-cloneable attribute

az-taxonomy - parser will make 3 parts of taxonomy shortcode template:

  1. root taxonomy template - from tag with az-taxonomy class to first occurence tag with data-cloneable attribute (which must contain first level terms)
  2. term with children - term from first level with data-cloneable attribute (second level will be cleared)
  3. term without children - term from first level without data-cloneable attribute

az-breadcrumbs - parser will search data-cloneable attribute with list of links (with text) for template of breadcrumbs shortcode

az-like - parser will search text for template of like shortcode. Use this class in any place of page. JavaScript will initialize click behaviour automatically

az-twitter - data-clonable of az-tweet (text, link) and az-date(text)

az-instagram - data-clonable of images with link

az-flikr - data-clonable of images with link

Posts dynamic content

Classes list for template-wrapper which used for shortcodes generation:

az-entries - parser will search data-cloneable attribute with list of posts - first instance will be used for post template generation by fields (which expained below). Template will be used for posts list shortcode

az-entry - parser will generate post template by fields (which expained below) - which used for single post shortcode

Classes list for post template fields:

az-title - parser will search link and text for post title field template

az-excerpt - parser will search text for post excerpt field template. data-length attribute can be used for set excerpt length.

az-content - parser will search text for post content field template

az-day - parser will search text for post day field template

az-month - parser will search text for post month field template

az-year - parser will search text for post year field template

az-date - parser will search text for post date field template

az-comments-count - parser will search text for post comments count field template

az-read-more - parser will search link for post read more link field template

az-permalink - parser will search link for post permalink link field template

az-video - parser will search iframe for post video field template

az-thumbnail - parser will search image and link for post thumbnail field template. data-size attribute can be used for set image size in 100x100 format

az-gallery - parser will search data-cloneable attribute which contain images list for post gallery field template. data-size attribute can be used for set image size in 100x100 format

az-author - parser will search image, link and text for post author field template

az-category - parser will search data-cloneable attribute with list of links (with text) for post category field template

az-tags - parser will search data-cloneable attribute with list of links (with text) for post tags field template

data-taxonomy-field attribute - parser will search data-cloneable attribute with list of links (with text) for post taxonomy field template. value of data-taxonomy-field attribute must contain taxonomy name

data-meta-field attribute - parser will search text for post meta field template. value of data-meta-field attribute must contain metakey

az-sticky - add this class if you need to show this HTML in sticky post

az-likes-count - parser will search text for post likes count field template. JavaScript will initialize click behaviour automatically

az-sticky-XXX - add this class if you need to add XXX class in sticky post

az-liked-XXX - add this class if you need to add XXX class in liked post

Full width feature

Set data-full-width="true" - for shift left/right side of current tag to left/right side of window from current content container

Set data-stretch-content="true" - same as data-full-width but for content also (used only with data-full-width)

JavaScript features

Coming soon

az-tabs -

az-accordion -

az-gmap -

az-share -

az-preloader -

az-carousel -

az-slider -

a.az-image-popup -

a.az-iframe-popup -

az-countdown -

az-lazy-load -

data-isotope-items - data-isotope-filters

data-masonry-items -

az-roll -

az-knob -

LESS coding standard

  1. All your styles and mixins must be placed inside resetting CSS cascade div.azen.azen1.azen2.azen3 {}
  2. All classes must have "azen" prefix
  3. All sections and elements must have starting class with two prefixes "azen" and project name prefix
  4. All styles of section and element must be placed inside starting class CSS cascade

How shortcodes supported

You can add any third-party shortcode via front-end or back-end builder. In front-end builder will be showed rendered HTML and builder will block any mouse clicks on it - in this case you can edit attributes only in text mode.

You can integrate shortcode into builder with attributes editor dialog window support - for this you need to register it via azh_add_element($configuration) builder function, which take shortcode configuration in very similar format with vc_map of Visual Composer plugin. In this case you can edit attributes via popup dialog.

Register shortcode in builder

Coming soon

Shortcode generation based on HTML

Builder have HTML parsing framework and can generate new shortcode with template based on HTML page content automatically. This is implemented by adding CSS classes to HTML tags of element/section. At the first saving page moment – builder parse HTML find this CSS classes, cut HTML pieces and use them as template of shortcode – which is put instead of this HTML. After this builder allow to change shortcode attributes.

Coming soon