How should I go about writing a Joomla! template?

Question

I am using Joomla! CMS to develop a website. In the not-so-distant past I customized a template to schlep up a website. It was fun and interesting to tear apart the code to de-joomla!-fy the template. So interesting that in fact, I am flirting with the idea of making my own template from scratch.

So, if I am to pursue this, where do I start? Do you know of any really good reference material, or should I just play with the code all day until things work out? I prefer to do tons of reading (for the concepts) before I go at it.

Answer 1

The time-honored method of learning how to do code/templates/anything is to "steal" from someone who already knows how to do it and then modify that until:

• you're happy with the outcome; and/or
• you've learned enough to be able to go it alone.

I suggest that would be the quickest route to success. Theory is fine but you'll learn faster by doing, and making mistakes.

Answer 2

Create a HTML page with the layout you want, inclusive of stylesheets and Javascript (preferably Mootools based)
Keep the template initially very basic.
Save this page as index.php page.

The default directory layout is:

• css
• html
• • com_<componentname>/ mod_<modulename> (used to override the base templates of Components and Modules)
• images
• js
• templateDetails.xml
• index.php
• favicon.ico

Change/Add the different Joomla constructs
Also updating the related templateDetails.xml with positions and file locations etc.
See a current template for an example of the layout.
Ex.

<?php
 // no direct access  
  defined( '_JEXEC' ) or die( 'Restricted access' );  
?>

---

Header section:

 <jdoc:include type="head" />

---

Your different Modules:

<?php if($this->countModules('search')) : ?>
  <jdoc:include type="modules" name="search" />
<?php endif; ?>


<jdoc:include type="module" name="breadcrumbs" />  

Your Main Content tag is:

<jdoc:include type="component" />

---

To allow your template the ability to display debug information add:

<jdoc:include type="modules" name="debug" />

---

For more advanced additions to a template have a look at the default templates (ja_purity, Beez).
To override component and module layouts copy the layout files of the component or module into a similarly named directory below the html directory of your template and change it.

Edit...
Extra utilities.

1. To highlight the used module names in a browser add tp=1 to the end of your URL ex. yourdomain.com?tp=1
2. To View an inactive but installed Template add template=template_name. ex. yourdomain.com?template=Beez

These two can be combined, like this. yourdomain.com?template=Beez&tp=1

For more information look at:

1. Joomla Template Tutorial Part 1 - Joomla Template Concepts
2. How to Create Your First Joomla Template
3. Joomla 1.5 Template Tutorial at Compass Design
4. Google Joomla templates