How to fix layout after enabling SEO friendly URLs in WHMCS

Jack Curtis — Fri, 20 Apr 2012 11:35:18 +0000

In this tutorial I’ll show you how to fix the common broken WHMCS template issue when enabling SEO friendly URLs in WHMCS. This tutorial is specific to our WHMCS themes but will be similar for any templates.

Why does the error occur?

The error occours because when you enable SEO friendly URLs there is a automatically folder structure applied to all knowledgebase articles & announcements. e.g /announcement.php/keyword/keyword-keywords.html. What this does is make the lines of code that calls the Javascript and CSS invalid which is why when you load your website the content is still there but the style is missing.

Why don’t you include a fix by default?

The reason for this is because the correct file location to use will depend on whether you have WHMCS installed in root or in a directory. Also 90% of users do not enable this feature so we decided it’s best to create this article to cater for those that do.

How to fix it

Follow the guide based on your install location:

WHMCS installed in root

Open the following file:

/templates/YOUR_TEMPLATE/header.tpl

find the following code:

and add a / to the beginning of each file location as so:

The / represents the public_html folder so no matter which URL structure is used the file location will always be correct.

WHMCS installed in sub-directory

I’ll this guide we’ll assume that WHMCS is installed in /public_html/clients/ (could represent clients.domain.com or domain.com/clients/)

Open the following file:

/templates/YOUR_TEMPLATE/header.tpl

find the following code:

and add a / to the beginning of each file location as so:

The / represents the public_html & together with clients represents the /public_html/clients/ folder so no matter which URL structure is used the file location will always be correct.

Adding Google Analytics to your WHMCS template

Jack Curtis — Fri, 20 Apr 2012 11:18:53 +0000

WHMCS have since released a official module that makes installing Google Analytics very easy making the following guide no longer required (unless you’re using a version under 4.5).

Click Here To Download, It’s Free!

In this tutorial we’ll cover how to add Google Analytics to your WHMCS based website. This tutorial is aimed specifically at our premium WHMCS Theme but will work with any WHMCS template.

Firstly you’ll need to signup for Google Analytics, add your website and then you’ll be provided with some Javascript code:

Next you’ll need to wrap this code in {literal}{/literal} tags. These are specific tags for the template system that WHMCS runs on (Smarty) that basically tells the browser to run the code inside exactly how it is and don’t confuse it with WHMCS/smarty code (stops conflict). In short these are required for any inline Javascript/CSS used in WHMCS templates.

Once added your code should look like:

{literal}

{/literal}

Finaly to install your code open the following file:

/templates/YOUR_TEMPLATE/footer.tpl

and the code just before the following tag (at the bottom of the footer.tpl file):

WHMCS Themes – Admin Based Settings Area!

Jack Curtis — Wed, 28 Mar 2012 16:06:11 +0000

Watch WHMCS Themes Settings Area on Youtube.

WHMCS Themes – Multi-display options demo

Jack Curtis — Wed, 28 Mar 2012 16:05:58 +0000

Watch WHMCS Themes multi-display options on Youtube.

How to upgrade your WHMCS template to V3.4

Jack Curtis — Wed, 28 Mar 2012 16:05:45 +0000

The update to V3.4 is well worth doing as from this point anything changed in the settings area (plans names, specs, pricing, general settings, seo settings etc) will not be lost when doing future upgrades.

Click Here To Hire Us For This

This guide is specifically for those that have not made any changes to the template files or those that are happy to re-add them to the new version.

1) Download the latest version – Login to your Zomex.com account, at the top of the page hover over My Account and click on My Products. Next select view details, click on the downloads tab and then download V3.4.

2) Unzip the folder – Move the .zip file to your desktop and unzip/extract the contents.

3) Open up your FTP program & uploads modules – Open up your FTP program, on the left open up the template folder > upload and on the right side open up the root WHMCS folder. Upload only the modules folder from the template download. By uploading only the modules folder you’ll be able to apply your plans to the new settings area without effecting the old version.

4) Login to WHMCS and activate the settings area – Login to WHMCS, go to setup > Addon Modules. Scroll down to the bottom and you’ll see a new module named Zomex Template Manager, click on activate and then scroll down to the bottom of this page. Under the access control for Zomex Template Manager select Full Administrator and click save.

5) Apply your license & settings – You’ll now notice a new link under the addons tab named Zomex Template Manager, click this. Once the page has loaded you’ll be prompted to add your template license key. Add the license key for your template (the same one used in the configuration_template.php file – it will work for both locations without causing issues). Next you’ll see the new settings area appear. At this stage you can match the settings in your configuration_template.php file using the following guide:

Zomex Template Manager

6) Upload all files and activate – Next go back to your FTP program and upload all of the template files to root – the contents of the “upload” folder (it’s ok if you re-upload the module folder as the settings are stored in the database). Lastly activate the V3.4 version under setup > general settings > template >

Click Here To Hire Us For This

WHMCS Themes – How to change the hosting type of a default page

Jack Curtis — Wed, 28 Mar 2012 16:05:32 +0000

In this tutorial you’ll learn how to change one of the WHMCS Template hosting pages to something else. For example you might want to provide windows hosting in replacement of reseller hosting, in this case it’s very easy to change the reseller hosting page to windows hosting.

For this tutorial let’s say you want to change reseller hosting (custom 2) to windows hosting:

1) Rename the files

Firstly you’ll want to rename the page (for search engine optimization reasons).

To do this login to cPanel or your FTP program, navigate to /public_html, right click reseller-hosting.php and re-name to windows-hosting.php

Next navigate to /public_html/templates/YOUR_TEMPLATE/, rename reseller-hosting.tpl to windows-hosting.tpl

2) Adjust the page settings

Open the following file:

/public_html/configuration_template_v3-4.php

scroll down to the bottom of the file and find the settings for custom2 as so:

A screenshot showing the page settings

Change the page and template line to match the new names as so:

$custom2_language_title = ‘custom1title’;
$custom2_page = ‘windows-hosting.php‘;
$custom2_tpl = ‘windows-hosting‘;
$custom2_forcessl = ‘off’;

3) Tweak the language references

Next you’ll need to change the custom2 references in the language file(s) to Windows Hosting. To do this we’ll use English as an example language. Open the following file:

/public_html/modules/addons/zomex_template_manager/lang/english.php

Replace:

$_LANG['custom2title'] = “Reseller Hosting″;

with:

$_LANG['custom2title'] = “Windows Hosting“;

^ This will change the page title to Windows Hosting.

Replace:

$_LANG['menu_custom2'] = “Reseller Hosting″;

with:

$_LANG['menu_custom2'] = “Windows Hosting“;

^ This will change the menu under the hosting category to read Windows Hosting.

4) Change the settings area to reflect

Next you’ll need to change the link on the menu from reseller-hosting.php to windows-hosting.php & the reference to the page.

Open the Reseller Hosting tab and change the page title & page URL to reflect:

A screenshot showing the new page settings

Click save changes. Once saved all references to Reseller Hosting will be automatically changed to Windows Hosting (page title) and reseller-hosting.php links in the template will be changed to windows-hosting.php (page url).

Lastly open the search engine optimization tab and change the page title, meta description & tags to match the new page:

A screenshot showing the new seo settings

^ As you can see, the previous change means the Reseller Hosting was already changed to Windows Hosting so it’s easy to find.

WHMCS Themes – How to add links to the menu

Jack Curtis — Wed, 28 Mar 2012 16:05:18 +0000

In this tutorial you’ll learn how to add custom links to the menu of your WHMCS Template.

Open the following file:

/templates/YOUR_TEMPLATE/includes/menu.tpl

As you can see the above file is well noted showing exactly what code is used for each link. The blocks of code represent a dropdown link (domains, hosting, company).

If you’d like to add a sub-link then you’d add the code listed below for your template just above the

of that block code.

If you’d like to add a main menu link then you’d add the code listed below between the marked links.

In the following examples the code will be for a page named “Custom” linking to custom.php. The bold text is what you’d need to edit for your own page(s).

Blue Blaze

The code below is for the Blue Blaze template.

Main menu link

custom"} class="active"{/if}>Custom

^ The Custom reference to the left needs to be the .php pagename without .php. This will make the tab highlighted when on this page. The middle custom.php is the link to the page (can also be full URL such as http://www.google.com/). The right Custom reference is the link text that will be visible.

Main menu link (dropdown)

custom"} class="active"{/if}>Custom

Sub1

Sub1

^ The above code will load a dropdown menu link named Custom showing Sub1 & Sub2 when hovered over.

Sub-menu link

Custom

^ The above code is used for the sub-menu (e.g the Bulk Domain Transfer link under the domains menu).

Bright Fury

The code below is for the Bright Fury template.

Main menu link

custom"} class="current"{/if}>Custom

Main menu link (dropdown)

custom"} class="current"{/if}>Custom

Sub1

Sub1

^ The above code will load a dropdown menu link named Custom showing Sub1 & Sub2 when hovered over.

Sub-menu link

Custom

^ The above code is used for the sub-menu (e.g the Bulk Domain Transfer link under the domains menu).

Heat Wave

The code below is for the Heat Wave template.

Main menu link

custom"} class="active"{/if}>Custom

Main menu link (dropdown)

custom"} class="active"{/if}>Custom

Sub1

Sub1

^ The above code will load a dropdown menu link named Custom showing Sub1 & Sub2 when hovered over.

Sub-menu link

Custom

^ The above code is used for the sub-menu (e.g the Bulk Domain Transfer link under the domains menu).

Ice Host

The code below is for the Ice Host template.

Main menu link

custom"} class="active"{/if}>Custom

Main menu link (dropdown)

custom"} class="active"{/if}>Custom

Sub1

Sub1

^ The above code will load a dropdown menu link named Custom showing Sub1 & Sub2 when hovered over.

Sub-menu link

Custom

^ The above code is used for the sub-menu (e.g the Bulk Domain Transfer link under the domains menu).

Orange Fusion

The code below is for the Orange Fusion template.

Main menu link

custom"} class="active"{/if}>Custom

Main menu link (dropdown)

custom"} class="active"{/if}>Custom

Sub1

Sub1

^ The above code will load a dropdown menu link named Custom showing Sub1 & Sub2 when hovered over.

Sub-menu link

Custom

^ The above code is used for the sub-menu (e.g the Bulk Domain Transfer link under the domains menu).

Ruby Host

The code below is for the Ruby Host template.

Main menu link

custom"} class="active"{/if}>Custom

Main menu link (dropdown)

custom"} class="active"{/if}>Custom

Sub1

Sub1

^ The above code will load a dropdown menu link named Custom showing Sub1 & Sub2 when hovered over.

Sub-menu link

Custom

^ The above code is used for the sub-menu (e.g the Bulk Domain Transfer link under the domains menu).

Sequence Host

The code below is for the Sequence Host template.

Main menu link

custom"} class="active"{/if}>Custom

Main menu link (dropdown)

custom"} class="active"{/if}>Custom

Sub1

Sub1

^ The above code will load a dropdown menu link named Custom showing Sub1 & Sub2 when hovered over.

Sub-menu link

Custom

^ The above code is used for the sub-menu (e.g the Bulk Domain Transfer link under the domains menu).

WHMCS Themes – How to make a page use full width

Jack Curtis — Wed, 28 Mar 2012 16:05:04 +0000

All of our WHMCS Themes allow you to make a page use the full width available (no sidebar) quite easily.

Each template uses full width for the register, clientarea, creditcard & cart pages by default so the functionality exists. If you’d like to make your own page or an existing page use full width it would simply be a matter of adding it to the existing code. This tutorial will explain how it’s done for each template.

For the sake of this tutorial we’ll assume that you’ve created a page named custom.php.

Note, the text used between the double quotes for each if filename = “” is the page name without the .php extension. So as you can see register.php (register), clientarea.php (clientarea), creditcard.php (creditcard) & cart.php (cart) are already setup to use full width.

Blue Blaze

Firstly open the following file:

/templates/YOUR_TEMPLATE/header.tpl

scroll down and find the following code:

{if $filename eq "register" or $filename eq "clientarea" or $filename eq "creditcard" or $filename eq "cart"}

{else}

{/if}

change this to:

{if $filename eq "register" or $filename eq "clientarea" or $filename eq "creditcard" or $filename eq "cart" or $filename eq "custom"}

{else}

{/if}

Lastly open the following file:

/templates/YOUR_TEMPLATE/footer.tpl

scroll down and find the following code:

{if $filename eq "register" or $filename eq "clientarea" or $filename eq "creditcard" or $filename eq "cart"}{else}

change this to:

{if $filename eq "register" or $filename eq "clientarea" or $filename eq "creditcard" or $filename eq "cart" or $filename eq "custom"}{else}

When visiting this page you should now see it load using the width width without the sidebar.

Ruby Host

Firstly open the following file:

/templates/YOUR_TEMPLATE/header.tpl

scroll down and find the following code:

change this to:

or $filename eq "custom"}left-sub-wide{else}left-sub{/if}">

or $filename eq "custom"}box1-sub-wide{else}box1-sub{/if}">

Lastly open the following file:

/templates/YOUR_TEMPLATE/footer.tpl

scroll down and find the following code:

{if $filename eq "register" or $filename eq "clientarea" or $filename eq "creditcard" or $filename eq "cart"}{else}

change this to:

{if $filename eq "register" or $filename eq "clientarea" or $filename eq "creditcard" or $filename eq "cart" or $filename eq "custom"}{else}

When visiting this page you should now see it load using the width width without the sidebar.

Sequence Host

Firstly open the following file:

/templates/YOUR_TEMPLATE/header.tpl

scroll down and find the following code:

change this to:

or $filename eq "custom"}leftSideCon-wide{else}leftSideCon{/if}">

or $filename eq "custom"}information-wide{else}information{/if}">

Lastly open the following file:

/templates/YOUR_TEMPLATE/footer.tpl

scroll down and find the following code:

{if $filename eq "register" or $filename eq "clientarea" or $filename eq "creditcard" or $filename eq "cart"}{else}

change this to:

{if $filename eq "register" or $filename eq "clientarea" or $filename eq "creditcard" or $filename eq "cart" or $filename eq "custom"}{else}

When visiting this page you should now see it load using the width width without the sidebar.

Ice Host

Firstly open the following file:

/templates/YOUR_TEMPLATE/header.tpl

scroll down and find the following code:

change this to:

or $filename eq "custom"}leftC-wide{else}leftC{/if}">

or $filename eq "custom"}information-wide{else}information{/if}">

or $filename eq "custom"}informationContents-wide{else}informationContents{/if}">

Lastly open the following file:

/templates/YOUR_TEMPLATE/footer.tpl

scroll down and find the following code:

{if $filename eq "register" or $filename eq "clientarea" or $filename eq "creditcard" or $filename eq "cart"}{else}

change this to:

{if $filename eq "register" or $filename eq "clientarea" or $filename eq "creditcard" or $filename eq "cart" or $filename eq "custom"}{else}

When visiting this page you should now see it load using the width width without the sidebar.

Heat Wave

Firstly open the following file:

/templates/YOUR_TEMPLATE/header.tpl

scroll down and find the following code:

change this to:

or $filename eq "custom"}leftC-wide{else}leftC{/if}">

or $filename eq "custom"}box2-wide{else}box2{/if}">

or $filename eq "custom"}box2Top-wide{else}box2Top{/if}">

or $filename eq "custom"}box2Contents-wide{else}box2Contents{/if}">

Lastly open the following file:

/templates/YOUR_TEMPLATE/footer.tpl

scroll down and find the following code:

{if $filename eq "register" or $filename eq "clientarea" or $filename eq "creditcard" or $filename eq "cart"}{else}

change this to:

{if $filename eq "register" or $filename eq "clientarea" or $filename eq "creditcard" or $filename eq "cart" or $filename eq "custom"}{else}

When visiting this page you should now see it load using the width width without the sidebar.

Orange Fusion

Firstly open the following file:

/templates/YOUR_TEMPLATE/header.tpl

scroll down and find the following code:

change this to:

or $filename eq "custom"}LeftCon-wide{else}LeftCon{/if}{if $filename eq "index"} homecon{/if}">

or $filename eq "custom"}box3top-wide{else}box3top{/if}">

or $filename eq "custom"}box3-wide{else}box3{/if}">

or $filename eq "custom"}box3Contents-wide{else}box3Contents{/if}">

Lastly open the following file:

/templates/YOUR_TEMPLATE/footer.tpl

scroll down and find the following code:

{if $filename eq "register" or $filename eq "clientarea" or $filename eq "creditcard" or $filename eq "cart"}{else}

change this to:

{if $filename eq "register" or $filename eq "clientarea" or $filename eq "creditcard" or $filename eq "cart" or $filename eq "custom"}{else}

When visiting this page you should now see it load using the width width without the sidebar.

Bright Fury

Firstly open the following file:

/templates/YOUR_TEMPLATE/header.tpl

scroll down and find the following code:

change this to:

or $filename eq "custom"}bodyLeft-wide{else}bodyLeft{/if}">

or $filename eq "custom"}box02Con-wide{else}box02Con{/if}">

or $filename eq "custom"}box02Top-wide{else}box02Top{/if}">

or $filename eq "custom"}box02content-wide{else}box02content{/if}">

or $filename eq "custom"}box02content2-wide{else}box02content2{/if}">

Lastly open the following file:

/templates/YOUR_TEMPLATE/footer.tpl

scroll down and find the following code:

{if $filename eq "register" or $filename eq "clientarea" or $filename eq "creditcard" or $filename eq "cart"}{else}

change this to:

{if $filename eq "register" or $filename eq "clientarea" or $filename eq "creditcard" or $filename eq "cart" or $filename eq "custom"}{else}

When visiting this page you should now see it load using the width width without the sidebar.

WHMCS Themes – Zomex Template Manager (settings area)

Jack Curtis — Tue, 27 Mar 2012 21:57:53 +0000

Since V3.4 our WHMCS Themes come with a built-in settings area called Zomex Template Manager. With the settings area you can add/edit your plans, adust display options & more without any HTML experience.

A screenshot of the easy to use settings area.

Click here to watch a video tour

Once your template has been installed you’ll be able to access the settings area from inside your WHMCS admin panel under addons > Zomex Template Manager as seen below:

Zomex Template Manager link.

Below is a list of each settings and what they are for:

General

Currency – The currency used throughout the template. Specifically the currency you set here will be applied to the web hosting boxes (assuming you’re using the boxes layout).

Favicon URL – Here you can set the URL to your favicon (this is a small icon that can be seen on the address bar on some websites). By default we’ve included a favicon that’s hosted on our servers. It’s loaded by a secure (https://) URL so it will not break any SSL certificate. The favicon must be 16px x 16px in .ico format (Google favicon generators).

Homepage

Slideshow – By default each template displays rotating banners, by turning this setting off it will be replaced with a static banner (a faster and more SEO friendly alternative). This same static banner is also displayed if the visitor has javascript turned off.

Number Of Slides – Here you can set the number of slides (images) to be use for the slideshow. By default each template has 2, you can add up to 5 using the WHMCS template slideshow guide.

Slideshow Captions – This settings allows you to turn-off the captions displayed on the slideshow (descriptive text).

Slideshow Navigation – Here you can turn-off the navigation circles that show just underneath the slideshow by default.

Feature Boxes – These are the boxes that show just underneath the slideshow on the homepage. You can change this setting to display 3, 6 or turn them off completely.

Feature Boxes Settings – In this section you can setup the 3/6 feature boxes including the name, features, pricing, learn more and order links.

Web Hosting page (the same for all 6)

Page Title – If you wish to change one of the hosting pages to something different you’ll want to edit this setting. The name you apply here is applied to all references to this page in the settings area (pages/features section & SEO section).

Page URL – The URL you set here (without the .php extension) will automatically be applied to links in the template (e.g the top menu). It’s also used for page detection (for the active menu button & SEO settings).

Layout Option – Here you can change the layout style on the hosting page between a boxes & table style display.

Number Of Plans – Choose to display between 1 & 6 plans for this page. If you’re using the table layout adjusting this setting will change the amount of columns, if the boxes layout it’ll change the amount of boxes.

Global Settings – These settings are applied to both the table layout & boxes layout. Here you can set the plan names, monthly pricing & order links.

Table Layout – This section allows you to change the table titles, features & specs. You can also use a value of check or cross for the options to automatically display a tick or cross icon (representing included/not included). The name and order links for each plan are taken from those set in the global settings.

Boxes Layout – You can set the unique 5 features for each plan for the boxes layout here. The name and order links for each plan are taken from those set in the global settings.

Pages/Features

Affiliates – Here you can turn on/off the affiliates link in the menus. By setting this to off it’ll also remove the affiliates icon from the portal page.

Domains – Here you can turn on/off the domains link in the menus. By setting this to off it’ll also remove the domain checker icon from the portal page and the domain checker box from the homepage.

Company – Here you can turn on/off the company page in the menus.

Portal – Here you can turn on/off the portal page in the menus.

Terms Of Service – Here you can turn on/off the terms of service page, turning it off will remove the link in the footer.

Acceptable Usage Policy – Here you can turn on/off the acceptable usage policy page, turning it off will remove the link in the footer.

Live Chat – Here you can easily disable/enable the live chat icons/links from the template.

Language Selector – Here you can easily disable/enable the language switcher found at the bottom of the content area (useful if you only want to support one language).

Search Engine Optimization

SEO Feature – By turning this on the template will load the page title, meta description & meta tags set in this section. By turning it off these details will be loaded from /modules/addons/zomex_template_manager/lang/ (required to support multiple languages).

Page Title – The page title you set for each page is the first thing Google see when they crawl your site. It’s also shown at the top of most browsers and on many occasions used for the listing of this page in Google. The page title is known as one of the most important aspects of on-page SEO so it’s wise to edit this specifically for your business.

Meta Description – The meta description you set for each page found in the source code (not read by most visitors), it’s used specifically for search engines to understand the content/focus of the particular page of your website. Search engines sometimes use it as the description in their listings so it’s very important.

Meta Tags – In the early days of the web search engines such as Google used the tags as a way of ranking a page. As it was easily abused it’s no longer used by Google for the ranking of a website but is known to be used for some of their other services and some search engines still use it.

Social

Social Buttons – Turn on/off the Facebook & Twitter buttons that show to the right of your company name.

Facebook Button/Icon – Turn on/off the Facebook like button & any Facebook icons on the template.

Facebook URL – Here you can add your Facebook fan page (must be a fan page for the like button to function) which is automatically applied to the Facebook button & any Facebook icons.

Twitter Button/Icon – Turn on/off the Twitter follow button & any Twitter icons on the template.

Twitter URL – Here you can add your Twitter profile URL which is automatically applied to the Twitter button & any Twitter icons.

Advanced

Custom CSS – Here you can add custom CSS that’s automatically applied to all template pages. The great thing about using this is that it’s not lost when doing future template upgrades.

WHMCS Themes – All about the social buttons

Jack Curtis — Sun, 04 Mar 2012 19:50:35 +0000

Since V3.3 all templates now come packed with the same social integration we use on Zomex.com in the form of a Facebook & Twitter button. The great thing about these buttons is they allow your visitors to like your Facebook profile & follow your Twitter account via a non-distracting popup. As you get more followers and likes your visitors will continue to become more confident in your products & services making them a vital feature.

By default these buttons are located to the right of the company name as seen below:

A look at the social integration of each template.

You can find the settings for the buttons in the following file:

/public_html/templates/YOUR_TEMPLATE/header.tpl

A look at the button settings available.

As you can see above, you have a number of settings available to you:

Line 18 – here you can use 3 values, home, on or off. Home is the default and makes the buttons appear on the homepage only, on will make them appear on all pages and off will remove them from all pages.

Line 19 – on this line you can either turn the Facebook button on or off

Line 20 – here you can define your Facebook page URL, by default it’s our profile to demo the functionality

Line 21 – on this line you can either turn the Twitter button on or off

Line 22 – here you can define your Twitter profile URL, by default it’s our profile to demo the functionality