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

Create a HTML page with the layout you want, inclusive of stylesheets and Javascript
(1.5/2.5 is Mootools based)
(Joomla 3.x is jQuery based)
Adding Javascript

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! Docs: Template Development
4. Google Joomla templates