Creative Blog
Coda has become an essential tool for my everyday web development process. There are so many useful features I can’t recommend it enough. One of Coda’s particularly useful features is the Clips panel which allows you to create and save your own code snippets which can be quickly inserted into your markup. When repeatedly using the same code, it really saves some time.
I have bundled together some useful snippets for Joomla front-end development. As long as you have Coda installed, simply download the file and double click it to install the clip group into the Coda app, or you can right-click on the Clips pane and select Import Group.
For those without Coda, or who are just interested, I have included the snippets below along with a short explanation as to the functionality of each piece of code.
Base URL
This will retrieve your site’s base URL – the full path before the install directory, for example: http://localhost:8888/ or http://www.yoursite.com
<?php echo $this->baseurl ?>
Template URL
This will retrieve your site’s template path, useful if you use several templates. For example: http://www.yoursite.com/templates/YourTemplateName/
<?php echo $tmpTools->templateurl(); ?>
Include: Head
This will output some pre-determined tags into the <head> section of your website, typically <title> tags, <meta> tags, RSS links, and Mootools <script> tags.
<jdoc:include type="head" />
Include: Component
The component tag is fundamental for displaying your article content. Without it, your pages will be very stark! You only ever need to insert this into your template once.
<jdoc:include type="component" />
Include: Module
The module tag gives you the freedom to create pockets of content wherever you may need. You can use as many of these tags as you require. The module name must match the one in your templateDetails.xml file.
<jdoc:include type="modules" name="modulename" />
Include: Message
This will work in conjunction with Joomla’s built-in messaging system, i.e, notifications which appear after certain actions, such as after saving content in the front-end editor. If this tag isn’t present in your template then, you guessed it, no notifications will appear!
<jdoc:include type="message" />
Include: Debug
Including this tag will simply allow debug info to be displayed if you have the debugging option selected within the Global Configuration section of the back-end administration.
<jdoc:include type="modules" name="debug" />
Module Position
This simple snippet is useful when setting up your custom module positions in your templateDetails.xml file.
<position>module</position>
Conditional: Module
Conditional statements open-up a great deal of flexibility when building templates. The example <div> will only show if the module is switched on.
<?php if($this->countModules('example')) : ?>
<div id="example">
<jdoc:include type="modules" name="example" />
</div> <!-- end example -->
<?php endif; ?>
Conditional: Front Page
This conditional statement works in exactly the same way as above, except this one displays the first <div> on the Front Page and the second <div> on all other pages. Of course, you can omit either <div> if you require.
<?php if( JRequest::getVar( 'view' ) == 'frontpage' ) { ?>
<div>This will show on main</div>
<?php } else { ?>
<div>This will show on all other pages</div>
<?php } ?>
Conditional: Section
You can use this conditional statement to display certain code depending on what section you are on. You define the sections by adding the section ID, the example below uses 2 and 3. You can find the ID of the section/s you require in the Section Manager – the ID is in the column on the far right.
<?php
$db = &JFactory::getDBO();
$id = JRequest::getVar('id');
if ( $id ) {
if ( JRequest::getVar('view') == 'section' ) {
$sectionid = $id;
} elseif ( JRequest::getVar('view') == 'category' ) {
$query = 'SELECT section FROM #__categories WHERE id = ' . (int) $id;
$db->setQuery($query, 0, 1);
$sectionid = $db->loadResult();
} elseif ( JRequest::getVar('view') == 'article' ) {
$query = 'SELECT sectionid FROM #__content WHERE id = ' . (int) $id;
$db->setQuery($query, 0, 1);
$sectionid = $db->loadResult();
}
} else {
$sectionid = '';
}
if ($sectionid != '' && $sectionid == 2) { ?>
/* YOUR CODE HERE */
<?php } elseif ($sectionid != '' && $sectionid == 3) { ?>
/* YOUR CODE HERE */
<?php }
?>
Get Page Title
This will simply grab your current page title and output it wherever you need using the echo $mytitle statement.
<?php $mydoc = &JFactory::getDocument(); $mytitle = $mydoc->getTitle(); ?> <?php echo $mytitle; ?>
404 Page
You can easily create a custom 404 page by creating an article called 404 (making sure the alias is also called 404) then add this code to the error.php doc in your template’s system folder. I usually just delete the default code and add the following snippet. Don’t forget to add your own site path!
<?php
// no direct access
defined( '_JEXEC' ) or die( 'Restricted access' );
if (($this->error->code) == '404') {
header('Location: http://localhost:8888/sitename/404');
exit;
}
?>
Add Script to <head>
This is the preferred way to include stuff like additional javascript files to the <head> section of your template file.
$doc->addScript(JURI::root().'templates'.DS.'sitename'.DS.'js'.DS.'javascript.js');
Remove Mootools
Unfortunately, removing the Mootools calls from a Joomla template is not as straight forward as simply removing two lines of code. Fortunately this golden snippet will do just that, leaving your front-end Mootools’less! Be aware that any front-end system, such as the calendar picker in the editor’s article publish settings, will not work if you use this code.
<?php // Remove auto-generated mootools from header $headerstuff = $this->getHeadData(); reset($headerstuff['scripts']); $moo = key($headerstuff['scripts']); unset($headerstuff['scripts'][$moo]); $this->setHeadData($headerstuff); ?>
No Direct Access
It’s crucial that any php doc Joomla uses has this at the top to prevent unauthorised access to the code.
<?php
defined('_JEXEC') or die('Restricted access');
?>
