Back to Blog Posts

Customising templates... the easy way

By Matt / April 5th, 2016


Since Version 6.0, we've been publishing template changes on Github.

Github provides formatted and easy to read visual diffs of the changes we make and makes it much easier to update your custom templates. Here's an example from the latest release.

But there's an even bigger advantage. Build your template leveraging the power of Git, and when it comes to upgrades, you can quickly, easily, and most of the time completely automatically merge in any changes. Read on to find out how.

Creating your template with Git

This tutorial assumes you are familiar with Git - one of the most popular version control systems in use today.

To begin, start by checking out a local copy of the template. In this example I'm using the Six template. We make available the Six template and all new order forms released since WHMCS 6.0. You can find the clone urls for each of the templates at https://github.com/whmcs

Copy & Paste: git clone [email protected]:WHMCS/templates-six.git my-hosting-company

1.png

Entering the new directory and performing a git log command, we see the commits for each version release that has involved changes to the template:

Copy & Paste: git log
2.png

At this point, we can now apply our customisations to the template. If we have existing customisations, we can simply copy those files into the new directory. Otherwise we can just edit the files using our favourite editor. Following that, we commit them. You can of course do as many changes and commits as you like.
3.png

When the next release comes along, it's as easy as fetching in the changes and merging to your local branch. So first we fetch the latest updates from the Github repo we maintain, in this case the origin of our local repo:

Copy & Paste: git fetch origin
4.png

And then we merge the latest changes into our local template branch. Depending on what you've customised, at this point you may encounter a conflict where Git is unable to reliably determine what to do. If you do, resolve them to complete the process.

Copy & Paste: git merge origin/master
5.png

That's it. It really is that simple.

In just a matter of seconds, I was able to apply all the changes from the previous 2 releases to my custom template and now it's ready for me to upload to my site. It's quick, easy and what's more, you'll never miss a change.

So the next time you create a custom template, consider using Git.

Resources

1. Learn more about Git: https://git-scm.com/
2. WHMCS Github: https://github.com/whmcs
3. The WHMCS Six Theme: http://docs.whmcs.com/Customising_the_Six_Theme

Liked this article? Share it