Add custom element to home menu item in Joomla

Question

What i'm trying to do is quite simple as concept, but i'm not that good with php and the joomla framework. Currently the home menu-item is generated like this:

<li class="item-101 current active">
  <a class="hide-text" href="#some-link">Home</a>
</li>

What i'd like to achieve is to insert an <i> element inside only the home menu-item, something like this:

<li class="item-101 current active">
  <a class="hide-text" href="#some-link"><i class="icon-home"></i>Home</a>
</li>

How can i achieve this? I'm using Joomla! 2.5 atm

I guess it's possible do something like "if this menu-item is the home link then add this code inside the <a> tags" but i really don't know how to do it, my php is not strong enough :P

Note:
i'm doing this to achieve a simple home-icon instead of the litteral home menu-item.
As the classes syntax could suggest, i'm using the twitter bootstrap css-framework, but i've implemented the Icomoon font-set (as in joomla 3.0) instead of the tbs Glyph-icons sprites images.
Unfortunately, using font-based icons, text rules are applied to the icons also, and that is the reason i'm trying to insert a custom element inside the <a> tag, so that i can override the hide-text class hiding the home-icon.

Thanks for any suggestion!

score 5 · Accepted Answer · edited Oct 25 '12 at 18:13

5

Have a look in the template file of the menu module.

/modules/mod_menu/tmpl/default.php

The template builds the HTML for the menu module.

I just checked how it works in Joomla 2.5, and in the /modules/mod_menu/tmpl/default.php template the list is build. If you want to add to only the home link you'll have to add a little bit of code. Something like this :

if($item->home == '1'){ $item->title = '<i class="icon-home"></i>' . $item->title; };

Insert this just under the foreach loop and have a go, it should look something like this :

foreach ($list as $i => &$item) :
    // THIS ADDS THE <i> to only the HOME LINK
    if($item->home == '1'){ $item->title = '<i class="icon-home"></i>' . $item->title; }; 

    $class = 'item-'.$item->id;
    if ($item->id == $active_id) {
        $class .= ' current';
    }

Good Luck ;)

edited Oct 25 '12 at 18:13

Gruber

2,196
5
28
50

answered Oct 25 '12 at 17:18

Mark Vink

151
5

5

you may be right, but editing core Joomla fles is a bad idea. I would recommend making a template override before adding this code ;) – Lodder Oct 25 '12 at 17:51
Dear @Lodder, I am right, atleast I'm sure of it in Joomla 2.5. Feel free to augment my advice with a detailed tutorial on how to properly add template overrides to a joomla template. ;) – Mark Vink Oct 25 '12 at 18:08
This indeed worked and the mention to the override by @Lodder is right too, mixed this is working really nice! The `title` trick is pretty nifty, thank you! – Gruber Oct 25 '12 at 18:13
@Gruber "One is glad to be of service" – Mark Vink Oct 25 '12 at 18:16
1

Nice solution, thank you Mark. The suggestion from @Lodder re template overrides is good. To do this copy SITE/modules/mod_menu/tmpl/default.php to SITE/templates/SITE-TEMPLATE/html/mod_menu/default.php . You will probably need to create this second mod_menu directory. Once you've done this, make the edits on this new default.php file – David Taiaroa Feb 08 '13 at 01:58

debonator · Answer 2 · 2015-08-25T14:58:02.773

0

I have been following this guide as well, (Thanks Gruber and Mark Vink) but using the glyphicons instead of IcoMoon. I found there to be a syntax error in the example above. The version hat worked for me was

foreach ($list as $i => &$item) { 

if($item->home == '1')$item->title = '<span class="glyphicon glyphicon-home" aria-hidden="true"></span>' .$item->title; 
$class = 'item-' . $item->id

etc...

edited Aug 25 '15 at 14:58

answered Aug 25 '15 at 12:58

debonator

85
2
13

But having done all of this, I still cannot hide the link text, which I do not need. Please is there a workaround for this? – debonator Aug 25 '15 at 14:59

Add custom element to home menu item in Joomla

2 Answers2