How to Install and Customize WHMCS Themes

A professional theme builds trust with your hosting clients. WHMCS allows you to completely change the look of your client area and order forms. This guide covers the safe installation and customization process.

Theme Structure

WHMCS themes are located in the /templates/ directory. Each theme has its own folder containing .tpl files (Smarty template engine), CSS, and JS assets.

Step 1: Download & Extract

Usually, you purchase a theme from a vendor (like ThemeMetro, WHMCS Global Services, or independent developers). Download the .zip file and extract it.

Look for a folder named upload or simply the folder containing the theme itself (e.g., host-pro).

Step 2: Upload to Server

1. Connect via FTP/SFTP.
2. Navigate to /your-whmcs-root/templates/.
3. Upload the theme folder here.

Step 3: Activate the Theme

1. Log in to WHMCS Admin.
2. Go to System Settings > General Settings.
3. Under the General tab, find "System Theme".
4. Select your new theme from the dropdown.
5. Click Save Changes.

Activate Order Form Template

In the same settings page, go to the Ordering tab and select your "Default Order Form Template".

How to Customize Safely (Child Themes)

Never edit the core files of a purchased theme directly, or you'll lose changes when you update.

Method: The custom.css file

Most modern WHMCS themes (including "Twenty-One") check for a css/custom.css file.

1. Go to /templates/your-theme/css/.
2. Create a file named custom.css.
3. Add your CSS overrides here.

/* Example: Change header color */
.header {
    background-color: #4f46e5;
}

Advanced: Overriding .tpl files

If you need to change HTML:

1. Copy the file you want to edit (e.g., header.tpl).
2. Rename the copy or keep it? WHMCS doesn't support true "child themes" like WordPress natively for TPL files in the same way.
3. Best Practice: Keep a log of changed files, or use Git to merge updates from the vendor.