Broad Documentation

Home / Broad Documentation

01.GET STARTED

File Include

  • The theme zip file broad.zip
  • Child theme for easier customize in broad-child.zip
  • Document in Documentation.zip

Back To Top

02.INSTALLATION

System Requires

To use Broad, you must be running WordPress 3.9 or higher, PHP5.4 or higher, and MySQL 5 or higher. We have tested it with Mac, Windows and Linux. Below is a list of items you should ensure your host can comply with.

Recommended PHP Configuration Limits

Many issues that you may run into such as: white screen, demo content fails when importing, empty page content and other similar issues are all related to low PHP configuration limits. The solution is to increase the PHP limits. You can do this on your own, or contact your web host and ask them to increase those limits to a minimum as follows:

max_input_vars = 3000
memory_limit = 300M
max_execution_time = 300
max_input_time = 300
upload_max_filesize = 64M
post_max_size = 64M

Back To Top

Download Broad Theme

Get the Broad Theme installation package from your account (after login on Themeforest.net) at  downloads page  and save it to your computer.

theme-download

Back To Top

Theme Installation

Installation via WordPress

Step 1 – Login to your WordPress Dashboard

Step 2 – Go to Appearance > Themes. Click the Add New button or Add new theme link.

Step 3 – Click on the Upload Theme button. Locate “broad.zip” and click Install Now. If you want to use child theme, you can upload broad-child.zip

Step 4 – Active Broad or Broad Child.

Installation via FTP

Step 1 – Log into your Hosting server using an FTP client (like FileZilla or WinSCP).

Step 2 – Locate “broad.zip” and that you found in your ThemeForest Package and unzip theme somewhere on your hard drive. Once it is unzipped it will look like a folder named Broad with all theme files in it.

Step 3 – Locate your WordPress installation and upload the theme directory Broad (you unzipped in the previous step) into ../wp-content/themes/ in your WordPress installation.

Step 4 – Click on the Activate button to activate Broad. Congratulations, you have now activated Broad! You can now proceed with Broad’s Plugin Installation.

Back To Top

Required Plugin Installation

1) Install required plugin

You can follow the steps below:

The installing process status will be shown in your browser. It may takes a few minutes, so please be patient. After successful, your screen will be like this:

2) Activate required plugin

 

Back To Top

Install Demo Content

Note 1: Before importing demo content, please make sure you have already installed and enabled all required plugin mentioned above. In addition, if your PHP setting doesn’t met the requirement , the System Status will be red, so please configure your setting reasonably ( see System Requires above).

Note 2: If you plan to use child theme, please make sure to active the child theme before perform demo installation.

To install the demo, you can follow the steps below:

Step 1 – In section 9WPThemes, choose tab “Install Demos” or click Install Demo Data. You can choose the demo you want import then click install

Step 2 – Click I understand, just install it.

To check the process and the error log, you can click the button at the bottom right corner of your screen.

After successful installation, this dialog will show up :

floral-install-demo-content-05

Back To Top

03.CONFIGURATIONS

Content template

Content Template is a content block is created beforehand and you can set it to some specific areas of your page. There are many areas you can set Content Template (except Header Area):  Header Area – Before, Header Area – After, Page Title Area, Page Title – After, Page Content Area, Footer Area – Before, Footer Area, Footer Area – After.

content-template

You can see content templates are used in some areas of our demo. For example, the footer:

 

How to create a Content Template:

Step 1: In the Admin sidebar, select Content Template > Add New Content Template.

floral-content-template-03

Step 2: Use Visual Composer shortcode to create your own Content Template.

floral-content-template-04

How to use Content Template:

1) Set content template in tab Content Template of Theme Options or Meta options (the options area at the bottom of your  page editor)

In Theme Options:

 

In Metabox Options of your page editor:

 

2) Add content template to the Page Content Area by using shortcode Broad Content Template:

 

 

Back To Top

Logo & Favicon

You can update  the logo and favicon in tab  Logo & Favicon of Theme Options

To set the size of the logo and determine which logo to show in your header area, please check the subtab Header Modules of tab Header

 

Back To Top

Header

There are 2 tabs related to Header Area in Theme Options: Header and Header Module

 

Tab Header

In this tab, you can edit the general style of the header:

 

Tab Header Module

You can use this tab to configure the header modules (Logo, Main menu, submenu, Seach, Separator, …)

 

 

Back To Top

Page title

You can setup Page Title by configuring Page Title options or using a Content Template.

+) use Page Title options

Note: you may only get your page title area like the screenshot below. Thus, for the flexible content, I suggest you use  Content Template as your page title

+) use Content Template

 

Back To Top

Footer

You can create Footer by configuring Footer options or using a Content Template.

+) use Page Title options

Those options only help you create a simple footer is liked the screenshot below. Thus, for the flexible content, I suggest you use Content Template and set it as the footer.

+) use Content Template.

 

Back To Top

MetaBox Options

If you scroll down to the bottom of your page editor, you will see an area named  Options. We call that area Metabox Options.

Most options of Metabox Options just like the ones in Theme Options, except they have default value. If you leave the fields in Metabox Options to blank or set them to Default,  the options will override the same ones in Theme Options.

Note:

+) You can disable some specific areas of your current page (like Footer, Page Title, Header Area – Before …) by set the fields corresponding to them to OFF.

+) Metabox Options does not take effect in any archive types. In this case, you have to use feature Overriding Template of Theme Options.

Back To Top

Overriding Template

If you note in Theme Options, there are 4 sections have overriding default template field: Header, Content Template, Page Title, Footer.

You can use that field to overriding the default template for : 404 page, Search page, Archive types and Single types (Blog, Service, Event).

Example of using overriding default template:

In the following I will show you how to override page title area of Service Archive page.

As you see below, field Page title template in tab Title is set to Off

It means every pages in your site do not have page title area (and Service Archive page too)

 

If you want the page title only show in Service Archive page, you have to override the default template (in tab Title) for Service Archive page. To do that :

1) Select Service Archive in field Override default settings in, then click Save Change. After loading, a section named Service Archive Page Title will appearance below tab Title

 

2) In the new tab, set Page title template to Content Template the select the content template you want to use as your  Service Archive page title area

 

Here is the result:

 

 

Back To Top

Custom CSS

There are 3 ways to use your custom CSS:

1) Use Visual Composer custom CSS feature

2) Add your custom CSS to Theme Option > Custom CSS & JS > Custom CSS

Note: The area allows you to use SCSS syntax. Below is a list of some SCSS variable you can use:

  • $broad-primary-color: get primary color value (in section Color of Theme Options).
  • $broad-secondary-color: get secondary color value.
  • $broad-heading-color: get heading color value.
  • $broad-text-color: get text color value.
  • $broad-meta-text-color: get meta text color value.
  • $broad-border-color: get border color value.
  • $broad-primary-font: get primary font value (in section Typography of Theme Options).
  • $broad-secondary-font: get secondary font value.

3) Use Broad child theme and add custom CSS to style.css of the child theme

You follow the steps below to use your custom CSS in the child theme:

 

Back To Top