New to WHMCS? Trying to get around it and get your web hosting client portal to fit your brand’s aesthetics? In this article, you’ll learn how to customize the WHMCS theme.
Written on by Nile Flores
Estimated read time 5 minutes
How to Customize WHMCS Theme
WHMCS, an acronym for Web Host Manager Complete Solution, is a powerful and versatile platform focused on allowing you to easily streamline and automate various aspects of web hosting businesses. It's a comprehensive solution that encompasses client management, billing, support, and service provisioning, making it an indispensable tool for hosting providers, domain registrars, and reseller hosting.
Please note that despite its availability with most cPanel based hosts in its Softaculous script auto-installer, you must purchase a license through WHMCS’ official site to be able to install and use the platform. Once you’ve purchased the license, and installed WHMCS on your domain, you can work on configuring the settings and even customize the WHMCS theme.
Why would you need to customize a WHMCS theme?
Here are 7 reasons why you might want to customize a WHMCS theme:
Branding
User Experience
Unique Design
Mobile Responsiveness
Integration with Other Systems
Future-Proofing
Branding
A customized theme allows you to incorporate your company's branding elements, such as your logo, color scheme, and typography. This helps to create a cohesive and professional brand image, especially if you have another platform powering other areas of your website.
For example, you could run your own reseller hosting, and use WordPress for some of your blog content and sales pages, and then WHMCS for your client portal.
User Experience
By customizing the theme, you can optimize the user experience for your clients. This includes improving navigation, making the interface more intuitive, and tailoring the design to your specific needs.
Unique Design
A custom theme allows you to create a unique and memorable design that sets your business apart from the competition. You can experiment with different layouts, color schemes, and visual effects to create a truly distinctive look.
Mobile Responsiveness
A well-designed custom theme will be fully responsive, ensuring that it looks great and functions properly on all devices, including smartphones and tablets. This is essential in today's mobile-first world.
SEO Optimization
By customizing the theme, you can optimize your WHMCS installation for search engines. This includes using relevant keywords, optimizing image alt tags, and ensuring fast page load times.
Integration with Other Systems
A custom theme can be designed to integrate seamlessly with other systems and tools that you use, such as your CRM, marketing automation platform, or help desk software.
Future-Proofing
A custom theme can be more easily updated and maintained than a pre-built theme. This ensures that your website will continue to look and function its best as your business grows and evolves.
Understanding the Basics Before Customizing a WHMCS Theme
Before diving into customizing, you’ll need to understand that WHMCS themes are the visual skins that determine how your client area looks. They consist of HTML, CSS, and sometimes JavaScript files. They also contain template files.
The template files are the individual files that make up a theme. Most templates revolve editing the header, content, and footer areas, like this:
They control specific elements like the header, footer, navigation, and content areas. You can customize these by doing any of the following:
Editing existing template files.
Creating new template files.
Using CSS to style elements.
How to Customize WHMCS Theme
Access Your WHMCS Files
Choose a Theme to Customize
Clone the Theme You Wish to Customize
Edit Template Files
Edit Order Form Templates
Access Your WHMCS Files
Use a FTP client like FileZilla to connect to your hosting server and navigate to the templates directory in your WHMCS installation.
If your hosting uses cPanel, you can access the file manager to edit files directly.
Choose a Theme to Customize
WHMCS comes with default themes like "Six" and "Twenty-One." You can create your own custom theme or purchase a premium theme from third-party providers.
Clone the Theme You Wish to Customize
In the case you want to use one of the default themes to customize, it’s easier to use FTP or SFTP and create a new folder in the templates section. You’ll then copy the files from one of the themes and add them to the new theme folder. Make sure to name the theme different from the default themes so you can find it in the WHMCS dashboard.
Edit Template Files
To edit the template files, you’ll need to do the following:
Identify Target Files
Use a Text Editor
Make Changes
Identify Target Files
Determine which files control the elements you want to customize. For example, to change the header, you'd edit the header.tpl file.
Use a Text Editor
Use a text editor likeNotepad++, Sublime Text, or Visual Studio Code to open and edit these files.
Make Changes
Modify the HTML and CSS code to achieve your desired look and feel. You can add or remove elements, change colors, fonts, and layouts.
Example: Customizing the Header
Open header.tpl: Locate this file in your theme's directory.
Modify HTML: Change the logo image path, add or remove navigation items, or adjust the overall layout.
Modify CSS: Edit the associated CSS file to change colors, fonts, and styles of the header elements.
Edit Order Form Templates in WHMCS
Up to this point, you’ve been customizing the client interface templates for WHMCS, but you’ll more than likely need to also edit your order form templates too. The order form templates include HTML that control the look and feel of your order form.
Here’s the steps to editing and customizing the order form templates in WHMCS:
Edit the Template Files
Use Smarty Variables
Edit the Template Files
Locate the order form template files you want to modify. Common files include:
products.tpl: Controls the product listing and configuration.
cart.tpl: Controls the shopping cart view.
checkout.tpl: Controls the checkout process.
Use Smarty Variables
Dynamic Content: Smarty variables allow you to dynamically insert content into your templates. For example, to display a product's name, you can use {product.name}.
Refer to the Documentation: Consult the WHMCS documentation for a complete list of available Smarty variables and their usage.
Once you’ve edited your order template files, test them to make sure they look and work as expected.
Extending WHMCS Themes and Functionality
While most of this tutorial talks about changing the look of the WHMCS theme, you can also add more functionality to it, like adding a live chat, and much more! You can find all of these in the WHMCS Marketplace.
The WHMCS Marketplace is a digital store where you can find modules, extensions, and templates for WHMCS. It’s designed to:
Extend WHMCS functionality
Customize WHMCS appearance
Save time and effort
Extend WHMCS functionality
Modules and extensions allow you to add new features and capabilities to your WHMCS installation, such as support for new payment gateways, automated provisioning of services, or advanced reporting tools.
Customize WHMCS appearance
Templates enable you to personalize the look and feel of your WHMCS client area and admin interface, making it more visually appealing and user-friendly.
Save time and effort
By using pre-built modules and templates, you can avoid the need to develop custom code from scratch, saving you time and resources.
Types of modules or add-ons for WHMCS
Please note that there are both free and commercial paid modules and add-ons to choose from. Here are some general types of modules or add-ons you might find on the WHMCS Marketplace:
Service provisioning
Reporting tools
Security modules
Marketing tools
Client management tools
Themes and templates
Payment gateways
These modules allow you to accept payments from various sources, such as credit cards, PayPal, or Bitcoin.
Service provisioning
These modules automate the provisioning of services, such as web hosting, VPS, or dedicated servers. For example, you can offer cPanel or Plesk to your clients, so they can manage their website on your reseller web hosting servers.
Reporting tools
These modules provide advanced reporting capabilities, allowing you to track key metrics and analyze your business performance.
Security modules
These modules help protect your WHMCS installation from security threats, such as hacking attempts, malware, and unauthorized access.
Marketing tools
These modules help you promote your services and attract new customers, such as email marketing and affiliate programs.
Client management tools
These modules enhance your client management capabilities, such as automated client notifications and ticket management.
Theme and templates
WHMCS Marketplace themes and templates allow you to customize the look and feel of your WHMCS client area, making it more visually appealing and personalized to your brand. Please note that most of the themes and templates offered in the WHMCS Marketplace are commercial ones you will have to pay for.
Some of the themes and templates offer a seamless branding experience between WHMCS and content management systems like WordPress.
To find specific modules or add-ons, you can browse the WHMCS Marketplace by category or search for keywords.
Additional WHMCS Customization Tips and Best Practices
Now that you’ve learned a beginner’s way to customize WHMCS theme, and even [insight] (https://verpex.com/blog/reseller-hosting/linux-reseller-hosting) on extending your WHMCS looks and functionality, here’s a few more tips you should do when you customize the WHMCS theme:
Backup Your Files
Test Thoroughly
Consider a Child Theme
Utilize Smarty Templates
Use a CSS Preprocessor
Seek Help
Consider a Professional Theme
Backup Your Files
Always create a backup of your original theme files before making any modifications.
Test Thoroughly
Test your customizations in different browsers and devices to ensure compatibility.
Consider a Child Theme
Create a child theme to inherit the parent theme's styles and make specific customizations without affecting the core theme files.
Utilize Smarty Templates
WHMCS uses Smarty templates, which allow you to dynamically insert content into your theme. This is useful for displaying custom information or creating personalized experiences for your clients.
Use a CSS Preprocessor
Tools like Sass or Less can help you write more efficient and maintainable CSS code. Modify the theme's CSS files to alter colors, fonts, and overall styling. Be mindful of CSS specificity to ensure your changes take effect as intended.
Seek Help
If you encounter difficulties, consult the WHMCS documentation or seek help from the community forums.
Consider a Professional Theme
If you require extensive customization or lack the necessary technical expertise, investing in a premium WHMCS theme can save time and effort. These themes often come with advanced features and customization options.
In Summary
By following these steps and understanding the basics of HTML, CSS, and WHMCS template structure, you can effectively customize your WHMCS theme to match your brand and enhance your client experience in reseller hosting. Don’t forget to utilize the WHMCS Marketplace to help with extending your WHMCS theme and overall client experience. Happy designing!
Frequently Asked Questions
What Language is WHMCS?
WHMCS is written in the PHP programming language. PHP is a popular server-side scripting language that is widely used for web development, especially for building dynamic web pages and web applications.
Does WHMCS offer hosting?
No, WHMCS is not a web hosting provider and does not offer hosting services. Instead, it is a web hosting automation and billing platform that is designed to help web hosting providers, including reseller hosting providers, manage their businesses more efficiently.
Can I customise the WHMCS interface?
Yes, you can customise the WHMCS interface to match your branding and website design. WHMCS includes a variety of customization options, including the ability to add your logo, change colours, and add custom pages.
How much does reseller hosting with WHMCS cost?
The cost of reseller hosting with WHMCS can vary depending on the hosting provider you choose and the features included in your plan. Typically, reseller hosting plans start at around $10 to $20 per month and can go up to several hundred dollars per month for larger plans with more resources.
