WizardPanel for WHMCS File Structure

In this guide we will look at the structure and file tree of WizardPanel for WHMCS.

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 separate 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

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

Options Panel

The integrated options panel allow you to easily add your plans, enable/disable pages and feature & more.

Options Panel

Editing Design Text

Any content not editable in the options panel is loaded from a single master language file:

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

This setup is to allow support for multi languages. The lang directory contains a separate language file for each design and suppoting every WHMCS language. 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 WizardPanel for WHMCS:

WizardPanel

Contains all of the framework files. Learn More

/whmcs_path/modules/addons/zomex_template_manager/

Data from the options panel is saved in the mod_zomex_template_manager table of your WHMCS database.

Language Files

Contains the editable content of all of our designs. Learn More

/whmcs_path/modules/addons/zomex_template_manager/lang/

Designs

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

CSS

Contains all of the design CSS (style) files.

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

Images

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

/whmcs_path/templates/your_design/images/

Includes

Contains main sections of the design. 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_design/includes/
/whmcs_path/templates/your_design/includes/banner.tpl - Contains the banner markup used by the homepage slider and content pages.
/whmcs_path/templates/your_design/includes/domainchecker.tpl - Markup used for the homepage domain checker banner (below the slideshow).
/whmcs_path/templates/your_design/includes/feature-boxes.tpl - The function to load the options panel boxes on the homepage.
/whmcs_path/templates/your_design/includes/footer-marketconnect.tpl - The WHMCS Marketconnect page links displayed in the footer.
/whmcs_path/templates/your_design/includes/footer.tpl - The designs custom footer
/whmcs_path/templates/your_design/includes/head.tpl - Contains the <head> of the design. A lot is imported by WizardPanel via the head output.
/whmcs_path/templates/your_design/includes/header.tpl - The designs custom header
/whmcs_path/templates/your_design/includes/itemsincart.tpl - Displayed below the main menu when 1 or more items are added to the cart.
/whmcs_path/templates/your_design/includes/menu-marketconnect.tpl - The WHMCS Marketconnect page links displayed as a dropdown of the main menu.
/whmcs_path/templates/your_design/includes/menu.tpl - Contains the markup of the main menu of the design. Learn More
/whmcs_path/templates/your_design/includes/submenu-whmcs.tpl - Contains the logged-in menu displayed in the client area when enabled in WHMCS.
/whmcs_path/templates/your_design/includes/submenu.tpl - Contains the sub menu displayed under the banner of content pages.
/whmcs_path/templates/your_design/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_design/invoicequote/
/whmcs_path/templates/your_design/invoicequote/custom.css - Custom CSS used to override the default
/whmcs_path/templates/your_design/invoicequote/favicon.ico - The default favicon used by the invoice and quote pages.
/whmcs_path/templates/your_design/invoicequote/layout.css - Contains all fo the CSS used by the invoice and quote pages.
/whmcs_path/templates/your_design/invoicequote/layout.min.css

Javascript

Contains all of the template Javascript (function) files.

/whmcs_path/templates/your_design/js/
/whmcs_path/templates/your_design/js/slider.js - Javascript of the homepage slider (bxSlider).
/whmcs_path/templates/your_design/js/slider.min.js
/whmcs_path/templates/your_design/js/template.js - Contains the main Javascript of the design.
/whmcs_path/templates/your_design/js/template.min.js
/whmcs_path/templates/your_design/js/wow.js - Javascript framework used for animation.
/whmcs_path/templates/your_design/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 WizardPanel for WHMCS designs 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/

These 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.