Customizing Joomla! articles with component template overrides

You are not limited to customizing Joomla! templates at module level; you can define component template overrides to change what is seen for Joomla! pages of a particular type. Here, we'll look at customizing article pages in Joomla!, which, by default in the rhuk_milkyway template, looks similar to this:

We'll be customizing the template to add an automatic "mention this website on Twitter" graphic alongside the icons for viewing a PDF of the page, printing the page, and sending it to a friend via e-mail.

Getting ready

As articles in Joomla! are classified as part of the content component, the default template for articles is located in the following directory: \components\com_content\views\article\tmpl\. As usual, the file that you need here is called default.php. Copy this into your template's \html\com_content\article\ directory.

You'll also need to save a Twitter icon with dimensions of 16 by 16 pixels in the \images\M_images\ directory of your Joomla! installation as twitter_button.png.

How to do it...

1. 1. In your template's default.php, which you copied above, find the lines that read:

   <?php if ($this->params->get('show_pdf_icon')) : ?>
   <td align="right" width="100%" class="buttonheading">
   <?php echo JHTML::_('icon.pdf', $this->article, $this->params, $this->access); ?>
   </td>
   <?php endif; ?>
   

2. 2. Below this, you can add the following code to create your Twitter button:

   <td align="right" width="100%" class="buttonheading">
   <a href="http://twitter.com?status=is reading <?php echo $this->baseurl ?>" title="Tweet this website">
   <img src="<?php echo $this->baseurl ?>/images/M_images/twitter_button.png" alt="Post this to Twitter">
   </a>
   </td>
   

3. 3. Now visit an article page on your Joomla! website and refresh the page. You should see the changes that you just made take effect:

How it works...

Component template overrides work in a manner similar to that of module template overrides—Joomla! first looks in the currently enabled template's \html directory for a customized template for the component it is loading before resorting to the default template provided in the \components directory of your Joomla! website.

By adding ?status= followed by text to the end of the Twitter URL, that text is added to a Twitter user's status box, assuming that they're logged into their Twitter account. However, the text is not sent as a tweet to their followers until the Twitter user clicks on the Tweet button:

Note

Remember that Twitter can handle only 140 characters per message, so try and keep it short!

See also

• Customizing Joomla!'s home page with module output override

• Creating a new module style (chrome) in Joomla!