Creating a new Joomla 3 template from one of the defaults

Uncompress a copy of Joomla! 3.x somewhere (preferably on a localhost) which will create a top level directory for the unzipped code. Refer to this as topdir throughout this article.

Copy one of its templates to a new folder and rename it.

So, in my finder (assuming I'm working on a copy of the site on my localhost), option-click-and-drag beez3. Rename it now to dokj3beez3

Drag this whole directory dokj3beez3 over an icon of the Textmate application - it will open a text editor ready to modify any file in the template.

Edit the following files:

templateDetails.xml and update the value of the "name" tag (XML) to be dokj3beez3. This will be referred to as the newTemplateDirName throughout the rest of this article. Also update the "author", "authorEmail", "authorUrl", and "version" tags to add your own info if you like.

Find the .ini files under the language/en-GB/ directory and rename the two ini files to be en-GB.tpl_dokj3beez3.ini and en-GB.tpl_dokj3beez3.sys.ini

For extra "personal uniqueness", search and replace all instances of "TPL_BEEZ3_" in all template files with an all-cap version of your template name like "TPL_DOKJ3BEEZ3_..." to become: "TPL_NEWTEMPLATEDIRNAME_...

Search and replace in these files:

  • error.php
  • index.php
  • jsstrings.php
  • templateDetails.xml
  • language/en-GB/en-GB.tpl_dokj3beez3.ini
  • language/en-GB/en-GB.tpl_dokj3beez3.sys.ini
  • html/modules.php
  • javascript/hide.js
  • javascript/jd_stylechanger.js

Replace lowercase instance(s) of beez3 with dokj3beez3 in the following files:

  • html/modules.php
  • templateDetails.xml

In the index.php file, change the values for the @subpackage comment at the top of the file - this values actually get read into Joomla!.

@subpackage Templates.dokj3beez3

If building a template from scratch, then set your own copyright and license notices etc.

When template mods are done, take snapshot 205x180 ? and name it templateThumbnail.png

Create custom template_preview.png

Create custom favicon.ico at any number of sites:... images/logo.png

grep -R through all dirs and search for old template name (case insensitive) - should be replaced (unless you wish to ignore all the @subpackage entries)

In Terminal, navigate to the parent directory templates just above the new template (whose directory has been renamed as dokj3beez3 and then zip it up: zip -r dokj3beez3

install it in joomla by uploading it from your localhost (note: if already using an older version of your custom template, change the site to use another template like the default "beez3" so things don't collide while you are updating things and delete the template being updated (use Extensions : Manage). I use a duplicate copy of my template with a slightly different name for this purpose - that way, someone visiting the site while I'm updating won't get a bad UI shock by seeing the old bland beez3 face - they will instead see a slightly older version of my own template). Then when the update is successful, tell Joomla to use your new version.

If installation doesn't work, upload the unzipped files to a new directory in the tmp folder of the joomla code then from extensions, install, install from directory, select directory, install should work fine

Note: once a new template has been installed, template variables will need to be set - see the template manager - such as logo, site name, description, etc. Once this is set, this info will remain persistent as long as the template name doesn't get changed again