So now your header.tpl will have all of that code copied into it.

Let’s now open the footer.tpl (WHMCS) file and do the same thing – we need to copy the HTML code, starting from where the main content box ends. In the case of our free HTML template, you would need to copy everything below the last instance of:

Content Goes here..

We don’t want to copy “Content Goes here” – we want to copy everything below it and paste it into our footer.tpl file, overwriting all the existing footer.tpl content.


Let’s go ahead and save the header.tpl and footer.tpl files and upload them to our WHMCS template folder on the web server. You might be curious to see what it looks like at this stage, but it won’t look good as we need tell the WHMCS template where to find the HTML template image and CSS files.

Let’s go back to the header.tpl file that’s open in your text editor. You will need to make some changes to the section.

As you will see, the CSS file that our HTML template relies on has been linked to as follows:


So that WHMCS can locate it, we need to change the href tag to its correct location. This will be:


Our free template doesn’t contain images within the code itself, but if you are using a different template that does, you would need to tell WHMCS where to locate the images. For example, your template might have this:


All you would need to do is change it to this:


Now you can save the header.tpl and upload it to your template directory on your server. If you preview the WHMCS template in your browser now, it should look much better. However, there is still work to be done.

The final thing to do in terms of design is to apply the WHMCS style sheet and JavaScript calls. You can copy and paste the following code into the section of the header.tpl file:

{if $systemurl}{/if}
{$headoutput}
{if $livehelpjs}{$livehelpjs}{/if}

This code tells your WHMCS template to load all necessary JavaScript and it also provides the CSS foundation for the WHMCS page content.

If you save the header.tpl file now and upload it to your server, you will probably see a few display issues. This is because the style.css of the Portal template is conflicting with your HTML template stylesheet.

So to resolve it, you need to remove all conflicting CSS from the WHMCS style.css file, and upload it to your server.

This should now result in a perfect WHMCS integration. All that remains to be done is to add the WHMCS navigation menu links. Due to the way the HTML template is structured, we will be placing the code needed into the footer.tpl file so that the WHMCS navigation links appear in the template side menu.

If you look at the code in the footer.tpl file, you should find the following:

• Link 1


• Link 2


• Link 3


• Link 4


• Link 5

All we need to do is replace it with this:

{if $loggedin}

• {$LANG.clientareanavhome}


• {$LANG.clientareanavdetails}


• {$LANG.clientareanavservices}


• {$LANG.clientareanavdomains}


• {$LANG.quotestitle}


• {$LANG.invoices}


• {$LANG.clientareanavsupporttickets}


• {$LANG.affiliatestitle}


• {$LANG.clientareaemails}


• {$LANG.ordertitle}


• {$LANG.logouttitle}

{else}

• {$LANG.globalsystemname}


• {$LANG.clientregistertitle}


• {$LANG.clientareatitle}


• {$LANG.announcementstitle}


• {$LANG.knowledgebasetitle}


• {$LANG.supportticketssubmitticket}


• {$LANG.downloadstitle}


• {$LANG.ordertitle}

{/if}

This code tells WHMCS to display 2 sets of menu links, depending on whether the user is logged in or not. If a user is logged in, they will be shown the main links, as well as links related to their client account. If a user is not logged in, the client account links will be hidden.

Now you can save the changes to the footer.tpl file, and hopefully, your WHMCS integration should be looking pretty good! 


A great feature of the WHMCS / Smarty template system is that IF statements are incredibly easy to implement.

The most common one you will want to use is to tell WHMCS to display content depending on whether the user is logged in to their account or not. For example, WHMCS has the ability to display user account information. This is where you would want to use the following IF statement:

{if $loggedin}
Content here will be shown to users who are logged in.
{else}
Content here will be shown to everyone, unless the user is logged in to their account.
{/if}

It’s also useful for displaying a welcome message to users when they log in.

As you can see, you do not need to know any PHP to implement these IF statements.


If you’re not familiar with how to integrate WHMCS with a template, it’s likely that you’ll run into some problems along the way.

Your first port of call should always be the official WHMCS documentation – it’s there to be used!

Here are some links to useful WHMCS documentation for integration issues:

https://docs.whmcs.com/Client_Area_Template_Fileshttps://docs.whmcs.com/Template_Syntax
If you don’t find your answer in the documentation, a simple Google search should direct you to other places where you might find the answer.

If you still can’t find a fix for your issue, asking for help on the official WHMCS forums should be your next move. The WHMCS user community is a friendly bunch and has a wealth of experience with WHMCS.

Don’t forget, if you manage to fix the issue yourself, please update your forum post with the solution you used. It will probably be useful for someone else who has the same problem in the future.

I hope you have found this blog post useful and I wish you good luck with your integration.



WHMCSThemes.comZumada Limited (UK)