Having installed a fresh copy of WordPress and then dabbling in the template section, I was compelled to write about the template development in the popular Open Source CMS Joomla! in contrast to that of WordPress. I make my observations after having worked on Joomla! templates for over 4 years.
JOOMLA! vs. WORDPRESS
To get a brief understanding of Joomla! and WordPress, I would strongly recommend you check out the article on Open Source and Usability: Joomla! vs WordPress on Playing With Wires. As the author Viktor Petersson eloquently puts it...
If Joomla! is Linux, then WordPress is Mac OS X. WordPress might offer only 90% of the features of Joomla!, but in most cases WordPress is both easier to use and faster to get up and running.
While there is some truth to this statement, I believe there is always more to the story than what meets the untrained eye.In terms of usability, WordPress does have an edge on Joomla!. It is fairly fast to setup and has a very small learning curve. Not to mention it is very lightweight (2.2mb - compressed). Joomla! on the other hand is much bigger (6.5mb-compressed) and even more complicated in terms of usability. However, Joomla! does support a wide variety of uses, where blogging and personal websites are just one such area. But I will admit, the learning curve on Joomla! is significantly higher and it's robust control panel is just enough to overwhelm any new user. Nevertheless, despite all this I think Joomla! can teach us a thing or two about how a content system template structure should be setup.
JOOMLA TEMPLATESIn each Joomla! template there is one index.php file. The index.php file contains tables or divs where each cell or div represents a 'position' that can be utilized for a module. A module is similar to widgets in WordPress. So, I can design a template with plenty of extra positions and keep on adding modules or moving modules without having to modify the template at a later stage. For example: I create a index.php file with several divs. In each div I place the following code with appropriate modifications to the name tag (user1, user2, and so forth).
<jdoc:include type="modules" name="user1" style="raw" />
This tells the Joomla! system that so and so div is user1 or user2..etc. So, when I am allocating module positions in the module manager (in the Admin panel) I can choose to place the module in any of the locations that I have created. What's more is that I can place multiple modules in the same position. So for example I have a module for Search and a module for Polls, I can select position user1 for both of them and thus place Polls below Search or vice verse in the same div.
In order to allow for customization, each Joomla! template has a stylesheet (just like WordPress). This stylesheet is linked to the index.php file and allows the designer to create a look and feel for the template. Also, Joomla! allows designers to create custom CSS for modules, pages and components within this stylesheet. The custom CSS class suffix is activated when placed in the specific modules, pages or components configuration.
In case of frameworks, such as jQuery or Moo or YUI. They can also be easily integrated into the template via the index.php file. Based on template and the complexity of the design more files can be added for specific purposes such as custom menus or template tools (allows visitors to change font, template color, width..etc). And finally, all the details about the template such as the author, the files associated with the templates and the template options are stored in one xml file called TemplateDetails. This TemplateDetails.xml holds meta-information related to the template and is used by the Joomla! template Installer and the Joomla! Template Manager. Interesting? Read more about Joomla! Templates here.
