How to Create a Custom Page for WHMCS

WHMCS is a system designed to automate and manage many common web hosting tasks for resellers. For instance, WHMCS can handle the point of sale, billing, and setup of a new account, including provisioning it on the server.

WHMCS creates pages based on the modules that are installed and the functions that are enabled by the administrator/webmaster. If you want to create a unique client area page, you can manually create the necessary .php and .tpl files to build a custom page. By completing this guide, you can learn how to create a custom page that is compatible with WHMCS.

Create a PHP (.php) File

First, a .php file needs to be created. This file will reside in your WHMCS root directory.

<?php //ICB0 56:0 71:ac9e                                                     ?><?php //00ee8  // *************************************************************************    // *                                                                       *    // * WHMCS - The Complete Client Management, Billing & Support Solution    *    // * Copyright (c) WHMCS Ltd. All Rights Reserved,                         *    // * Version: 7.5.0 (7.5.0-release.1)                                      *    // * BuildId: a354371.338                                                  *    // * Build Date: 02 Apr 2018                                               *    // *                                                                       *    // *************************************************************************    // *                                                                       *    // * Email: [email protected]                                                 *    // * Website: https://www.whmcs.com                                         *    // *                                                                       *    // *************************************************************************    // *                                                                       *    // * This software is furnished under a license and may be used and copied *    // * only  in  accordance  with  the  terms  of such  license and with the *    // * inclusion of the above copyright notice.  This software  or any other *    // * copies thereof may not be provided or otherwise made available to any *    // * other person.  No title to and  ownership of the  software is  hereby *    // * transferred.                                                          *    // *                                                                       *    // * You may not reverse  engineer, decompile, defeat  license  encryption *    // * mechanisms, or  disassemble this software product or software product *    // * license.  WHMCompleteSolution may terminate this license if you don't *    // * comply with any of the terms and conditions set forth in our end user *    // * license agreement (EULA).  In such event,  licensee  agrees to return *    // * licensor  or destroy  all copies of software  upon termination of the *    // * license.                                                              *    // *                                                                       *    // * Please see the EULA file for the full End User License Agreement.     *    // *                                                                       *    // *************************************************************************

WHMCS pages are implemented from .php files. Later in this guide, you can learn the code to enter into the file. However, in this section, you can learn the steps to take to create the necessary .php file to add a custom page to WHMCS.

1. Log into your reseller cPanel.
2. Navigate to the File Manager.
3. Navigate to your WHMCS root directory.
4. Click the File button.
5. In the pop-up, enter the name you would like to give to the file, for example mypage.php into the New File Name: field.
6. Click the Create New File button.

Add the PHP Code

Once you have created a new .php file, you will need to enter some code into it. This code is obtained from WHMCS’s Support Documentation directly. For more information on the code, you can refer to their documentation. However, this code contains the “skeleton” of a page for WHMCS. In this section, you can learn how to enter the necessary code into the mypage.php file, created in the previous section.

1. Log into your reseller cPanel.
2. Click on File Manager.
3. Navigate to your WHMCS root directory.
4. Open the .php file you created in the previous section. To open the file, right-click on it, then click Edit.

   NOTICE: If a pop-up is displayed regarding the encoding of the file, simply click the Edit button to proceed to open the file with the default encoding.

5. Copy– CTRL + C (on Mac: COMMAND + C) and paste– CTRL + V (on Mac: COMMAND + V) the following code into the file:

   <!--?php
   
   use WHMCS\ClientArea;
   use WHMCS\Database\Capsule;
   
   define('CLIENTAREA', true);
   
   require __DIR__ . '/init.php';
   
   $ca = new ClientArea();
   
   $ca--->setPageTitle('Your Page Title Goes Here');
   
   $ca->addToBreadCrumb('index.php', Lang::trans('globalsystemname'));
   $ca->addToBreadCrumb('mypage.php', 'Your Custom Page Name');
   
   $ca->initPage();
   
   //$ca->requireLogin(); // Uncomment this line to require a login to access this page
   
   // To assign variables to the template system use the following syntax.
   // These can then be referenced using {$variablename} in the template.
   
   //$ca->assign('variablename', $value);
   
   // Check login status
   if ($ca->isLoggedIn()) {
   
       /**
        * User is logged in - put any code you like here
        *
        * Here's an example to get the currently logged in clients first name
        */
   
       $clientName = Capsule::table('tblclients')
           ->where('id', '=', $ca->getUserID())->pluck('firstname');
           // 'pluck' was renamed within WHMCS 7.0.  Replace it with 'value' instead.
           // ->where('id', '=', $ca->getUserID())->value('firstname');
       $ca->assign('clientname', $clientName);
   
   } else {
   
       // User is not logged in
       $ca->assign('clientname', 'Random User');
   
   }
   
   /**
    * Set a context for sidebars
    *
    * @link https://docs.whmcs.com/Editing_Client_Area_Menus#Context
    */
   Menu::addContext();
   
   /**
    * Setup the primary and secondary sidebars
    *
    * @link https://docs.whmcs.com/Editing_Client_Area_Menus#Context
    */
   Menu::primarySidebar('announcementList');
   Menu::secondarySidebar('announcementList');
   
   # Define the template filename to be used without the .tpl extension
   
   $ca->setTemplate('mypage');
   
   $ca->output();

6. Click on the Save Changes button.

Create a Template (.tpl) File

Now that you have created the necessary .php file, you can create a .tpl file. This file will be where you can save your HTML to design the custom page you are creating for WHMCS. In this section, you can learn how to create the necessary .tpl file to design a custom page in WHMCS.

1. Log into your reseller cPanel.
2. Click on the File Manager icon.
3. Navigate to the following directory inside of your WHMCS root directory: templates/name-of-template//

   NOTE: Be sure to replace name-of-template/ with the actual directory name for your active template.

4. Click the File button.
5. In the pop-up, enter the name you would like to give to the file, for example mypage.tpl into the field New File Name:.
6. Click the Create New File button.

Add HTML

Once you have a .tpl file and a .php file for your custom page, you may begin desiging the page using HTML. In this section, you can learn how to add the HTML to your .tpl file and preview your page in your web browser.

1. Log into your reseller cPanel.
2. Click on the File Manager icon.
3. Navigate to the following directory inside of your WHMCS root directory: templates/name-of-template//

   NOTE: Be sure to replace name-of-template/ with the template’s directory name for your active template.

4. Right-click on the .tpl file you created and select Edit.

   NOTE: If a pop-up is displayed regarding the encoding of the file, simply click the Edit button to proceed to open the file with the default encoding.

5. Now enter your HTML. For example:

   <h3>This is my custom WHMCS page's content</h3>
   
   <p>I used the code found <a href="https://developers.whmcs.com/advanced/creating-pages/" target="_blank" title="Click here to navigate to WHMCS Support to obtain the code needed for creating a custom page.">here</a>.</p>
   
   <p>I put that code into a file named: </p>
   
   <p><code>mypage.php</code>, which resides in the root directory (where my WHMCS is installed).</p>
   
   <p>Now, I can write HTML into the file named:</p>
   
   <p><code>mypage.tpl</code>, located in the templates/six/ directory. Any HTML I save into that file, will be displayed on my new custom page.</p>
   

6. Once you have entered your code, click on the Save Changes button.

Once you have saved the .tpl file with the code you would like (or using our example data), you can visit the URL for that page from your web browser. Simply open your browser and visit the following URL (example format):

https://www.example.com/whmcs/mypage.php

NOTE: Be sure to replace https://www.example.com/whmcs with your actual domain (and path) to your WHMCS root directory. Additionally, be sure to change mypage.php to the actual name of the .php file you created (not the .tpl file).

Congratulations! You now know how to create a custom page to use with your WHMCS installation.