WHMCS Template Structure

In this guide we will look at the structure and file tree of a WHMCS Template.

File structure

Before we start it's best to learn the structure of WHMCS. WHMCS has been built with a software framework called Smarty. The biggest advantage of Smarty is that it separates the functionality from the design using seperate files for each. Unlike a PHP Template for example where PHP code and HTML will be mixed within the same file. Having both separate makes editing more user friendly.

Each WHMCS page consists of a .php file (contains functions that makes the page work) and a .tpl file (contains the HTML content that will be visible when visiting the page):

pagename.php
pagename.tpl

A WHMCS Template will load the content page between the templates header and footer (header.tpl and footer.tpl). Using our Stellar WHMCS Theme as an overview I've taken a screenshot and annotated it to show you how it works:

Settings Area (Wizard Panel)

Our WHMCS Templates allow you to easily add your plans, enable/disable pages and feature & more using our exclusive control panel Wizard Panel.

Using Wizard Panel

Editing Template Text

Any content not editable in Wizard Panel is loaded from a single language file of the default language set in WHMCS. For example if your default language is English the file is:

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

This setup is to allow support for multi languages. The lang directory contains a separate language file for each language supported by WHMCS. You can use a mix of all of these files for multi-language support or stick with the default language file for single language support.

Editing Content

WHMCS Text

WHMCS also uses their own language files for the stock text of WHMCS. For example text used within WHMCS default pages such as the client area, register page, cart etc. This text comes translated in many languages so in most cases you won't need to make any edits. The WHMCS language files are found at:

/whmcs_path/lang/

While in most cases you won't need to edit this text it is possible to customize WHMCS language text.

File Tree

Below is a look at the file structure of our templates:

Wizard Panel

Contains all of the Wizard Panel files. Learn More

/whmcs_path/modules/addons/zomex_template_manager/

Language Files

Contains the editable content of the template. Learn More

/whmcs_path/modules/addons/zomex_template_manager/lang/

Functions

Contains the functions of the template used for features such as quick setup.

/whmcs_path/includes/hooks/zomex_hooks.php

Template

Contains all of the template (content) files. While these files contain the HTML/markup the text is loaded from the language files in order to support multi-languages. However, you can also add text/HTML directly to these files if you prefer but it won't support multi-languages without following this guide.

/whmcs_path/templates/your_template/ - The root template directory.
/whmcs_path/templates/your_template/acceptable-usage-policy.tpl
/whmcs_path/templates/your_template/addons.tpl
/whmcs_path/templates/your_template/affiliate-program.tpl
/whmcs_path/templates/your_template/banner-design.tpl
/whmcs_path/templates/your_template/blesta-services.tpl
/whmcs_path/templates/your_template/blesta-templates.tpl
/whmcs_path/templates/your_template/clientexec-services.tpl
/whmcs_path/templates/your_template/clientexec-templates.tpl
/whmcs_path/templates/your_template/cloud-hosting.tpl
/whmcs_path/templates/your_template/company.tpl
/whmcs_path/templates/your_template/dedicated-servers.tpl
/whmcs_path/templates/your_template/domain-pricing.tpl
/whmcs_path/templates/your_template/footer.tpl - Main footer file, we embed the custom template footer within this file from /includes/footer.tpl
/whmcs_path/templates/your_template/game-servers.tpl
/whmcs_path/templates/your_template/header.tpl - Main header file, we embed the custom template header within this file from /includes/header.tpl
/whmcs_path/templates/your_template/homepage.tpl
/whmcs_path/templates/your_template/hosting-addons.tpl
/whmcs_path/templates/your_template/html-templates.tpl
/whmcs_path/templates/your_template/iptv.tpl
/whmcs_path/templates/your_template/license.txt - Contains information about the template license.
/whmcs_path/templates/your_template/logo-design.tpl
/whmcs_path/templates/your_template/portal.tpl
/whmcs_path/templates/your_template/privacy-policy.tpl
/whmcs_path/templates/your_template/reseller-hosting.tpl
/whmcs_path/templates/your_template/scripts.tpl
/whmcs_path/templates/your_template/template-info-whmcs.txt - Displays the supported WHMCS version. Learn More
/whmcs_path/templates/your_template/template-info.txt - Displays the template version/changelog. Learn More
/whmcs_path/templates/your_template/terms-of-service.tpl
/whmcs_path/templates/your_template/testimonials.tpl
/whmcs_path/templates/your_template/theme.yaml - General information about the template.
/whmcs_path/templates/your_template/viewinvoice.tpl
/whmcs_path/templates/your_template/viewquote.tpl
/whmcs_path/templates/your_template/virtual-private-network.tpl
/whmcs_path/templates/your_template/vps-hosting.tpl
/whmcs_path/templates/your_template/web-design.tpl
/whmcs_path/templates/your_template/web-hosting.tpl
/whmcs_path/templates/your_template/whmcs-modules.tpl
/whmcs_path/templates/your_template/whmcs-services.tpl
/whmcs_path/templates/your_template/whmcs-templates.tpl
/whmcs_path/templates/your_template/why-choose-us.tpl
/whmcs_path/templates/your_template/wordpress-services.tpl
/whmcs_path/templates/your_template/wordpress-themes.tpl

CSS

Contains all of the template CSS (style) files.

/whmcs_path/templates/your_template/css/
/whmcs_path/templates/your_template/css/animate.css - CSS framework used for animation.
/whmcs_path/templates/your_template/css/animate.min.css
/whmcs_path/templates/your_template/css/custom.readme.css - Can be used to add custom CSS within the template. Learn More
/whmcs_path/templates/your_template/css/layout.css - Contains all of the CSS used by the template including media quires.
/whmcs_path/templates/your_template/css/layout.min.css
/whmcs_path/templates/your_template/css/animate.css - CSS framework used for animation.
/whmcs_path/templates/your_template/css/animate.min.css
/whmcs_path/templates/your_template/css/slider.css - CSS of the homepage slider (bxSlider).
/whmcs_path/templates/your_template/css/slider.min.css

Images

Contains all of the template images. Any new images should be uploaded to this directory.

/whmcs_path/templates/your_template/images/

Includes

Contains main sections of the template. While these files contain the HTML/markup the text is loaded from the language files in order to support multi-languages. However, you can also add text/HTML directly to these files if you prefer but it won't support multi-languages without following this guide.

/whmcs_path/templates/your_template/includes/
/whmcs_path/templates/your_template/includes/banner.tpl - Contains the banner markup used by the homepage slider and content pages.
/whmcs_path/templates/your_template/includes/css.tpl - Used to condition based CSS to the template.
/whmcs_path/templates/your_template/includes/cta.tpl - Markup for the call to action above the footer.
/whmcs_path/templates/your_template/includes/custom1.tpl - Complex function file for the custom1 Wizard Panel page. This is editable via Wizard Panel.
/whmcs_path/templates/your_template/includes/custom2.tpl - Complex function file for the custom2 Wizard Panel page. This is editable via Wizard Panel.
/whmcs_path/templates/your_template/includes/custom3.tpl - Complex function file for the custom3 Wizard Panel page. This is editable via Wizard Panel.
/whmcs_path/templates/your_template/includes/custom4.tpl - Complex function file for the custom4 Wizard Panel page. This is editable via Wizard Panel.
/whmcs_path/templates/your_template/includes/custom5.tpl - Complex function file for the custom5 Wizard Panel page. This is editable via Wizard Panel.
/whmcs_path/templates/your_template/includes/custom6.tpl - Complex function file for the custom6 Wizard Panel page. This is editable via Wizard Panel.
/whmcs_path/templates/your_template/includes/custom7.tpl - Complex function file for the custom7 Wizard Panel page. This is editable via Wizard Panel.
/whmcs_path/templates/your_template/includes/custom8.tpl - Complex function file for the custom8 Wizard Panel page. This is editable via Wizard Panel.
/whmcs_path/templates/your_template/includes/custom9.tpl - Complex function file for the custom9 Wizard Panel page. This is editable via Wizard Panel.
/whmcs_path/templates/your_template/includes/custom10.tpl - Complex function file for the custom10 Wizard Panel page. This is editable via Wizard Panel.
/whmcs_path/templates/your_template/includes/domainchecker.tpl - Markup used for the homepage domain checker banner (below the slideshow).
/whmcs_path/templates/your_template/includes/element-content-bottom.tpl - Used to add content below the main content file.
/whmcs_path/templates/your_template/includes/element-content-top.tpl - Used to add content above the main content file.
/whmcs_path/templates/your_template/includes/feature-boxes.tpl - Complex function file for the homepage feature boxes. This is editable via Wizard Panel.
/whmcs_path/templates/your_template/includes/footer-marketconnect.tpl - The WHMCS Marketconnect page links displayed in the footer.
/whmcs_path/templates/your_template/includes/footer.tpl - The templates custom footer
/whmcs_path/templates/your_template/includes/head.tpl - Contains the <head> of the template. Used to load CSS and Javascript files.
/whmcs_path/templates/your_template/includes/header.tpl - The templates custom header
/whmcs_path/templates/your_template/includes/itemsincart.tpl - Displayed below the main menu when 1 or more items are added to the cart.
/whmcs_path/templates/your_template/includes/menu-marketconnect.tpl - The WHMCS Marketconnect page links displayed as a dropdown of the main menu.
/whmcs_path/templates/your_template/includes/menu.tpl - Contains the markup of the main menu of the template. Learn More
/whmcs_path/templates/your_template/includes/partners.tpl - Markup for the partners image above the footer.
/whmcs_path/templates/your_template/includes/seo.tpl - Contains the SEO functions applied to the main template pages.
/whmcs_path/templates/your_template/includes/social-footer.tpl - Markup for the social icons displayed in the footer.
/whmcs_path/templates/your_template/includes/social-sidewidget.tpl - Markup for the social icons displayed in the sidebar widget.
/whmcs_path/templates/your_template/includes/submenu-whmcs.tpl - Contains the logged-in menu displayed in the client area when enabled in WHMCS.
/whmcs_path/templates/your_template/includes/submenu.tpl - Contains the sub menu displayed under the banner of content pages.
/whmcs_path/templates/your_template/includes/toolbar.tpl - Contains the top toolbar markup. Also contains the default logged-in My Account menu.

Invoice & Quote

Contains files related to our custom Invoice/Quote pages.

/whmcs_path/templates/your_template/invoicequote/
/whmcs_path/templates/your_template/invoicequote/custom.css - Custom CSS used to override the default
/whmcs_path/templates/your_template/invoicequote/favicon.ico - The default favicon used by the invoice and quote pages.
/whmcs_path/templates/your_template/invoicequote/layout.css - Contains all fo the CSS used by the invoice and quote pages.
/whmcs_path/templates/your_template/invoicequote/layout.min.css

Javascript

Contains all of the template Javascript (function) files.

/whmcs_path/templates/your_template/js/
/whmcs_path/templates/your_template/js/slider.js - Javascript of the homepage slider (bxSlider).
/whmcs_path/templates/your_template/js/slider.min.js
/whmcs_path/templates/your_template/js/template.js - Contains the main Javascript of the template.
/whmcs_path/templates/your_template/js/template.min.js
/whmcs_path/templates/your_template/js/wow.js - Javascript framework used for animation.
/whmcs_path/templates/your_template/js/wow.min.js

Pages

Contains the PHP functions for each page.

/whmcs_path/configuration_template.php
/whmcs_path/acceptable-usage-policy.php
/whmcs_path/addons.php
/whmcs_path/affiliate-program.php
/whmcs_path/banner-design.php
/whmcs_path/blesta-services.php
/whmcs_path/blesta-templates.php
/whmcs_path/clientexec-services.php
/whmcs_path/clientexec-templates.php
/whmcs_path/cloud-hosting.php
/whmcs_path/company.php
/whmcs_path/dedicated-servers.php
/whmcs_path/game-servers.php
/whmcs_path/hosting-addons.php
/whmcs_path/html-templates.php
/whmcs_path/iptv.php
/whmcs_path/logo-design.php
/whmcs_path/portal.php
/whmcs_path/privacy-policy.php
/whmcs_path/reseller-hosting.php
/whmcs_path/scripts.php
/whmcs_path/terms-of-service.php
/whmcs_path/testimonials.php
/whmcs_path/virtual-private-network.php
/whmcs_path/vps-hosting.php
/whmcs_path/web-design.php
/whmcs_path/web-hosting.php
/whmcs_path/whmcs-modules.php
/whmcs_path/whmcs-services.php
/whmcs_path/whmcs-templates.php
/whmcs_path/why-choose-us.php
/whmcs_path/wordpress-services.php
/whmcs_path/wordpress-themes.php

Child Theme

All of our WHMCS Templates are setup as a child theme of the default Twenty One template. It will load some files directly from the default template directory:

/whmcs_path/templates/twenty-one/

This files are required for any WHMCS Template to function and as they are maintained by WHMCS it makes updates much easier as a child theme.