Advanced Techniques: The Joomla Parent Menu ItemID

Dan Luton — Wed, 03 Mar 2010 22:50:56 +0000

Joomla’s ItemID system offers a great way of customizing sites by giving the opportunity to style major parts of a template or page based on the menu links ItemID. Every menu link in a Joomla website has one; and they are unique to each and every link on your site.

But what if you need to style entire sections of a site based on a handful of top-level (parent) menu items?

This article explores the methodology of styling sub-level pages respective of their common parent menu links.

Method 1: Modifying the mod_breadcrumb Module Code

The mod_breadcrumb module is native to Joomla, and by it’s core function maintains a trail of menu link hierarchy leading to the current page. This code can be utilized in order to obtain the top-level menu’s textual name (rather than an itemID number). This method expands the code further to reformat this text into a usable, readable format which can be used to style a page in an understandable way. It’s more code-heavy than method 2, but provides an easier-to-understand output that works in exactly the same way.

Let’s first examine the original code:

defined('_JEXEC') or die('Restricted access');

class modBreadCrumbsHelper
{
	function getList(&$params)
	{
		global $mainframe;

		// Get the PathWay object from the application
		$pathway =& $mainframe->getPathway();
		$items   = $pathway->getPathWay();

		$count = count($items);
		for ($i = 0; $i < $count; $i ++)
		{
			$items[$i]->name = stripslashes(htmlspecialchars($items[$i]->name));
			$items[$i]->link = JRoute::_($items[$i]->link);
		}

		if ($params->get('showHome', 1))
		{
			$item = new stdClass();
			$item->name = $params->get('homeText', JText::_('Home'));
			$item->link = JURI::base();
			array_unshift($items, $item);
		}

		return $items;
	}
	
	function setSeparator($custom = null)
	{
		global $mainframe;

		$lang =& JFactory::getLanguage();

		if ($custom == null) {
			if($lang->isRTL()){
				$_separator = JHTML::_('image.site', 'arrow_rtl.png');
			}
			else{
				$_separator = JHTML::_('image.site', 'arrow.png');
			}
		} else {
			$_separator = $custom;
		}
		return $_separator;
	}
}

We can immediately remove the second part of the code that sets the separator, since we don’t need that. Also, since we only need to return the parent item’s text, we don’t need the loop in place. We shall also use the Application Object since
$global mainframe will be removed in Joomla 1.6, so:

$global mainframe;

Becomes:

$app = &JFactory::getApplication();

Which gives us the completed code below:

class getParentMenuTitle {
	function getList() {
		$getParent = &JFactory::getApplication();
		// Get the PathWay object
		$pathway =& $getParent->getPathway();
		$items = $pathway->getPathWay();
	return $items;
	}
}
$list = getParentMenuTitle::getList();
$count = count($list);
if ($count !== 0) :
	$parentmenu = $list[0]->name;
	$parentmenu = ereg_replace(" ", "-", $parentmenu); // replace spaces with a dash
	$parentmenu = ereg_replace("[^+A-Za-z0-9-]", "", $parentmenu); // strip special characters
	$parentmenu = strtolower($parentmenu); //set name to lowercase
else :
	$parentmenu = "home"; // Set parentmenu to "home" if there are no items
endif;

How To Use The Code

This block of code can be inserted directly into your active template’s index.php file before the HTML is started. Remember to enclose the code block in PHP tags. Alternatively you can include it from an external file.

Once working in the template, you can apply the variable $parentmenu to a top-level container to initiate a CSS hook. Where you add this will depend on what you need to influence in the design, but the further up the hierarchy the more things you will be able to affect in the design – for example:

…will allow you to influence the design across the whole template, such as:

body#menu-link-name a {color:red;}

…which will change all links on the page to red for that particular top-level menu link.

Method 2: Using the Jsite Object

This method is by far the simplist of the two methods, and unless you need a more human-readable format for the menu class/ids then it’s by far the recommended method of the two. It uses the Jsite object to obtain the parent menu’s ItemID and stores it in a variable which can then be applied to any class/id in the template:

$parentmenu = JSite::getMenu()->getActive()->tree[0];

You can obtain the ItemID of any menu links in the pathway by altering the value of tree[0].

How To Use The Code

Again, this code needs to be inserted into the template. The ItemID is stored in the $parentmenu variable, just as it was before, so you can use a similar method to above – but prefix the class/id with something or else you may have problems, for example:

Why Would You Need To Use Method 1?

The first method could be useful in instances where you (as the developer) might want to pass more control onto someone who is less technically-minded – the class/id names which are generated using this method are very easy to predict, whereas method 2 requires the administrator to lookup the itemID for each menu item that requires styling.

Something to Share?

Have an alternative technique, or have you used this (or something similar) on a site before? Please do share it in the comments.

Many thanks to Gergő Erdősi and Amy Stephen for the code presented in method 2 above.

Ten Useful Mac Apps For Web Development

Dan Luton — Wed, 27 Jan 2010 14:46:21 +0000

We’ve compiled a list of our most used development-centric applications for Mac, from coding to design tools – here are our ten favourites!

Panic Coda

Web: panic.com/coda | License: Commercial, $99

All the coding tools you could need in one place, including syntax-highlighted editing of all major code-types such as PHP, CSS, HTML, Ruby, Javascript, XML and more. I particularly love the excellent Site Manager which stores all of your sites in one place and provide easy access for direct, live editing of the site code using FTP, and the clips manager that serves as a snippets repository for reusable code.

Filezilla

Web: filezilla-project.org | License: Free

Simple to use and packed with great features – one of the best free FTP clients out there.

Adobe Fireworks

Web: www.adobe.com/products/fireworks | License: Commercial, ~$299

Easy to use graphics editor with the best support for PNGs for web use. Build rapid designs and slice them up ready to build into a template. Fireworks can also handle (most) Photoshop PSDs with ease, so it’s particularly useful if you work with designers who prefer to work in Photoshop.

VMware Fusion

Web: www.vmware.com/products/fusion | License: Commercial, $79.99

Set-up multiple operating systems which can be run in OS X without needing to reboot. Essential for effective cross-browser testing.

MAMP

Web: www.mamp.info | License: Free (Pro version: £39)

Localhost server environment to enable fast, live development – provides a one-click server running Apache, PHP and MySQL.

Quicksilver

Web: docs.blacktree.com/quicksilver/quicksilver | License: Free

Quickly access all of your applications at the touch of a button – no more searching around in your Apps folder!

Apple Time Machine

Web: www.apple.com/macosx/what-is-macosx/time-machine.html | License: Free (ships with Mac OS X)

The perfect incremental backup solution – and best of all, ships with OS X and is seamlessly integrated. Just add an external disk drive!

Betterzip

Web: macitbetter.com | License: Shareware, $19.95

Brilliant archive utility offering a variety of formats and and easy-to-use interface.

Skype

Web: www.skype.com | License: Free

Communicate with worldwide clients for free, or add a real phone number without needing a physical phone line.

Process

Web: www.jumsoft.com/process | License: Shareware, $39

Useful task-list and project tracking.

Toolbox Digital Services » Design

Advanced Techniques: The Joomla Parent Menu ItemID

Method 1: Modifying the mod_breadcrumb Module Code

How To Use The Code

Method 2: Using the Jsite Object

How To Use The Code

Why Would You Need To Use Method 1?

Something to Share?

Ten Useful Mac Apps For Web Development

Panic Coda

Filezilla

Adobe Fireworks

VMware Fusion

MAMP

Quicksilver

Apple Time Machine

Betterzip

Skype

Process