How to add an external javascript/css file to Magento?

Featured Image © image by mauricesvay left @flickr

Have you ever had a need for adding external files into your Magento layout?
If you had then you know that you cannot do that from your xml layout files using methods/action:

<action method="addJs">
<action method="addCss">
<action method="addItem">

You could do that by hard-coding your “head.phtml” file, but then those external files will be loaded on all Magento pages.
This simple extension will provide you easy access for adding/removing external files such as JavaScript or CSS, libraries from remote servers which you cannot or don’t want to put on your server.
I called it Inchoo_Xternal extension.

How wonderful it would be if you could add or remove external, let’s say JavaScript libraries:
from yours “layout.xml” file and without modifying/hard-coding yours “head.phtml”.

Extension is very simple and it exists from only one Block class which extends and rewrites “Mage_Page_Block_Html_Head” class and configuration files of modules.

<?xml version="1.0"?>
                <inchoo_xternal module="Inchoo_Xternal">

Block class is very simple and it have 2 new methods I have called:
removeExternalItem which do the same as removeItem
addExternalItem also do the same as addItem
but I have added new types:

which loads external libraries.
Here is example of my layout.xml:

<layout version="0.1.0">
            <reference name="head">          
                <action method="addItem"><type>external_css</type><name></name><params/></action>                
                <action method="addItem"><type>external_js</type><name></name><params/></action>
                <action method="addExternalItem"><type>external_js</type><name></name><params/></action>
                <action method="addExternalItem"><type>external_css</type><name></name><params/></action>  
		<reference name="head">
                <action method="removeItem"><type>external_css</type><name></name><params/></action>                
                <action method="removeItem"><type>external_js</type><name></name><params/></action>
                <action method="removeExternalItem"><type>external_js</type><name></name><params/></action>
                <action method="removeExternalItem"><type>external_css</type><name></name><params/></action>

As you can see from this example, external libraries are loaded on all the pages but product view page.

Download Inchoo_Xternal extension for easily adding external javascript and css files.

Enjoy coding!

New Service: On-site Trainings

Let our certified Magento developers and solution specialists help you in speeding up Magento learning process. We provide training programs for every role in your business:


  1. The external stylesheets seem to load after the internal stylesheets no matter what order you place them in the local.xml file. Is there a way to solve that? I want my internal stylesheets to come after the external.
    Thanks for the plugin!

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <blockquote cite=""> <code> <del datetime=""> <em> <s> <strike> <strong>. You may use following syntax for source code: <pre><code>$current = "Inchoo";</code></pre>.