Using Phing with the Wright Framework to Get a Working Joomla Template

: Written by Valentín García Valentín García; Published: 12 June 2017 12 June 2017

Wright Now Supports Joomla Update System

Wright is the template framework we use at Joomlashack to create our commercial templates. We are always making it a little more awesome.

In this post, we will show you the process we follow to generate a working Joomla template by using Phing in combination with the Wright repository from Github, plus how to add your custom styles.

Read more about what makes the Wright Framework unique.

Step #1. Install Phing

Install Phing into your computer as explained in this tutorial from OSTraining.

Step #2. Download Wright repository

Download the Wright source code from this page.

Select the “master” branch to use the stable version.

Click the “Clone or download” button.
Click "Download ZIP".

Decompress the zip to explore the Wright files.

Step #3. Download required repositories

(New) 6 extra repositories are needed to build the Wright install package. Download them in same way as you did with Wright repository from step #2. Place the repositories in the same location as Wright.

Be sure you are using the latest version from master branch.

Step #4. Configure build.properties file for Wright

Duplicate the file “build.properties.dist” from your copy of Wright repository
Name the new copy as “build.properties”.

Edit “build.properties” file.

builder.path=/path/to/AllediaBuilder 
project.AllediaFramework.path=/path/to/AllediaFramework 
project.AllediaInstaller.path=/path/to/AllediaInstaller 
project.AllediaFreeDefaultFiles.path=/path/to/AllediaFreeDefaultFiles 

project.is_wright=1

Replace “/path/to/“ with the location of the repositories in your computer.

As example, if you’re using Mac this is how the content may look:

builder.path=/Users/macuser/Github/AllediaBuilder

project.AllediaFramework.path=/Users/macuser/Github/AllediaFramework
project.AllediaInstaller.path=/Users/macuser/Github/AllediaInstaller
project.AllediaFreeDefaultFiles.path=/Users/macuser/Github/AllediaFreeDefaultFiles

project.is_wright=1

Step #5. Configure global.properties file for Alledia Builder

Duplicate the file “global.dist.properties” from your copy of Alledia Builder repository
Name the new copy as “global.properties”.

1 n

Edit “global.properties” file.

builder.thread.count=2 
project.AllediaFramework.path=/path/to/AllediaFramework
project.AllediaInstaller.path=/path/to/AllediaInstaller
project.AllediaFreeDefaultFiles.path=/path/to/AllediaFreeDefaultFiles
project.AllediaProDefaultFiles.path=/path/to/AllediaProDefaultFiles
project.OSSystem.path=/path/to/OSSystem 
project.hasFreeVersion=1
project.movePackage=0
project.movePackageTo=/path/to/package/destination/folder
project.phplint=1

Replace “/path/to/“ with the location of the repositories in your computer.
Replace "/path/to/package/destination/folder" with the location to a custom folder in your computer.

Step #6. Execute Phing

Open terminal, and go to the location of your own copy of Wright:

$ cd /path/to/your/wright-copy

In my case, this is how the syntax looks:

$ cd /Users/macuser/Desktop/wright-master

Now, run phing build command:

$ phing build

Wait until the process finishes.

If everything is correct, you will generate a new zip file. As example: tpl_js_wright_free_3.x.x.zip

This file will be located in the path you defined in next line from "global.properties" file:

project.movePackageTo=/path/to/package/destination/folder

Note: you still need to install that package in a working Joomla template from Extensions > Manage > Install

Step #7. Custom styles for the Wright template

So far you have a working Wright template. But it has only the default design.

To change the default aspect of Wright, go back to your editor. Be sure you are working on the copy you downloaded from Github (and NOT the installed template). If you are familiar with CSS syntax, you can edit the LESS files.

We don’t recommend you to modify the core Wright files, as future updates of the framework will override your code. Instead, create your own styles:

Inside the folder code/less/ duplicate the files style-generic.less, style-generic-responsive.less and variables-generic.less.

Replace the word “generic” with something unique for the new copies. In my example, my style is “custom”, so the new files are named style-custom.less, style-custom-responsive.less and variables-custom.less.

Play with the LESS code. Change colors, fonts, backgrounds, etc. Once you are done, execute phing command again to port the changes into your local Joomla site.