ZA Wordpress Theme Documentation

• Created: 7/10/2015
• Latest Update: 8/17/2019
• By: SeaTheme

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to publish your question here.
Thanks so much!

Installation

To use a WordPress theme you must have a working version of Wordpress already installed. For information in regard to installing the WordPress platform, please refer to the WordPress Codex here

1. Extract the package file

After extract the main zip file, you'll see these folders and files:

• za-theme.zip - installable theme file
• Documentation folder - help file
• za-child.zip - Child theme
• html folder - html version folderr
• plugins folder - The plugins install file
• demo data folder - demo XML files, Revolution slider demo data
• Log folder
2. Install theme file

This template works well for WordPress 5.2, update yours if needed.
Installing the theme can be done in 3 ways. You can upload the theme ZIP file using the built in WordPress theme upload, or copy the files through an FTP client.

• Using the Envato WordPress Toolkit plugin: Please refer this post.
  Note: How to get the API Key of themeforest(new version)? Refer this post.

• Using WordPress Theme Upload:
  Be sure to extract the file "za-theme.zip" from the ThemeForest download before uploading. Using the ThemeForest ZIP file directly will result in a "Missing Style Sheet" error.
  • Login to your WordPress admin.
  • In the "Appearance > Themes" menu click the tab "Install Themes".
  • At the top of the page click, "Upload", then click the file input to select a file.
  • Select the zipped theme file, "za-theme.zip", and click "Install Now".
  • After installation you will receive a success message confirming your new install.
  • Click the link "Activate".
• Using FTP:
  • Login to your FTP server and navigate to your WordPress themes directory.
  • Normally this would be "wp-content/themes".
  • Extract folder "za-theme" from the zipped theme.
  • Copy the folder "za-theme" to your themes directory.
  • After the files finish uploading, login to your WordPress admin.
  • In the "Appearance" menu click "Themes".
  • Click "Activate" for the theme "za-theme Responsive Retina Ready Multi-Purpose WP Theme".
3. Theme update
• Using the Envato WordPress Toolkit plugin: Please refer this post.
• Using WordPress Theme Upload:
  • Please download the theme file from themeforest.net
  • Remove the installed Minds theme
  • Install the theme again(upload the latest za-theme.zip)
• Using FTP:
  • Please download the theme file from themeforest.net
  • Unzip za-theme.zip, get za-theme folder
  • Upload/replace minds folder by ftp

1. Recommended Plugins

After activating the theme, you would notice the message box on the top of admin pages to ask you install/activate some plugins, you could use them for free or cancel the messages. Include:BM Pagebuilder, BM Slider, Contact Form 7, MailChimp for WordPress Lite, Rotating Tweets (Twitter widget and shortcode) ...

2. Logo

To set up logo for your website, you need to:

1. Go to the WordPress Admin Dashboard.
2. Go to "Appearance / Theme Options" (on left sidebar).
3. Go to Theme Options > General Settings > Logo section, here you could upload a logo image or input logo text.

The recommended logo image size is less than 120px(width) * 120px(hight) in "Menu Bar on Side" layout, less than 240px(width) * 100px(hight) in "Menu Bar on Head" layout, this is the container size. If you want the logo be displayed clearly on retina screens, you need to upload a double size image logo(e.g. 240px x 240px or 480px x 200px).

3. Layout

Go to ThemeOptions > Layout > Layout, here you could set "Menubar on Side" or "Menubar on Head".



If you choose "Menubar on Side", you could set menubar on "Right" or "Left". The Menubar width(e.g. 200) is optional, the default value is 160.

4. Skin

8 predefined colour scheme for your website, please go to ThemeOptions > Schemes

There are many detail colour setting options for every scheme, you could define your own style base on the given scheme setting. Click on the small icon "?" on the right side description for every item to learn detail explanation for the option.

5. Frontpage

To set up the homepage, you need to create a page which you want to use it as homepage, after that, go to ThemeOptions > FrontPage section to select the page from drop-down menu.

6. Generate New Thumbs for This Theme

If there have been some images in your site already, please click the button. It will generate the right size thumbs for the images.

7. Menu

Before building your custom menu, you need to create your pages first, then navigate to Appearance > Menus, it is recommended to create you menu from Pages or Links.

8. RTL

If you want to use RTL layout, please go to ThemeOptions > Layout, activate the "RTL" option

9. Theme Custom

If you want to change style of theme, please go to ThemeOptions > General Settings, put your css code to Cutom Css box.
You could also use Child theme also, put the cutom css to custom.css file. Refer more about child theme

7 Post Formats

ZA provide 7 formats for your post, theses formats would affect the layout of your post in list and content page. You need the to click on the radio button to change the format for a post:

• Standard Format Post / Image Format Post: The standard format will show the title, content and featured image in the list page. It looks like:

  

• Gallery Format Post: The gallery format will show the title, content and slider in list page. It looks like:

  

• Audio Format Post: The audio format is supported hosted mp3 files and soundcloud embed code.

  

  The Soundcloud type looks like:

  

• Video Format Post: The video format is supported Youtube and Vimeo embed code. You could set ratio for video, it will help to remove the dark padding in single post page as possible.

  

  It looks like in list page:

  

• Link Format Post / Quote Format Post: them look like in list page:

  

• Post Options
  • Sidebar Layout, you could set the sidebar layout or fullwidth layout, in sidebar layout, you could choose widget. To set widget, you need go to Wordpess Admin Panle: Appearance > Widgets > Sidebar 1-10 for Post/Page.

    

  • Read Length: The number of minutes spent reading this article, shown in post:

    

• Excerpt (subtitle):

  

  Please edit it here:
  

  

Sliders

BM Slider

Please go to Wordpress Admin Panel: BM Slider > Add New. If you don't see the optoin , please go to Appearance / Install Plugins to install BM Slider plugin.



You need to pickup a category for slider, the category in this slider need to be set featured image.

Revolution Slider

If you did not install Revolution Slider, pleaes install it following the tip on top of page. After install it, please go to Wordpress Admin Panel / Revolution Slider to create a slider. Check documentation.
Note: If you want to update Revolution Slider, please use FTP update it(Never uninstall/reinstall the plugin, as that would also delete your previously built sliders.).

Go to Page / Add new, you could build all kind of pages you like.

General Options

• Sidebar Layout, you could set the sidebar layout or fullwidth layout, in sidebar layout, you could choose widget. To set widget, you need go to Wordpess Admin Panle: Appearance > Widgets > Sidebar 1-10 for Post/Page.

  

• Title Option: You could set the option to hide/show title wrap:

  

  

• Show Top Spacer / Show Bottom Spacer, you could show/hide the top/bottom spacer of the page, it would be useful when you build a page with Page Builder:

  

• Footer Wdiget, you could set footer widget. To set widget, you need go to Wordpess Admin Panle: Appearance > Widgets > Footer 1-5 for Post/Page. It only shows a maximum of three.

  

Page Template

• Hiding Side Menubar

  This template option would be only shown on "Menubar on Side" layout.

  

  If you choose this option, the side menu bar would be hidden by default on desktop device(If you sroll the page, the menu bar would be shown with animation).

  

  You could set sencond screen as image or video:

  

  Video Guide:

  
  [video]
  
  
• Blog Template:

  

  Please pick up this option to create a Blog list page:

  

  You could select categories, set order, pagination type and other options for Blog list.

  

  
  
• No Template:

  Set "No Template", you could create a static page. You could use Wordpress default editor or ZA Page Builder to create the content.

Show Slider

Please activate the "Show Slider" option and pickup a slider. To set up the slider please go to Wordpress Admin Panel: BM Slider > Add New(or "Revolution Slide").

ZA provide drag & drop page builder for your pages("No Template" need to be set), press the button "Switch to Page Builder" to enable it. Following is a brief introduction for the page builder:

1. Wraps

The modules could be placed directly into the panel or be dragged into a wrap, depending on your layout. A standard wrap have the same width with page content.

Fullwidth Wrap

A fullwidth wrap have the following features:

• A wider width than the page content, such as to be full-width to outer container, it could be used for your full-width sections.
• Support background color/image/video, IE 8/9 and touch devices do not support the video background, you need to upload a Atl Image for them.
• Parallax effect for image background/Foreground, the effect do not support touch devices.
• Support tabs.
• If you set the dark background color, please active the "Shift Text Color for Dark Background", the font color of this fullwidth wrap is set as white forcibly.
• If you want the content of fullwith wrap filled to full width of screen(no left/right padding), please active the "Fit Content to Fullwidth".

2. Modules

• Portfolio

  You could set portfoilo list by Portfolio module, it will be listed the gallery format posts. Please make sure the featured images set for the gallery posts. There are 4 type list:

  

  Grid List:

  

  Interlock List:

  

  Standard List:

  

  Custom Grid:

  

  Video guide:

  
  [video]
  
  
• Text Block

  You could set up a background color for the text block, leave it empty if you don't want to show any background color.

  

   

• Liquid List

  You could set portfoilo list by Liquid List module also.

  

• Icon Box

  Icon on Left

  

  Icon on Top

  

   

• Image Box

  

   

• Text List

  You could set a bullet icon for every item

  

   

• Button

  You could create a button and customise the size and colour.

  

   

• Gallery

  Gallery is a image list to show a gallery from image post (featured image) or a set of library images, click the image it would open a beautiful light-box or go to a particular link.

  

   

• Single Image

  Single Image module is to enter a single image to your post/page.

  

   

• Message Box

  This module could create 4 types of message box: Success, Warning, Error, Information

  

   

• Accordion / Toggle

  Accordion and Toggle has the same style in front end, you could expand only one item in Accordion mode and could expand multiple items in Toggle mode.

  

   

• Tabs

  Horizontal Tabs

  

  Vertical Tabs

  

   

• Divider

  Divider module is to place a spacer or lines in the vertical dimension.

  

   

• Contact Form

  ZA support the famous plugin "Contact Form 7", once you install it to your WordPress, the Contact Form 7 option would appear in the Form Type drop-down menu. Following image is the standard Contact Form module looks like in front end.

  

   

• Video

  To enter a video to the page, you need to copy and paste the embeded code of the video, a example with Vimeo video:

  

  Supported video:

  • Vimeo
  • Youtube
  • and other embeded videos from video sites

  For Vimeo and Youtube video, you could directly copy/paste the link of the video:

  

   

• Promote

  It is a section to place a slogan or other words with a mouseover background color and link.

  

   

• Google Map

  The Google Map module need you provide the name of your location.

  

  If you want to use Google Map Style, please go to this page to edit the map style.

  

• Price

  Build your price block by Price module, by now it support not more than 4 price blocks, and it is recommended to make the module fullwidth(1/1).

  

   

• Slider

  

   

• Infographic

  Progress bar:

  

  Pictorial:

  

  Pie:

  

  Column:

  

  Big Number:

  

   

• Count Down

  The Count Down module allow you assign a deadline and to create a timer automatically on front-end.

  

   

3. Save and Load templates

Once you have build a layout via the page builder, and you want to clone them to other page/posts, you could save the current layout to a template and load then in the other page/post page builder section.

The Shortcode is assistant for article editing. You could add the shortcodes into WordPress editor or Text module of the Pagebuilder.
Please activate the BM Shortcode plugin.

1. Button

[button link="button URL" color="btn-dark"] Button Text [/button]
[button link="button URL" color="btn-light"] Button Text [/button]

2. Line

You could define width, color, and style for line.

[line width="100%" color="blue" style="solid"]
[line width="20px" color="red" style="dot"]
[line width="100%" color="pink" style="dashed"]
[line width="100%" color="green" style="dashed"]
[line width="90%" color="brown" style="dashed"]
[line width="80%" color="grey" style="dashed"]
[line width="70%" color="dark" style="dashed"]
[line width="60%" color="black" style="dashed"]

3. Highlight Text

Dictumst non sociis [highlight]highlight text[/highlight] purus purus duis.

4. Blank

[blank]

5. Image

[image style="standard" name="on" link="" target="off" caption="The cation of this image"]The image URL[/image]

6. Gallery

[ux_gallery name="on"]196,195,194,193,192[/ux_gallery]

The numbers are ID of images. Please check how to find the image(media library) ID?
1) Log into WordPress admin panel, navigate to Media click on Library.
2) Switch from Grid View to List View, then mouse over the image, you will see an image ID in the bottom.
3) Open the image, and copy this image ID from the URL in your browser address bar.

7. Half Width Image

[image style="halfwidth" name="on" link="" target="off" caption="This is the caption of image. Te mel diam mucius mediocritatem. Sed in dicunt qualisque. Mundi soleat mediocrem no quo, tempor mollis sea et."]http://wp.seatheme.net/upfront2/wp-content/uploads/sites/39/2015/05/7851820864_0ecab2c9a9_o.jpg[/image]

8. Dropcap

[dropcap]S[/dropcap]celerisque sit sit sociis augue hac in, sit, enim amet ut lectus. Eu in? Mauris dis, et scelerisque? Adipiscing purus.

9. Column

[one_half]This is a one/half column. Eu denique fierent postulant pro, ea est audiam neglegentur. Mel ne dictas tacimates corrumpit, in erat iisque detraxit mea. Sea ex sonet salutatus. Eu sed idque dolorum, te erant tempor eum, nam movet ornatus ad. Ne sit probo cotidieque, et vel sonet dicam officiis, ex odio clita pro. [/one_half][one_half_last] This is a one/half column. Duo cotidieque efficiantur an. [/one_half_last]

[two_third]This is a two/third column. Eu denique fierent postulant pro, ea est audiam neglegentur. Mel ne dictas tacimates corrumpit, in erat iisque detraxit mea. Sea ex sonet salutatus. Eu sed idque dolorum, te erant tempor eum, nam movet ornatus ad. Ne sit probo cotidieque, et vel sonet dicam officiis, ex odio clita pro. [/two_third][one_third_last] This is a one/third column. Duo cotidieque efficiantur an. [/one_third_last]

[one_third] This is a one/third column. Duo cotidieque efficiantur an. [/one_third][two_third_last]This is a two/third column. Eu denique fierent postulant pro, ea est audiam neglegentur. Mel ne dictas tacimates corrumpit, in erat iisque detraxit mea. Sea ex sonet salutatus. Eu sed idque dolorum, te erant tempor eum, nam movet ornatus ad. Ne sit probo cotidieque, et vel sonet dicam officiis, ex odio clita pro. [/two_third_last]

[one_fourth] This is a one/fourth column. Duo cotidieque efficiantur an. [/one_fourth][three_fourth_last]This is a three/fourth column. Eu denique fierent postulant pro, ea est audiam neglegentur. Mel ne dictas tacimates corrumpit, in erat iisque detraxit mea. Sea ex sonet salutatus. Eu sed idque dolorum, te erant tempor eum, nam movet ornatus ad. Ne sit probo cotidieque, et vel sonet dicam officiis, ex odio clita pro. [/three_fourth_last]

[one_fifth] This is a one/fifth column. Duo cotidieque efficiantur an. [/one_fifth][four_fifth_last]This is a four/fifth column. Eu denique fierent postulant pro, ea est audiam neglegentur. Mel ne dictas tacimates corrumpit, in erat iisque detraxit mea. Sea ex sonet salutatus. Eu sed idque dolorum, te erant tempor eum, nam movet ornatus ad. Ne sit probo cotidieque, et vel sonet dicam officiis, ex odio clita pro. [/four_fifth_last]

[two_fifth] This is a two/fifth column. Duo cotidieque efficiantur an. [/two_fifth][three_fifth_last]This is a three/fifth column. Eu denique fierent postulant pro, ea est audiam neglegentur. Mel ne dictas tacimates corrumpit, in erat iisque detraxit mea. Sea ex sonet salutatus. Eu sed idque dolorum, te erant tempor eum, nam movet ornatus ad. Ne sit probo cotidieque, et vel sonet dicam officiis, ex odio clita pro. [/three_fifth_last]

[one_sixth] This is a one/sixth column. Duo cotidieque efficiantur an. [/one_sixth][five_sixth_last]This is a five/sixth column. Eu denique fierent postulant pro, ea est audiam neglegentur. Mel ne dictas tacimates corrumpit, in erat iisque detraxit mea. Sea ex sonet salutatus. Eu sed idque dolorum, te erant tempor eum, nam movet ornatus ad. Ne sit probo cotidieque, et vel sonet dicam officiis, ex odio clita pro. [/five_sixth_last]

10. Fixed Width Column

[fixed_column margin_top="0px" margin_right="0px" margin_bottom="0px" margin_left="0px" width="600px"][height_light]This is a example of 600px Fixed Width Column.[/height_light] Mel ne dictas tacimates corrumpit, in erat iisque detraxit mea. Sea ex sonet salutatus. Eu sed idque dolorum, te erant tempor eum, nam movet ornatus ad. [/fixed_column]

11. Icon

[icon size="fa-lg"]fa-music[/icon]

[icon size="fa-2x"]fa-heart[/icon]

[icon size="fa-3x"]fa-plane[/icon]

12. Text with size

[text size="12px"]The text font size is customisable.[/text]

13. Text list

[list style="fa-map-marker"] Item 01 [/list][list style="fa-paper-plane"] The Text List support FontAwesome. [/list]

14. Switching Words

[switching_word size="h4" word1="Awesome" word2="Untouchable" word3="Foodful" word4="" word5=""]The Za theme is [/switching_word]

1. Tranlate by po/mo

To translate the static strings, it is recommended to download PO Edit here. After installing the PO Edit please follow the following steps:

1. Open the /za-theme/languages/ folder and duplicate the za.pot file, then rename it to your desired language code. For example, for German you need to rename it as de_DE.po for Spanish es_ES.po for Turkish tr_TR.po etc. You could find all the codes here.
2. Open the .po file in PO Edit, you will see all strings that need to be translated. Type the translation of a string into the "Translation" column. Do not delete or edit "Original string" part.
3. After finish translating, save the file, an .mo file would be created in the same directory.
4. Upload the new files into the languages folder of the theme /wp-content/themes/aside/languages/ and then follow this guide: http://codex.wordpress.org/Installing_WordPress_in_Your_Language#Single-Site_Installations.

Note: You will notice the content of "za.po"" is very complex, you could use the reduced version named "defaule_frontend.po" to edit necessary strings which will be show on front end.

2. WPML

It is recommend to use the popular WPML wp plugin if you want to make a multi-languages site:

2.1 Translate the Pagebuilder

1. Install the plugin Translation-Management. Go to WPML/Translation-Management”, make sure “Translation manualy” selected
2. Created a new page(make sure under default language), set to Pagebuilder editor, put in some Pagebuilder modules, click publish
3. Check ‘Duplicate’ checkbox and click on “Duplicate” button (see the screenshot below) at the right sidebar. “Duplicate” button will be displayed after checking of checkbox. Click the pencil icon to translate the page

   

4. When you edit the the page on non-default language, plz click “Translate independently” button at the right sidebar. Otherwise all your translations can be replaced by default content

   

5. Please don't use orgin modules, please clone or create new one module to edit for copied pages. (refer video guide)

2.2 To translate the copyright information, Comment title and so on, please:

1. Install the plugin WPML String Translation.
2. Go to left menu: WPML/String translation
3. Find the following string:

    [ux_theme_option]theme_option_copyright
    [ux_theme_option]theme_option_descriptions_pagination
    [ux_theme_option]theme_option_descriptions_comment_title
    [ux_theme_option]theme_option_descriptions_your_message
    [ux_theme_option]theme_option_descriptions_comment_submit
    [ux_theme_option]theme_option_descriptions_portfolio_learnmore
    

4. Click on the “translations” on the right side of every string item, enter the target translated words, check on “Translation is complete" and save it.

On admin panel the left hand, click "Appearance / Theme Options" to enter Theme Options

From Theme Options, you could:

• Import Demo Data to your website - Theme Options > Import Demo Data
  Please install the BM Pagebuilder plugin before import demo data.
  The Revolution slider demo data is not imported here, please go to Revolution Slider panel import demo data(download demo data 1,demo data 2)
• Export Demo Data - Theme Options > Export Current Data
• Setup Front Page - Theme Options > Front Page



• Setup Website Logo - Theme Options > General Settings > Logo
• Set Placehold Text - Theme Options > General Settings > Descriptions
• Set Copyright - Theme Options > General Settings > Copyright
• Set Icon - Theme Options > General Settings > Icon
• Set Page Loader - Theme Options > General Settings > Enable Fade-in Loading Effect
• Set Custom CSS - Theme Options > General Settings > Custom CSS



• Setup Social Media - Theme Options > Social Networks, set social medial icons on header and share button.



• Setup the Colour and background for Website - Theme Options > Schemes



• Setup the fonts for Website - Theme Options > Font Settings, if there is not fonts in selector, please click the "Update to new Google Font Data" button, it'll load the latest fonts from Google's servers.



• Upload the custom icons - Theme Options > Icons, you could upload custom PNG format icons from here, they could be used in social media links on header and Some modules in Page Builder(like Icon Box).



• Active RTL CSS - Theme Options > Layout > General > Enable RTL, Activate RTL layout
• Bordered style - Theme Options > Layout > General > Enable Bordered
• Social Media link - Theme Options > Layout > Header > TopBar Left, set social media link or text(Note: it isn't shown in single post)
• Set Social Search Button on header - Theme Options > Layout > Header > Enable Search Button
• Set WPML switch on header - Theme Options > Layout > Header > Enable WPML
• Setup Footer Widget - Theme Options > Layout > Footer > Enable Footer Widget for Post Pages / Choose Widget(To set widget, you need go to Wordpess Admin Panle: Appearance > Widgets > Footer 1-4 for Post/Page.)
• Enable logo on footer - Theme Options > Layout > Footer > Enable Footer Logo
• Setup the meta infomation - Theme Options > Layout > Page/Post > Show Meta On Post Content Page
• Hide Category infomation - Theme Options > Layout > Page/Post > Category to Hide on Page/Post, you could hide some category on posts/pages:
  
• Enable Author Section on content page - Theme Options > Layout > Show Author Section On Post Content Page
• Enable Post Navigation on content page - Theme Options > Layout > Show Post Navigation On Post Content Page
• Enable Related Post On Post Content Page - Theme Options > Layout > Show Related Post On Post Content Page



• Activate Mobile layout in mobile device - Theme Options > Mobile > Enable Mobile Layout

1. Javascript files
   1. Bootstrap 2.3.1 - styles/bootstrap.js - Some js for Bootstrap layout
   2. main.js - main js plugins: Waypoints v2.0.4, Flexslider v2.2, isotope, Modernizr 2.7.1, debouncedresize, DoubleTapToGo, imagesLoaded v3.1.6, SmoothScroll v1.2.1
   3. jquery.jplayer.min.js - js/jquery.jplayer.min.js - HTML5 media player plugin
   4. custom.theme.js - js/custom.theme.js - ZA theme main js
2. CSS files
   1. Bootstrap 2.3.1 - styles/bootstrap.css - Bootstrap layout
   2. ZA Pagebuild css - styles/pagebuild.css - Pagebuild layout and module style
   3. style.css - style.css - ZA theme main css

Once again, thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to publish your question here.

Thanks,
uiueux studio