Customize the Joomla Frontpage / Home Page Template in Joomla 1.5

Authors:
  • Eric Goldman

21 Mar 2011   ::   Web Development   ::   #Joomla #templates

 

When visitors first land at your homepage, often you want to do something special. You may want to show a special message, change the header, or do a number of different things. Using the normal backend administration, you can set various modules to display based upon the menu item in Joomla 1.5; however, an empty module position may throw off your design. For example, if you have a three column layout, but only want to show two columns on the frontpage this can be problematic to setup each individual module position, and if you change, add, or remove modules this can be a real headache to implement. Furthermore, if you are developing a template for third party users, you really want to make things happen automagically.

Recently, I had to do a template conversion for a client that required various elements throughout the frontpage to be different. This involved not only making CSS changes, but also dynamically loading PHP and JavaScript code for only the homepage. After digging through the API, I have developed an effective method to determine if you are on the home or “default” page in the template and then to properly apply the necessary logic to make your final display. In preparing for this article, I can across a method posted on the official Joomla docs; however, this method relies upon a specific alias. The alias method is interesting, but it will be customized to only a particular installation, making redistribution difficult since there is no requirement that your homepage’s alias be set to “home” as described in the tutorial. Instead, in the method below we will query the Joomla environment for a few additional pieces of information and use some PHP if statements to fine tune our layout control.

<?php
$defaultMenu = JFactory::getApplication()->getMenu()->getDefault()->id;
$currentMenu = JFactory::getApplication()->getMenu()->getActive()->id;
if($defaultMenu == $currentMenu){ 
   $bodyId = 'id="home"'; 
   $homePage = true; 
}else{
   $bodyId = ''; 
   $homePage = false; 
}
?>

Now, lets dig into the small piece of code so you understand what’s going on here. First, lets take a look at JFactory class (docs explanation; API reference). JFactory can be thought of as this magical object that serves as a Joomla accessor/getter that will return you all sorts of interesting information about the current state of your Joomla environment on load.

In the first call, we are loading the menu/alias id for the default menu item. This maps to the item that you have set as the default item in the menu manager; no matter how many menus you have, you can only select one menu item set as the default. This is the page that will load when you visit you go to the root of your website such as http://example.com/index.php. In the screenshot below you can see the menu item that is assigned as default; it is the only menu entry that has a golden star in the “Default” column. Notice the last column, “ItemID” - this is the value that is returned by “getMenu()->getDefault()->id”. Keep in mind that this value does NOT have to be “1”, whichever menu item you select will update the value returned as the default id.

A screenshot showing the important parts of the Menu Item Manager in the Joomla Admin

Now, that we have the default id, which always maps to the homepage of your site, we will query JFactory to provide us with the current (active) menu id for the page that is being loaded. Note, that when you visit your site root this is automatically set regardless of your SEF settings and does NOT require that you append an “?Itemid=X” in the URL. The “Itemid” of the homepage will always match what is set as the default, unless you specifically override it by adding a get-parameter string to the URL.

Now, we that we know what the default menu ID is (which maps to your home page) and what the active ID is (which maps to the page being loaded right now) we can perform some logic and act appropriately. We have stored the results of our two calls in the variables “$defaultMenu” and “$currentMenu” respectively. If these two values have the same id, then we are on the homepage (unless you manually overridded this with a get-parameter). Depending upon if the variables match or do not match, we can set some variables to be used later in our code. It is best to place this logic block at the top of your template’s “index.php” file so that you can use it in both the <head /> and <body /> tags. For example, look at the following code snippet to see how we can use the two variables that are set as a result of our if statement (”$bodyId” and “$homePage”):

<?php
// This is the content of index.php in the root of your template directory
defined( '_JEXEC' ) or die( 'Restricted access' );

$CssDir = $this->baseurl . '/templates/templatename/css';

$defaultMenu = JFactory::getApplication()->getMenu()->getDefault()->id;
$currentMenu = JFactory::getApplication()->getMenu()->getActive()->id;

if($defaultMenu == $currentMenu){ 
  $bodyId = 'id="home"'; 
  $homePage = true; 
}else{
  $bodyId = ''; 
  $homePage = false; 
 }

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<jdoc:include type="head" />

<?php if($homePage == true): ?>
<link rel="stylesheet" href="<?php echo $CssDir ?>/homepage.css" type="text/css" />
<? elseif: ?>
<link rel="stylesheet" href="<?php echo $CssDir ?>/interiorpage.css" type="text/css" />
<? endif; ?>

</head>


<body <?php echo $bodyId; ?> >

...

<?php if($homePage == true): ?>
<h1>Welcome to our website.</h1>
<? endif; ?>

...

</body>

</html>

As you can see, we can use our logic throughout the template layout file easily and effectively. In the <head />, we selected a different CSS file for the homepage compared to the rest of the page. We also used our logic to set an attribute of the <body /> tag; we set the id of the body tag so that specific CSS rules could be loaded with a complex selector such as “body#home .title” while maintaing rules for the selector “body .title” on all other pages. You could also add a special class instead of an id or any other attribute that you need. Inside of the <body /> tag we added a welcome message that will only be shown when the frontpage is loaded. Such a conditional block could be used to change module chrome, load specific modules, or perform other customizations which may be hard to control via CSS or may be more practical for templates designed for distribution.

For example, on the homepage you may want to load a Flash movie instead of a static image as the header. You can use a simple if/else statement to control the proper loading using our “$homePage” boolean defined above.

If you want to control element styles and dynamic code blocks instead based on the menu item (aka “Itemid”) then please consult the guide available on the Joomla docs. If you have any additional questions or comments, let me know in the comments below and I will try to help you out with your coding issues.