Joomla! How-To's: Templates

One thing I often need to do while developing a template is change certain parts of the template depending on which page I am on. For example, let's say I am developing a template for a site that runs Virtuemart, and I want to have 3 columns on every non-Virtuemart page, and 2 columns on every Virteumart page. A solution that I often like to use is to make the column "collapsable" when the value of "option" is "com_virtuemart". When "option" is equal to "com_virtuemart", that simply means that the Virtuemart component is loaded.

Where is the value of "option", and how do I get it?

If you are not using SEF URL's, you can easily see where the value of "option" comes from. For a Virtuemart page, the URL will look something like this:

"index.php?option=com_virtuemart&Itemid=3"

You'll notice that in the URL, the value of "option" is "com_virtuemart". This is the most common way of passing parameters from one page to another in Joomla! It is called a GET request, which simply means that parameters are passed at the end of the URL. (Another type of request is POST, which passes parameters without appending them to the URL. The technique I will show you in this article will get the parameter whether is is passed through a GET or a POST request.)

That's great, but how do I get that value in my template?

I'm glad you asked, because this is the most important part of determining what page you are on from within the template. At the top of your template "index.php" file, add the following code:

 
<?php
 
$pageoption = JRequest::getVar( 'option', '' );
 
?>
 

"JRequest" is a Joomla! object that is used for getting variables passed through an HTML request (GET, POST, or SESSION). The "getVar" method returns the desired value as a string. The first parameter in the "getVar" is the name of the value we want to retrieve. In this case, we want to get the value of "option", so we set the first parameter to 'option'. The second parameter is a default value, just in case the parameter we are looking for has no value. I usually set that to an empty string, but you could put just about anything you want there. For example, if there is no "option" (not likely in Joomla), then the value of $pageoption in the code above will just be an empty string ('').

Yes, but what do we do with this information?

Now that we know the value of "option", we have a lot of flexibility to modify the layout of our template depending on which component is loaded. Here is how you might do it:

 
<?php if ($pageoption == 'com_virtuemart') { ?>
<!-- Put some HTML here that you want to show while Virtuemart is loaded -->
<?php } else { ?>
<!-- Put some HTML here that you want to show while Virtuemart is not loaded -->
<?php } ?>
 

Hiding a module position

Here is how you use this concept to hide a module position when Virtuemart is loaded:

 
<?php if ( $pageoption != 'com_virtuemart' && $this->countModules('moduleposition') ) { ?>
<div class="collapsiblecolumn">
 <jdoc:include type="modules" name="moduleposition" />
</div>
<?php } ?>
 

In plain English, this code basically says if Virtuemart is not loaded and there are modules published for "moduleposition", then show the modules in "moduleposition". The name "moduleposition" can be any name you choose.

Questions/Comments

As always, questions and comments are welcome.