Visit the uploader form in your site admin : http://example.com/wp-admin/theme-install.php?tab=upload and when presented with the upload form, select the bider.zip file from the downloaded theme file.

To install theme using FTP uploader, you will need to extract the main theme file (bider.zip) and upload the content found in the zip into remote wp-content/theme/bider

After finished uploading the theme via WordPress uploader form or Directly via FTP, you will be redirected to the theme activation page, hover to the Bider theme box and click on the Activate button to activate the theme.

Steps for importing the demo content

1. Visit the demo importer setting page, you can click the "Demo Import" link found in the "Appearance" menu item in the Wordpress menu sidebar
2. Click on the "Import Demo Content" button

Steps for removing the demo content

1. Visit the demo importer setting page, you can click the "Demo Import" link found in the "Appearance" menu item in the Wordpress menu sidebar
2. Click on the "Remove Demo Content" button

Handling image size

1. If there are no width or height specified, if the uploaded image is larger than the #logo grid size then the image will be shrinked by its width to keep the propotional ratio to match the width of the #logo grid size.
2. The image shrinking is coded by CSS in the /assets/theme/css/style.css under the .home-link rules.
3. If specified the image will follow the configured width and height ignoring the shrinking rules above.
4. To determine the correct image size, you must follow the largest maximum #logo width in every responsive scenario. Example if you set the #logo to have 12 column grid under mobile (768px and less screen width) then the logo should have largest of 768px width.

You can upload custom image to be served as the browser favicon icon. The theme will not resize the uploaded image automatically, it is recommended to upload image with 16px x 16px or 32px x 32px size.

When the disable parent link options is enabled, all the first level in the navigation menu will be converted to dummy link preventing user to click on the first level menu if the menu item has children.

When the enable slick navigation menu is disabled and user is has viewport of less than 768px, the mobile version of menu will not be shown and instead the theme will use the normal menu element

When the enable sticky header is disabled, the header element will not follow on the top of the screen when user is scrolling down

It is possible to completely disable the page initial loading animation by toggling the page loading animation option to off.

Customizing the animation text and animation styles is done by changing the value for each text field value respectively.

The background color or images during initial loading can be customized via Style Manager tabs under the body element.

You can change the footer copyright message from this section. It will accept valid html tags.

You can change set the title and the content for the 404 page. The title and content can accept html tags but not shortcodes. If you wish to make more advanced customization to this page, you can edit the 404.php template and put the custom modification there.

Maximum Width

The Maximum width settings is the setting for configuring the total maximum width of the whole site. The settings will apply additional class to the .controller-fluid element to limit the maximum width that the element should have.

The "fluid" width mode will have a limit of 1400px width that is coded staticly. This is to prevent the layout broken under very large screen size. eg. screen that has 1900+ px width.

Page Style

The theme supports "normal" and "boxed" version of page layout, the normal style will open the width of #page element to 100% width which will make it stretch as the wide as the page screen, While the boxed style will limit the width of the #page element according to the size configured at the maximum width options which will make the whole site content resized to the maximum width value.

Teaser Listing Page

This sidebar setting will be applied to the blog listing page and / or page that use :

1. Page that uses index.php as the template. eg. search page, category page, author page, tag page.
2. Page that uses page-blog-list-sidebars.php as the template

Single Post

This sidebar setting will be applied to the blog single post page and / or page that use :

1. Page that uses single.php as its template
2. Page that uses attachment.php as its template

Single Page

This sidebar setting will be applied to the page single and / or page that use :

1. Page that uses page.php as its template

Page 404

This sidebar setting will only be applied to page not found page that uses 404.php as its template.

Portfolio Teasers Listing Page

This sidebar setting will be applied to the portfolio listing page and / or page that uses these as the template :

1. Page that use taxonomy-portfolio_category.php as its template, eg. Portfolio Category taxonomy page
2. Page that use page-portfolio-default.php as its template
3. Page that use page-portfolio-grid-sidebars.php as its template
4. Page that use page-portfolio-list-sidebars.php as its template

Portfolio Single Page

This sidebar setting will be applied to the portfolio single page and / or page that uses these as the template :

1. Page that use single-portfolio.php as its template

Mobile Column Size

This settings will be applied to device with screen width less than 768px.

Tablet Column Size

This settings will be applied to device with screen width larger than 768px but less than 992px.

Small Column Size

This settings will be applied to device with screen width larger than 992px but less than 1200px.

Large Column Size

This settings will be applied to device with screen width larger than 1200px.

Mobile Column Size

This settings will be applied to device with screen width less than 768px.

Tablet Column Size

This settings will be applied to device with screen width larger than 768px but less than 992px.

Small Column Size

This settings will be applied to device with screen width larger than 992px but less than 1200px.

Large Column Size

This settings will be applied to device with screen width larger than 1200px.

Mobile Column Size

This settings will be applied to device with screen width less than 768px.

Tablet Column Size

This settings will be applied to device with screen width larger than 768px but less than 992px.

Small Column Size

This settings will be applied to device with screen width larger than 992px but less than 1200px.

Large Column Size

This settings will be applied to device with screen width larger than 1200px.

Mobile Column Size

This settings will be applied to device with screen width less than 768px.

Tablet Column Size

This settings will be applied to device with screen width larger than 768px but less than 992px.

Small Column Size

This settings will be applied to device with screen width larger than 992px but less than 1200px.

Large Column Size

This settings will be applied to device with screen width larger than 1200px.

Mobile Column Size

This settings will be applied to device with screen width less than 768px.

Tablet Column Size

This settings will be applied to device with screen width larger than 768px but less than 992px.

Small Column Size

This settings will be applied to device with screen width larger than 992px but less than 1200px.

Large Column Size

This settings will be applied to device with screen width larger than 1200px.

Mobile Column Size

This settings will be applied to device with screen width less than 768px.

Tablet Column Size

This settings will be applied to device with screen width larger than 768px but less than 992px.

Small Column Size

This settings will be applied to device with screen width larger than 992px but less than 1200px.

Large Column Size

This settings will be applied to device with screen width larger than 1200px.

Mobile Column Size

This settings will be applied to device with screen width less than 768px.

Tablet Column Size

This settings will be applied to device with screen width larger than 768px but less than 992px.

Small Column Size

This settings will be applied to device with screen width larger than 992px but less than 1200px.

Large Column Size

This settings will be applied to device with screen width larger than 1200px.

Custom CSS

The theme will try to give user as much control for changing the color and font styling for different theme elements, but it will never designed to be able to change every styling found in the theme. For that purposes it is recommended to use custom css either from the theme custom css gui options or by directly creating a new css file and place them in the theme assets folder.

WordPress Customizer

The color schema can also be customizeable via the Customize Style GUI and from the Wordpress Customizer GUI, the customized value will be stored in the theme settings database entry. The customized settings value is stored per schema not globally. Eg. User can have a different customized value for schema A and schema B.

Change Schema

This button will change the current active schema without removing the previous stored schema customized value.

Reset Schema

This button will remove the customized value for the current active schema only.

Live Preview

If you wish to have a live preview when changing the color, you can use Wordpress Customizer page to do it. The theme custom schema system is fully compatible with Wordpress Customizer. The only glitch is, for some elements (such as hover or text color) you may need to save the customizer form first to force the live previewer to generate the proper css for it.

Custom CSS save location

The custom css entered in this GUI will be saved in the database and printed as inline CSS after the theme color schema CSS inline styling.

Steps for creating custom CSS File and Javascript File

1. Create the custom css file and give the file an extension of .css
2. Upload the file to wordpress_root/wp-content/themes/bider/assets/custom/css folder

All .css or .js file found in the /css and /js folder will be auto loaded when the theme bootstrapping.

Visual Composer Default Configuration

The Visual Composer Plugin will be automatically installed and enabled during theme activation process and it will be have default configuration as follow :

1. Content types enabled for Page only
2. Visual composer is set to be responsive

Shortcode Parents

Make sure that this element has parent ROW, it doesn't have to be the direct parent but somewhere along the top of this element a ROW must exists or the padding will not be aligned properly.

Hiding Element

If the attribute value is zero for mobile, tablet, small, large then it will use hidden-xx as the class to hide the element under certain viewport.

Matching Attribute Mode

This element is just a container wrapper for the list object element. The mode attributes should match the children elements in this format:

• ul parent mode must have li children type.
• div parent mode must have a children type.

Parent Shortcode

Although you can use this shortcode independently without wrapping it inside the [bslistgroup], the markup will not be styled properly with Bootstrap CSS.

Matching Attribute Mode

This element attribute type must match the parent attribute mode in this format:

• ul parent mode must have li children type.
• div parent mode must have a children type.

Valid Children Shortcode

This element must only contain the [bsmediaobject] as its children content.

Valid Parent Shortcode

This element must be embedded inside the [bsmedialist] for valid HTML markup and CSS styling.

Image Attributes Value

The img attributes can hold image full url or WordPress attachment id.

Valid Children Shortcode

To avoid Javascript error, this element must only have [jqflipcontent] as its content

Valid Parent Shortcode

To avoid Javascript error, this element must be embedded inside the [jqflipster].

Valid Children Shortcode

This element must only have [timeevents] or [timemajor] as its content for valid html markup.

Valid Parent Shortcode

This element must be embeeded inside the [timeline] element as its parent.

Valid Parent Shortcode

This element must be embedded inside the [timeline] element as its parent

Valid Children Shortcode

To avoid Javascript error, this element must only have [wpcarouselcontent] or [wpcarouselimage] or [wptestimonial] as its content

Valid Parent Shortcode

This element must embedded inside the [wpcarousel] for valid HTML markup

Valid Parent Shortcode

This element must embedded inside the [wpcarousel] for valid HTML markup

Valid Parent Shortcode

This element must embedded inside the [wpcarousel] for valid HTML markup

This style class will create a very large title (42px) and bold text, recommended for all element.

This style class will create a very large title (30px) and normal text, recommended for all element.

This style class will create a large title (30px) and bold text, recommended for all element.

This style class will create a large title (37px), recommended for all element.

This style class will create a large title (24px), recommended for all element.

This style class will create a small title (18px), recommended for all element.

This style will use CSS3 to transform a div into a diamond shape, The element must have exactly the same markup as example above for this style to work.

This style will use CSS3 to transform a div into a circled shape, The element must have exactly the same markup as example above for this style to work.

This style class will create a rounded edge element (6px border radius), using CSS3 border-radius rules and only applicable to div element.

This style will create a numbered list (01, 02, 03...) with boxed border for the list.

This style class hide the form label element.

This style class will remove all element padding.

This style class will remove element left padding and add 30px to the right padding.

This style class will remove element left padding.

This style class will remove element right padding.

This style class will transform text to uppercase.

This style class will add font-weight: 800 to text.

This style class will add extra large size to font (60px).

This style class will add font-weight of 600 to text.

This style class will enlarge the text to 22px size.

This style class give 18px as the font size for text.

This style will also format social icon into medium size if used inside the Social Icon shortcode or visual composer element

This style class give 10px as the font size for text.

This style will also format social icon into small size if used inside the Social Icon shortcode or visual composer element

This style class will style the text to italic.

This style class will remove give font wieght light to the text.

This style class will force first level children to use inline-block as the display mode.

This style class will give the element display inline-block as the display mode.

This style class will align text vertically middle, this only works if the display mode inline.

This style class will align text vertically top, this only works if the display mode inline.

This style class will align text vertically bottom, this only works if the display mode inline.

This style class will clear all the floats, usefull when creating new rows.

This style class will add box shadow to the element.

This style class will add overflow:hidden css rules.

Example on how to create new action hook for init action

Step 1

• Register the hook to VTCore_Zeus_Init class found in core/init.php by adding the "init" string to the $actions array.

Step 2

• Create a new file called init.php and place them in the core/actions folder.
• Inside the new file create a new class called VTCore_Zeus_Actions_Init().
• Inside the class create new method called action.
• Insert the usual code block for that action inside the action method.

Example on how to create new filter hook for the_excerpt filter

Step 1

• Register the hook to VTCore_Zeus_Init class found in core/init.php by adding the "the_excerpt" string to the $filters array.

Step 2

• Create a new file called the_excerpt.php and place them in the core/filters folder.
• Inside the new file create a new class called VTCore_Zeus_Filters_The__Excerpt().
• Inside the class create new method called filter.
• Insert the usual code block for that filter inside the filter method.

Example on how to create new schema with id Example

Step 1

• Create new folder in schemas/example
• Create new file in the schemas/example/register.php

Step 2

• In the schemas/example/register.php create new PHP class called VTCore_Zeus_Schemas_Example_Register that extends VTCore_Zeus_Schema_Base
• In the class create new method called setContext that fills in the $context variables with array with schemas, sections and color keys

Folder

For autoloading purposes all custom templates must be placed inside templates/custom folder

Registering Custom Folder Path

You can register custom template path outside the default templates/custom folder by invoking VTCore_Zeus_Init::getTemplatingSystem()->registerTemplates('path', array('folder1', 'folder2'));

Template Header

The template file must have these header doc in the top of the file :

<?php
/*
 Template Name: The Name of the template
 Template Description: The Description of the template
 Post Types: page, portfolio, post
*/
?>

Registering Post Types

Not all post type is registered to be allowed to use the custom template system, you can register new post type that is allowed to use the system by either :

• Invoking hook filter vtcore_zeus_filter_registered_templates and add the $registered array with the new post type id
• Invoking the Zeus init method VTCore_Zeus_Init::getTemplatingSystem()->addRegistered('new_post_type_id');

Folder

The folder assets/ is already configured for the asset system, all asset subfolder will be automatically registered to the asset library.

Registering new asset

You can add a new asset by creating a folder inside the assets/ folder. for example we want to register "example" asset with example.css and example.js as the file

• Create new folder called assets/example
• Create new folder called assets/example/js
• Create new folder called assets/example/css
• Place the example.css in the assets/example/css/example.css folder
• Place the example.js in the assets/example/js/example.js folder

Loading Assets

It is recommended to load the assets via core/actions/wp_enqueue_scripts.php and to load an assets you can invoke VTCore_Wordpress_Utility::loadAsset('asset-name');.

Deregister Assets

This must be invoked before loadAsset method other wise you must use wp_dequeue_style function VTCore_Wordpress_Utility::deregisterAsset('asset-name');.