Add Home Link with functional active state to Menu Bar (Alternative Method)

Last modified by Yaveh on Thu, February 24, 2011 09:19
Source|Old Revisions  

This is an old revision of the document!


Slight Improvement on either alternative or original method: Add class=”level-top” to <a></a> for home link if you are using background image for active link but do not want it to show up in sub menus.

  1. <a class="level-top" href="<?php echo $this->getUrl('')?>"><?php echo $this->__('Home') ?></a>

HOPE THIS HELPS ... If not please feel free to delete.

UPDATED: Included the following alternative method to add a home link with functional active state to the menu bar.

Add Home Link with functional active state to Menu Bar (Alternative Method)

Find the file called top.phtml in app/design/frontend/default/yourtheme/template/catalog/navigation/ and make the following change:

  1. <div class="header-nav-container">
  2.     <div class="header-nav">
  3.         <h4 class="no-display"><?php echo $this->__('Category Navigation:') ?></h4>
  4.         <ul id="nav">
  5.  
  6.         <!-- ALTERNATIVE HOME BUTTON HACK -->
  7.         <li class="home"><a href="<?php echo $this->getUrl('')?>"><?php echo $this->__('Home') ?></a></li>
  8.         <!-- ALTERNATIVE HOME BUTTON HACK -->
  9.  
  10.         <?php foreach ($this->getStoreCategories() as $_category):?>
  11.             <?php echo $this->drawItem($_category) ?>
  12.         <?php endforeach ?>
  13.         </ul>
  14.     </div>
  15.     <?php echo $this->getChildHtml('topLeftLinks') ?>
  16. </div>

As well as adding the ‘Alternative Home Button Hack’ code to this file, in Magento 1.4.1.1, I also had to comment out:

  1. <!--<li class="home <?php echo !$_anyActive ? 'active' : '' ?>"><a href="<?php echo $this->getUrl('')?>"><span><?php echo $this->__('Home') ?></span></a></li> -->

Otherwise, i had two ‘Home’ buttons displaying in the navigation bar.

Add the following to the menu.css file in skin/frontend/default/yourtheme/css/. This example is for a CMS home page which uses cms-home class in its body tag.

  1. body.cms-home #nav li.home a { color:#d96708; }

—-ybw

NOTE: The following comments refer to the following methods.


:::: TRIED THIS AND IT ADDS THE LINK, BUT THE ACTIVE STATE DOES NOT FUNCTION CORRECTLY ::::

Special Note to the person(s) responsible for this page. Myself and many others have attempted to use this code snippet to get the result explained with an active state, but have been unable to get the active state to work. The link does work as far as pointing to exsisting cms page or external pages, but the “active” state does not work at all. Page refreshes and all links adjust back to original state.

FOR HOME LINK ONLY ACTIVE STATE I use the following as it’s the simplist way to get the active state working correctly on the home link.

  1. <div class="header-nav-container">
  2.     <div class="header-nav">
  3.         <h4 class="no-display"><?php echo $this->__('Category Navigation:') ?></h4>
  4.         <ul id="nav">
  5.  
  6.         <!-- WORKING ACTIVE STATE HOME BUTTON HACK -->
  7.         <li class="home<?php if (Mage::helper('core/url')->getCurrentUrl() === Mage::helper('core/url')->getHomeUrl()):?> active<?php endif;?>"><a href="<?php echo $this->getUrl('')?>"><?php echo $this->__('Home') ?></a></li>
  8.         <!-- WORKING ACTIVE STATE HOME BUTTON HACK -->
  9.  
  10.         <?php foreach ($this->getStoreCategories() as $_category):?>
  11.             <?php echo $this->drawItem($_category) ?>
  12.         <?php endforeach ?>
  13.         </ul>
  14.     </div>
  15.     <?php echo $this->getChildHtml('topLeftLinks') ?>
  16. </div>

Add Home Link to Menu Bar

For the Home link in the menu bar of the main template you can add some code to one of the template files.

Find the file called top.phtml in app/design/frontend/default/default/template/catalog/navigation/ and make the following change:

  1. <div class="header-nav-container">
  2.     <div class="header-nav">
  3.         <h4 class="no-display"><?php echo $this->__('Category Navigation:') ?></h4>
  4.         <ul id="nav">
  5.  
  6.         <!-- HOME BUTTON HACK -->
  7.         <?php $_anyActive = false; foreach ($this->getStoreCategories() as $_category) { $_anyActive = $_anyActive || $this->isCategoryActive($_category); } ?>
  8.         <li class="<?php echo !$_anyActive ? 'active' : '' ?>"><a href="<?php echo $this->getUrl('')?>"><?php echo $this->__('Home') ?></a></li>
  9.         <!-- HOME BUTTON HACK -->
  10.  
  11.         <?php foreach ($this->getStoreCategories(10) as $_category):?>
  12.             <?php echo $this->drawItem($_category) ?>
  13.         <?php endforeach ?>
  14.         </ul>
  15.     </div>
  16.     <?php echo $this->getChildHtml('topLeftLinks') ?>
  17. </div>

—-ljj

:x:x:x: Tried several on this page. The one directly above worked best. I modified it a little bit to contain a link title. Just paste

<li class="home<?php if (Mage::helper('core/url')->getCurrentUrl() === Mage::helper('core/url')->getHomeUrl()):?> active<?php endif;?>"><a href="<?php echo $this->getUrl('')?>" title="Home">Home</a></li>

just before

<?php echo $_menu; ?>

if you’re using the default theme or a top.phtml that is based on it. :x:x:x:

Add Home Link to Top Links

The correct way to do this is to open the theme/layout/customer.xml file and then modify the section that shows customer links on all pages, to include a link home and also a link to other customer service pages that you have deemed necessary, e.g. ‘returns’ (if you get a lot of those enquiries...).

By way of example, this modified XML file includes a ‘Home’ link and ‘Deliveries’, ‘Returns’ and ‘Contact Us’:

<!--
Default layout, loads most of the pages
-->

    <default>

        <!-- Mage_Customer -->
        <reference name="top.links">
            <action method="addLink" translate="label title" module="customer"><label>Home</label><url></url><title>Home</title><prepare>true</prepare><urlParams/><position>5</position></action>
            <action method="addLink" translate="label title" module="customer"><label>My Account</label><url helper="customer/getAccountUrl"/><title>My Account</title><prepare/><urlParams/><position>94</position></action>
            <action method="addLink" translate="label title" module="customer"><label>Deliveries</label><url>deliveries</url><title>Deliveries</title><prepare>true</prepare><urlParams/><position>95</position></action>
            <action method="addLink" translate="label title" module="customer"><label>Returns</label><url>returns</url><title>Returns</title><prepare>true</prepare><urlParams/><position>96</position></action>
            <action method="addLink" translate="label title" module="customer"><label>Contact Us</label><url>contacts</url><title>Contact Us</title><prepare>true</prepare><urlParams/><position>97</position></action>
        </reference>
    </default>

Add Home Link to Top Links - Alternative Method

This will allow you to add a Home link in the Top Links (My Account | My Wishlist | Etc.) before the My Account.

Find the file called links.phtml in app/design/frontend/default/default/template/page/template/ and make the following change:

  1. <?php $_links = $this->getLinks(); ?>
  2. <?php if(count($_links)>0): ?>
  3.     <div>
  4.         <ul<?php if($this->getName()): ?>):?> id="<?php echo $this->getName() ?>"<?php endif;?>>
  5.        
  6.         <!-- HOME BUTTON HACK -->
  7.         <li class="first"><a href="<?php echo $this->getUrl('')?>"><?php echo $this->__('Home') ?></a></li>
  8.         <!-- HOME BUTTON HACK -->
  9.        
  10.             <?php foreach($_links as $_link): ?>
  11.                 <li <?php if($_link->getIsLast()): ?> class="last"<?php endif; ?><?php echo $_link->getLiParams() ?>><?php echo $_link->getBeforeText() ?><a href="<?php echo $_link->getUrl() ?>" title="<?php echo $_link->getTitle() ?>" <?php echo $_link->getAParams() ?>><?php echo $_link->getLabel() ?></a><?php echo $_link->getAfterText() ?></li>
  12.             <?php endforeach; ?>
  13.         </ul>
  14.    </div>
  15. <?php endif; ?>

NOTE: The if statement in the foreach loop has changed since “Home” will always be first, it wasn’t needed. Also note that the <li> for the “Home” link automatically gets the class “first”.

This allows for space between Home | My Account

Adding non-home links with active classes

So here’s a simple and hardcoded way to get the active class onto your custom links, not just the Home link. This isn’t ideal, but at least it won’t fail when the baseurl changes.

  1. <li class="level0 nav-98 parent <?php if (strpos(Mage::helper('core/url')->getCurrentUrl(),'CMS-PAGE-PATH') != false ) :?> active<?php endif;?>">
  2.       <a href="<?php echo $this->getUrl('') . 'CMS-PAGE-PATH' ?>"><?php echo $this->__('TEXT OF YOUR LINK')  ?></a>
  3. </li>

This solution don’t works in 1.4 because this block is cached and always return the same result. I dont’t know the correct solution. Please edit this and improve.

Add Home as First Link to Top Links - Alternative Method - Magento 1.5

Find the file called top.phtml in app/design/frontend/default/yourtheme/template/catalog/navigation/ and make the following change:

  1.  
  2. <?php //if(count($this->getStoreCategories())>1): ?>
  3. <div class="mw_navigation">
  4.     <ul id="nav">
  5.  
  6. <!-- ALTERNATIVE HOME BUTTON HACK -->
  7.     <?php $first=0;?>
  8.  
  9.     <li class="<?php if ($this->getRequest()->getAlias(Mage_Core_Model_Url_Rewrite::REWRITE_REQUEST_PATH_ALIAS) == 'home') { echo 'active'; } else { echo 'home'; } if($first==0): echo ' first'; endif;?>" onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)"> <a class="<?php if($first==0): echo ' first'; endif;?>" href="<?php echo $this->getUrl('home')?>"><span><?php echo $this->__('Home') ?></span></a></li>
  10.  
  11.     <?php foreach ($this->getStoreCategories() as $_category): ?>
  12.     <?php $first=1;?>
  13. <!-- ALTERNATIVE HOME BUTTON HACK -->   
  14.  
  15.         <li class="<?php if($this->isCategoryActive($_category)){echo 'active';} if($first==0): echo ' first'; endif;?> " onmouseover="toggleMenu(this,1)" onmouseout="toggleMenu(this,0)">
  16.             <a class="<?php if($first==0): echo ' first'; endif;?>" href="<?php echo $this->getCategoryUrl($_category)?>">

Atte:Yahvek

Related Tags:  Link Home Magento 1.5



 

Magento 2 GitHub Repository

Magento Job Board - Some sort of tag line goes here

Latest Posts| View all Jobs