Extend the use of links.phtml

In Add a CSS class to Magento menu links article we showed you how to add a CSS class to li or anchor tag in “action method=”addLink” that uses links.phtml, but you may not aware that you can use the same template file to extend a link block type. In this article we will show you how.

In the default Magento’s page.xml file you see this block type which is used for “My Account | My Wishlist…” links, and it’s wrapped inside the “header” block, called from page/html/header.phtml, in which each menu link resides in its respective xml file using “addLink” action method.

In page.xml we have this:

In header.phtml we have this:

getChildHtml('topLinks') ?>

Then in customer.xml we have this:

You can clearly see from the above screen shot, the addLink method is referenced to “topLinks”.

Add a new block type

In this simple tutorial we will move away the “Login” and “My Account” links from “topLinks”, we will also add a new link for “Register” which will bring user to “Create an Account” page when not logged in or not yet registered an account.

• Step 1:

  First add a new block type in page.xml, let’s call it “login.links”. Because it’s located in the header so we want to wrap this new block type inside the header. You can place it above or below the top.links.

• Step 2:

  Proceed to header.phtml, call the “loginLinks” like so and place it above or below the existing “topLinks” depending on how you want it shows in the front-end.

  getChildHtml('loginLinks') ?>
getChildHtml('topLinks') ?>

• Step 3:

  Because Login link is located in customer.xml, we therefore proceed to that file to add a addLink method and referenced it to “login.links”; when a customer has not logged in, we want it to show “Register | Login”, and when a customer has logged in, we want to show “My Account | Logout”. To do this, first navigate to section where you can see that “Login” is referenced to “top.Links”, all we need to do is change the “top.links” to “login.Links; we also want to add a new set of addLink for “Register”. How do we know the url for the register page? Easy, the template file for “Create an Account”" page is located at customer/form/register.phtml, so we call the getRegisterUrl: “customer/getRegisterUrl”. We also added classes for both links. The final result looks like so:

  

  Now proceed to , change the “top.links” to “login.links”, add a new set of addLink for “My Account”. In the same “customer.xml” file, you can find “My Account” is declared under and is referenced to “top.Links”, remove it so that it doesn’t show up twice.

  

  We also added two different classes for the links – this is useful should you decided to add icon next to the link text, or use image replacement technique for the links.

Build a CMS pages menu links

You can also use the same method to make a CMS pages menu. Whether it’s a better approach, is arguable especially Magento v1.4 has a new widget feature that will make building CMS menu links easy, still we find it useful and will continue using it for CMS pages menu. Here is the code we use in our Magento premium themes.

Bloghttp://red.lotusseedsdesign.com/blogtest/?themedemo=wellness10
class="tp2"
Customer Servicehttp://red.lotusseedsdesign.com/customer-service10
class="tp3"
FAQhttp://red.lotusseedsdesign.com/faq10
class="tp4"
Abouthttp://red.lotusseedsdesign.com/about10
class="link-feed tp5"
Contactcontactstrue
class="contac"

Note that for CMS pages (except Contact us), we use absolute links, this is because we have not find a reliable way using relative path. Example, if you use /customer-service, the link will work when you click from one CMS page to the other CMS page, but if you are at a product or a product listing page, clicking on a CMS page results a 404 page because Magento handles the url path in such manner: yourstore.com/product/customer-service.

If you find this article useful, please share it, dig it or tweet it.