Building Good Joomla Templates

Arlen Walker <p>Joomla is an open source content management system that's been making a lot of noise. We've used it ourselves for several sites, but until now, we've always had to grit our collective teeth to do so, because it wasn't possible to use it and follow the industry best practice of standards-based design and development.</p> <p>Now that 1.5 has shipped and Joomla has adopted the Model-View-Controller design pattern, our attitude is about to change. In this series of articles, we're going to show you how you can use Joomla and produce websites that follow the standards, and along the way we'll touch on other "best practices" of the industry.</p> <h3><abbr title="Model-View-Controller">MVC</abbr> Pattern</h3> <p>The <abbr title="Model-View-Controller">MVC</abbr> pattern breaks a larger application into three chunks named (obviously) Model, View, and Controller, which interact with each other. The Model is the data itself and all operations on it (getting it, storing it, changing it). The View represents the other end of the application; it presents all or a portion of the data (from the Model) to the user and interacts with the user. Both the model and the view are in two-way communication with the outside of the application: the Model stores and retrieves the data, while the view presents the data to the user and receives instructions from the user.</p> <p>In between the two is the Controller. The Controller handles all events that affect the Model and the View. It turns the request from the user (handled by the View) into actions for the Model to carry out, and turns the raw data given to it by the model into information the View can then display to the user.</p> <p>The traditional view of the three parts to any program are Input, Processing, and Output. Since the data flow can go either direction in an MVC application, both the Model and the View can be seen as Input or Output, each acting as the opposite of the other (the submission of new data from a user makes the View the Input and the Model the Output, while the display of data already entered makes the Model the Input and the View the Output). But in either case, the Controller is the Processing portion of the application. The Controller applies the business logic to the input of the View or the Model, before passing it on to the other.</p> <p>By itself, the move to MVC is useful and good, but not enough to get us to full standards compliance. But the separation of presentation logic from the rest of the program, gathering it into the View as required by the MVC pattern, yielded an extra bonus: the opportunity for template overrides. We'll show them in action soon, but for now we'll just say template overrides allow us to change the way the modules and components are presented to the user, allowing us finally to fix the bad (as in non-standard) code Joomla still sends out.</p> <h3>Why Should I Care?</h3> <p>Why should you care about writing standard code? One reason is clear communication. Without some form of a standard, communication isn't possible (think for a moment how you might read that last sentence if there were no standard definitions for any of the words in it).</p> <p>That's too simplistic, but it carries the seeds of the real reasons standards matter. Even if you had only a vague definition of the words I used (much the way some browsers have a vague definition of what the standards mean) you could piece together the meaning of what I wrote. But that's the heart of it: you could <em>piece it together</em>. You wouldn't always get it right, and often you'd almost get it.</p> <p>The short form of the "why standards matter" speech is that development is easier, resulting pages are smaller and download/render faster (less <em>piecing together</em>) pages are more reliably handled by future devices (which will not include the desktop browsers of today) the information is more readily accessible to those who need assistive technology. If you're interested in a more long form discussion of it, see <a href=http://www.codegeek.net/web_standards.htm">these</a> <a href="http://www.mikeindustries.com/blog/archive/2003/06/espn-interview">pages</a>. The interview with the person from ESPN over their move towards standards support is especially good.</p> <p>Bottom line here is that standards-compliant coding is a Good Thing.</p> <h3>But Wait, There's More</h3> <p>Simple standards compliance won't be the only reason we're going to override Joomla's defaults. We also want to improve the markup.</p> <p>What's markup? Those are the actual XHTML tags being used on the page. Each one of them has a meaning: for example <p> starts a paragraph, while <ul> starts an unordered list. What do I mean "improve" it? Sometimes these tags are used in Joomla's output to mean something different from their semantic meaning.</p> <p>Is that so bad? Yes, and no. Most people won't see a difference between a list and a sequence of one-line paragraphs when the right styles are applied. But screen readers for the deaf might, as well as other assistive devices. And as we move toward the future the meaning of the tags can only become more important. If we use the tags properly now, we can reach a wider audience today, and prevent future problems as thousands of tags need updating. (Anyone remember COBOL and the Y2K adventure? I thought so.)</p> <h3>Starting Out</h3> <p>But before we can start learning to create the template overrides, we need to find out which templates <em>need</em> overriding. To do that, we'll have to start with a blank template, and fix the bad bits as we discover them. To do that, we'll have to make a few assumptions about you, the reader:</p> <ul> <li>You are interested in creating fresh looking standards compliant templates for your Joomla site.</li> <li>You aren't afraid of a little PHP code, especially so long as someone (like me) is holding your hand and helping you along.</li> <li>You have permission to edit the blank template's index.php file. You can do this either through the Joomla Administrator Control Panel or by editing a file and transferring it up to your site.</li> <li>You have permission to create new directories within your template directory on the website.</li> <li>You are willing to (and have permission to) make a few changes in the Joomla code itself, beyond the template. The developers weren't perfect, they left some non-compliant bits in places where template overrides can't reach. We'll have to fix them as well.</li> <li>(Yes, this is a list of assumptions, that's why it was marked up as a list, and not a sequence of paragraphs.)</li> </ul> <p>If you don't feel you can fit in with these assumptions, then I'm not sure how much you'll get out of the rest of this series, but you're welcome to follow along, anyway. If your eyes have glazed over and you can't get comfortable with it, then go ahead and drop off; we'll see you when we start the next series.</p> <h3>Giving Joomla A Blank Look</h3> <p>Here are the contents of the only two files in the absolutely blank template that matter. First templateDetails.xml:</p> <pre> <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://dev.joomla.org/xml/1.5/template-install.dtd"> <install version="1.5" type="template"> <name>Absolute</name> <creationDate>19 February 2008</creationDate> <author>Arlen P Walker</author> <authorEmail>public@arachnidae.com</authorEmail> <authorUrl>http://www.arachnidae.com</authorUrl> <copyright></copyright> <license></license> <version>1.0.0</version> <description>Blank template for Joomla 1.5</description> <files> <filename>index.php</filename> <filename>templateDetails.xml</filename> <filename>index.html</filename> <filename>html/index.html</filename> </files> <css> <filename>css/template.css</filename> <filename>css/index.html</filename> </css> <images> <filename>images/index.html</filename> </images> <javascripts> </javascripts> <positions> <position>left</position> <position>right</position> <position>top</position> <position>breadcrumb</position> <position>user1</position> <position>user2</position> <position>user3</position> <position>user4</position> <position>debug</position> <position>syndicate</position> </positions> <params> </params> </install> </pre> <p>And now the index.php file:</p> <pre> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1" /> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/system.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/system/css/general.css" type="text/css" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/<?php echo $this->template ?>/css/template.css" type="text/css" /> </head> <body> <jdoc:include type="modules" name="banner" style="XHTML" /> <jdoc:include type="modules" name="breadcrumb" style="XHTML" /> <jdoc:include type="modules" name="left" style="XHTML" /> <jdoc:include type="modules" name="right" style="XHTML" /> <jdoc:include type="modules" name="top" style="XHTML" /> <jdoc:include type="modules" name="footer" style="XHTML" /> <jdoc:include type="modules" name="user1" style="XHTML" /> <jdoc:include type="modules" name="user2" style="XHTML" /> <jdoc:include type="modules" name="user3" style="XHTML" /> <jdoc:include type="modules" name="user4" style="XHTML" /> <jdoc:include type="modules" name="syndicate" style="XHTML" /> <jdoc:include type="message" /> <jdoc:include type="component" /> </body> </html> </pre> <p>The rest of the files included in Absolute are empty. (It <em>is</em> supposed to be a blank template, after all!)</p> <p>Feel free to copy and paste the above files for use in your own blank template. If you don't want to roll your own absolutely blank template, <a href="/files/Absolute.zip">download Absolute</a>.</p> 2008-02-22T06:49:10-08:00 false 1 Part 1, Standards and the Blank Template Joomla Building Good Joomla Templates

2008-02-22T14:05:45-08:00