Skip to content

Using the Page Class Suffix in Joomla templates and components

Published by admin on 15 Jul ’11

Load Suffix

First, we need to find out what the page class suffix is for the page we are visiting. To do this, you will need add some code to your template:

  1. Open your template’s index.php file (located in /templates/*template-name*/)
  2. Find the <head> tag in the index.php, near the top area of the template
  3. Above this, insert one of the following code blocks (Either of the following options will work fine in most cases. However they work slightly differently, so in certain cases your needs may dictate a specific choice.)

By Itemid

To load the page class suffix associated with the current Itemid, add this to the top of the index.php file:

<?php
  $itemid = JRequest::getVar('Itemid');
  $menu = &JSite::getMenu();
  $active = $menu->getItem($itemid);
  $params = $menu->getParams( $active->id );
  $pageclass = $params->get( 'pageclass_sfx' );
?>

By Active Menu Item

To load the page class suffix associated with the active menu item, add this to the top of the index.php file: (For sub-pages with no active menu item, this will load the page class suffix for the default menu item.)

<?php
   $menus      = &JSite::getMenu();
   $menu      = $menus->getActive();
   $pageclass   = "";

   if (is_object( $menu )) :
   $params = new JParameter( $menu->params );
   $pageclass = $params->get( 'pageclass_sfx' );
   endif; 
?>

(credit: Page Class Suffix in template code)

Security

You should always use htmlspecialchars() in your code before writing something into an HTML attribute, else you open up an attack vector to inject script code into your page.

Insert Suffix

The next step is to use the page class suffix somewhere in the template.

In the Body Tag

The more common method would be to apply the page class suffix as an id or class to the <body> tag. Find the <body> tag (below the </head> tag) and replace it with this:

<body id="<?php echo $pageclass ? htmlspecialchars($pageclass) : 'default'; ?>">

To Load a Page-Specific Stylesheet

The second method would be to load a stylesheet unique to the page in question. Instead of modifying the <body> tag, look for the stylesheet link within the <head></head> tags and add the following line directly beneath it:

<link rel="stylesheet" href="templates/<?php echo $this->template ?>/css/<?php echo htmlspecialchars($pageclass) ?>.css" type="text/css"/>

For more info: http://docs.joomla.org/Using_the_Page_Class_Suffix_in_Template_Code

Published inCodingJoomla

2 Comments

  1. Rob

    Added the above code for Active Menu Item but get error:-

    Fatal error: Class ‘JParameter’ not found in /home/venttrex/public_html/templates/venttrex/index.php on line 20

    Don’t know if anyone will see this or where else to post for help.

    regards
    Rob

    # 10 Apr ’12
  2. Rob

    Should also have said tried By ItemId but only ever returns:-

    body id=”default”

    Joomla v2.5.x

    regards
    Rob

    # 10 Apr ’12

Comments are closed.