Active Host - 20Script

# Active Host WordPress Documentation

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much! If you wish to report a bug or request a new feature, please get in contact.

# Documentation

## i. Installation

### First upload the ActiveHost theme folder to wp-content/themes on your WordPress installation. Then activate the theme:

### Next, install and activate the plugins you desire (I recommend installing them all):

### Import updated demo data. This file should have been created when you activated the theme.

Ignore any error messages regarding galleries, albums or NextGEN plugin.

This file will be on your server, not in the ThemeForest download. For example http://yourdomain.com/wp-content/ActiveHost/includes/demo_data_updated.xml

### Now go to Settings>Reading and change the homepage to the "Homepage" page:

### Set your own theme options:

### Create Footer + Slide Styles:

Open up each Footer and Slide with the page builder and simply click done. This will create the necessary styles.

### Save Blog Category Style by going to Posts>Categories and click edit blog. Simply save this to apply the sticky area to the top (red background as standard).

The theme should now be set up like the demo. You should use the demo pages to get a feel for the beaver builder functionality and how the custom widgets are used to create each page. Once you understand how it works you can duplicate pages or create your own and use the custom widgets. If paddings do not look the same on your install, please check the page builder global settings and the post types (settings>page builder>post types) are like so:

## ii. Homepage

The homepage is a page template which you can see by click edit on the demo homepage (not the page builder link). You can select which slides you want to show (and the order), various settings for the slider and also change the background for the slider area. In addition you can select a custom footer which is only shown on homepage styled pages. The rest of the content is created in the page builder.

## iii. Slides

Slides are a custom post type used to create content for individual slides. You can add you own easily in the same way you would create a page. Simply add a new plan and create the design in the page builder. You then select this slide in the page settings in which you want it to appear.

## iv. Footers

Footers works in the same way as slides. You can design content in the page builder which will be shown at the bottom of the page. You can then go to theme options and select certain footers for certain page types.

## v. Plans

The plans custom post type is used for your hosting plans. Each plan has a range of associated taxonomies (eg Bandwidth, Disk Space). When creating a new plan simply fill out values for each taxonomy which applies. If you want to show a tick rather than a number simply place the value as @tick@, if you want it to be a cross @cross@.

To separate shared hosting from a dedicated server you can create categories called "Hosting Type" and select whichever applies.

The other custom fields give basic details such as the price (include the currency symbol), tagline, color and order link. The color is used in various widgets such as the order button background or the price background. It can also be applied to the WHMCS cart (see WHMCS section). The order link should be a link to purchase the plan (can be taken from WHMCS).

As standard plans do not have an individual page to view them. They show up in the WordPress search but the link will take you straight to the order page. Instead all pages can be created using an array of available widgets such as the plan widget or plan comparison. Stylings can be altered on these individually (see widget section).

## vi. Blog Archive and Posts

The archive pages show sticky posts on the top if you select that option. The best way to create the blog is as in the demo. A top level "Blog" category used to store all posts. Within the blog category there are various other categories. For each category you can edit the appearance. Click edit on the category and you can choose whether to show the sticky section at the top and even change the background and text.

The same applies to individual posts. If you click edit on a post and check the custom styling box you can alter the top background.

The widgets in the sidebar can be changed by going to appearance > widgets.

## vii. Menus

If you used the demo content (recommended) then the menus should hopefully already be set up. There are two menu positions - Main Menu and Support Links. The main menu is rather obvious. The support links are those which appear in the top bar, under live support. Please note, for support links you can add an icon before the text by adding <span class="glyphicon glyphicon-facetime-video"></span>before the text in the "Navigation Label". Change the bolded to suit the icon you need.

The other menus in the demo are used as widgets in the footer.

## viii. Testimonials and Client Websites

Both custom post types are very simple. Simply add a featured image, content and edit custom fields. These posts are then either shown by the filter widget as on the clients page or as featured testimonials such as on the homepage.

## ix. Using Page Builder

Using the page builder is likely to be the main learning experience. Once you master the basics, it makes created very different pages very easy.

### Creating full width content areas

First create a new page and drag 1 Column from rows into the area you want it to show and click edit.

Set to full width and change the background to whatever you want. If the content is going to be absolutely positioned (such as clouds top, filter etc) then add wrapper to the CSS class under the advanced tab. You can also change paddings or margins if you like.

### Adding Section Title Widget

To add a section title simply drag and drop the Section Title widgets from add content > wordpress widgets. Fill out the fields and click save.

### Adding Featured Plans

Each featured plan widget shows only one plan. So if we want to show four we simply drag a 4 column row layout below the section title then drag a Hosting Plan into the first column. We then select the options we want for this plan. Most should be obvious, featured means this plan starts off coloured before hover and color override means the color for the price background will override that which is set for the plan. To add a line of details simply select the taxonomy, the text after value (if necessary) and the class for the icon (this can be either fontawesome or bootstrap glyphicon, eg fa fa-download - see http://fontawesome.bootstrapcheatsheets.com/). Click Add New Line to add another (please note the content won't automatically show until you click save).

### Duplicating a Widget

So the first plan was created, to add three more we can simply duplicate the first one and change the plan and whether or not it is featured:

If the margins aren't quite right then we should alter the column settings under the advanced tab and add 15px to the left and right paddings. You can then do this for the remaining columns or simply duplicate the column and delete the others.

That is a basic guide to using Beaver Builder. Using this information you should be able to use all widgets supplied.

### Option Bar and Content Select

Some extra classes are required to correctly use the Option Bar (sub navigation to switch between clients and testimonials on clients page). To construct this, first creat a full width section as described before and make sure the top and bottom paddings are 0. Inside that add the option bar widget. For each link there is a Content Class. This class is must the same as the class you apply to the row which you add to contain the associated data. For example, I have "section-testimonials" for the testimonials link. I then created a full width area under the option bar as normal. On the advanced tab for this row I have added the class "section-testimonials". In addition to this you need to add "dropdown-box". The row should now have a red border around it. This shows you the content will not be visible until the associated link is clicked.

To make sure a certain row is visible to begin with you need to 1. click the checkbox featured on the link in the optionbar widget and 2. add active to the class of the content row (so should have 3 classes in total now). When you have added the active class, the content row should now have a blue border to show it will be visible.

## x. WHMCS Setup

The WHMCS integration is such that the WHMCS is connected to WordPress so WordPress functions can work within WHMCS. As such it needs to be on the same server. During development I had the folder structure so whmcs was a folder inside the WordPress root (ie alongside wp-admin and wp-content).

The first thing to do is to install the WHMCS template by moving activehost folder into the WHMCS templates folder and moving the activehostcomparison and activehostslider folders into the templates>orderforms folder. In setup>general settings of the WHMCS admin you can choose these templates.

Setup you product groups (eg Shared Hosting, Dedicated Servers etc). For each you can choose a different order form template. In my demo I used the slider for dedicated servers. Create your products for each group and add the product descriptions like so (the ID number should be the same as the plan ID on WordPress). This allows the order form to get the correct colour for the plan. For future developments it may also gather taxonomy info such as bandwidth.

Also make sure to set up your domains and the list of allowable TLDs. Please turn off catcha for domain lookup if it causes errors.

## xi. WHMCS Integration

### Connect the two

Set your WHMCS URL and WHMCS dbconnect path within themeoptions. Make sure the dbconnect is an include path. Then go to your WHMCS template folder and edit header.tpl for activehost and change the wp-load path so WHMCS can access WordPress functions. The path is relative to your WHMCS main folder. For my example, the WHMCS folder is placed within the WordPress root. WP-Load is therefor up 1 level.

### Top Bar

Within theme options click top bar options and change the links to the correct WHMCS path. For the Log in HTML you need to go to WHMCS admin > Utilities > Integration Code and copy Client Login. You should only have to copy the form action into the following template (ie replace localhost url). The log in link should only show if the user is not logged in. If they are, the client area link should be shown instead.

### Domain Look-up Small

The domain lookup as featured in the footer is set in the theme options under the associated tab. The same process as the log in, you need to copy the form action and the select field options from your integration code so it looks like the following (with different options and form action):

### Domain Look-up Section

The larger domain section is slightly more complex. To add this you should add the widget Domain Section using the page builder. This widget presents you with a button to get the content from WHMCS. When you click this button your domain checker page will be scraped for the relevant content. This content will then be saved in wp-content/plugins/widget-domainbig/domain-big.php. The content of which will be outputted. The WHMCS url needs to be set up correctly in theme options for this to work. If you find the output is not quite right you can manually edit the file or contact me for assistance. Please note, only the search field and buttons are output. That means the widget should be place under a heading such as shown on the demo homepage. If you add new domain TLDs you will need to refresh the content by clicking edit on the widget and pressing the get content button again.

### Add Link to Knowledgebase

You can add a link to the Knowledgebase title support by clicking links on the wordpress menu section and typing in the url. The transition between the WHMCS and the WordPress pages should be seamless. You can add a custom footer for the WHMCS under theme options. Please note the language select will only show up in the top bar of WHMCS pages.