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.

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.
  5. Copy– CTRL + C (on Mac: COMMAND + C) and paste– CTRL + V (on Mac: COMMAND + V) the following code into the file. Please note that this code is commented out so that it displays properly in WordPress; you will need to remove the !-- from the opening PHP tag when you are ready to use this code.
    <!--?php
    
    use WHMCSClientArea;
    use WHMCSDatabaseCapsule;
    
    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//
  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//
    4. Right-click on the .tpl file you created and select Edit.
    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

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

Share this Article
IC
InMotion Hosting Contributor Content Writer

InMotion Hosting contributors are highly knowledgeable individuals who create relevant content on new trends and troubleshooting techniques to help you achieve your online goals!

More Articles by InMotion Hosting