My First Joomla! Site Build: Day of Prayer and Action for Children

10.13.2010

'Satori' is the state of sudden indescribable enlightenment in Zen Buddhism. Indescribable perplexity is the constant state of a Joomla! newbie.

"What's the difference between a component and a module?" "Why is my module not showing up on this page?" "Why are there so many HTML tables?" "Why are there question marks in my HTML?"

Questions that seem so trivial to me now had my head spinning and my mouse clicking through folders and files of Matrix-like code. Much like learning anything else, though, taking a step back to understand what I was looking at helped straighten out the learning curve.

I've found that there are two things that need to be understood to truly get your toes wet in the Joomla! pool.

(1) Why we use Joomla! & Understanding the Gist of PHP

For the custom websites that we develop, Joomla! serves as a framework and a foundation that we build upon. With that in mind, the Joomla! fog started to burn off a little more.

In the beginning, a common problem that kept occurring was item misplacement -- in other words, items from an HTML mockup of the template weren't appearing correctly once transferred into the Joomla! framework. Sometimes the items were just pixels off, other times they just simply didn't show up.

Taking a look at a Joomla! template's PHP file definitely started to clear up a lot of confusion that was happening on the front end. With minimal PHP knowledge, however, developing the simplest of Joomla! templates can be a very daunting assignment. Surprisingly, the simplicity of a Joomla! template became apparent once I realized what the PHP's "if-then" statements were actually doing:

<div id="left">
<jdoc:include type="modules" name="left" style="none" />
</div>

Loosely translated as: if there are modules in the "left" position, then create a div with an id of "left" and show all the modules assigned to the "left" position. Once I got a grasp of how the template functioned, setting it up was much less of a headache.

(2)Template Overrides!

So, setting up the Joomla! template is done and now it's time to start enabling the modules you've set up in the Joomla! admin.

Let's take a module from the Joomla! core — "latest news". I've set up the module in the admin and have enabled it, but one thing is missing from the module.

The design called for a date to be featured under each article link:

Question: How do I get a date in the module if it's not there already?

Answer: Template overrides.

Without getting into the intricacies of PHP and how the overrides work, we basically need to take the Latest News module's default template file from the Joomla! core (/modules/mod_latestnews/tmpl/default.php):

<ul class="latestnews">
   <?php foreach ($list as $item) :  ?>
      <li class="latestnews">
         <a href="/" class="latestnews">
         <?php echo $item->text; ?></a>
      </li>
   <?php endforeach; ?>
</ul>

And append the date of the article to the code with some PHP, like so:

<?php if (count($list)) : ?>
   <ul>
      <?php foreach ($list as $item) : ?>
         <li class="news-title">
            <a href="/" class="latestnews">
            ....
            <span class="event-date"><?php echo $item->creationdate;?></span>
            <?php } ?>
         </li>
      <?php endforeach; ?>
   </ul>
<?php endif;

Be sure that this new template override lives in the HTML folder of your template (/templates/YOUR TEMPLATE NAME/html/mod_latestnews/default.php).

Now, I know that this is oversimplified and steps are omitted, but Joomla!'s Documentation page (http://docs.joomla.org/Understanding_Output_Overrides) offers excellent tutorials on how to get this, and other overrides, functioning.

This is just an example of one of the smaller modifications that can be made by a total Joomla! newbie.

Getting to understand the basic structure of a Joomla! template and successfully implementing template overrides have immensely furthered my grasp of the capabilities of Joomla! as a framework and CMS.

Things may not work the very first time I try, but when they do happen to work… Satori.

Day of Prayer and Action for Children work sample

Follow me on Twitter @mtycks