How should I go about writing a Joomla! template? - templates

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.
To highlight the used module names in a browser add tp=1 to the end of your URL ex. yourdomain.com?tp=1
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:
Joomla Template Tutorial Part 1 - Joomla Template Concepts
How to Create Your First Joomla Template
Joomla! Docs: Template Development
Google Joomla templates

Answer 2

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.