I have a custom requirement to add a specific JS and CSS related to website's footer. Is there any way in Magento by which I can add it in footer section ?


The footer block doesn't offer any support for js directly, like the head.

But there is a block with the name before_body_end where you can add everything you want with template or text block.

I would think about your own template and the block type Mage_Page_Block_Html_Head, then you can use what @Dexter recommended.

No, you need something like this, you have no page/html_head block to refer too:

<!-- get the block which we want our content in -->
<reference name="before_body_end">
    <!-- add another block of type page/html_head to have all the great functionality to add/remove css and js stuff -->
    <!-- it is important to set your own template, because the head block has a defined default template page/head.phtml which has all the stuff of the head. Using this will bring a lot of problems -->
    <block type="page/html_head" name="scripts_in_footer" template="YOUR TEMPLATE">
        <!-- add whatever you want as you are used to in the head via the standard magento api -->
        <action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>

And inside of your template, you need:

<?php // and to echo the whole stuff later in the template, you need to add the code, so the added js/Css files are echoed ?>
<?php echo $this->getCssJsHtml() ?>
<?php echo $this->getChildHtml() ?>
  • thanks for the response @fabian blechschmidt. I added something like this but no luck and exception too. <default> <reference name="before_body_end"> <action method="addItem"><type>skin_js</type><name>js/test.js</name><params/></action> </reference> </default> – Mark Feb 28 '14 at 11:22
  • updated the answer, you need a block! – Fabian Blechschmidt Feb 28 '14 at 12:45
  • you're the MAN!!!Kudos..Thanks a ton for the answer..But I ll be glad if you explain me a bit about the code as well for a better understanding.. – Mark Feb 28 '14 at 13:00
  • Added a few comments. If you have more questions, please ask them - concrete questions :-) – Fabian Blechschmidt Feb 28 '14 at 13:04
  • 1
    the correct name of the block is: <reference name="before_body_end"> and not <reference name="before_body_ends"> – Tomas Dermisek Jun 17 '14 at 1:03

Header and footer part is rendering by Page module in magento. In order to see header and footer templates, go to

app / design / frontend/ <your_package> /<your_theme> /template / page / html / footer.phtml

Take a look on other files in page folder also. There you can see header.phtml which render header section of each page.head.phtml use to add js and css files which are applicable for every pages in magento.

Also see files in page folder. Those files will render for each page according to the layout specification of a particular page.

Make a serious study on this module. It will help you a lot.


You can add your css and js through page.xml. I think it will solve your problem. Go to

app / design / frontend/ <your_package> /<your_theme> / layout / page.xml

and add this code snippet in its defeault handle.(You can see lot of js and css file added in this handle. Just add this code below those codes)

 //this will add your js
 <action method="addItem">
 //this will add your css file
 <action method="addItem">

That's it. Now make sure your custom js and css file are in the location

  skin/frontend/<your_package> /<your_theme>/js/yourjsfile.js
  skin/frontend/<your_package> /<your_theme>/css/yourcssfile.css

Good luck for your work.

  • I do not work with page.xml. In my local.xml, I have to include using xml method. Your edited post only suggests how can I add a JS/CSS in xml files(which is not the question). – Mark Feb 28 '14 at 11:48
  • @Mark: in your qn, there is no hint for using local.xml file for your work. Your qn demands that you need to add js and css to footer. My updation will do that job perfectly. Any way why do you need local.xml file for this purpose? – Rajeev K Tomy Feb 28 '14 at 11:53
  • Being a Mage developer who maintains standards, why would anyone use page.xml ? Your code <action method="addItem"> <type>skin_js</type> <name>js/yourjsfile.js</name> </action> will add JS in <head> and not in footer!!! – Mark Feb 28 '14 at 11:58

Use XML for it. To add Js in the footer call the footer reference. The code will look something like this

<reference name="footer">
   <action method="addJs"><script>js/file.js</script></action>

To add JS in skin folder you can use following code

    <reference name="footer">
    <action method="addItem"><type>skin_js</type><name>js/test.js</name></action>

To add css you can use following xml code

<reference name="footer">
    <action method="addCss"><stylesheet>css/layout.css</stylesheet></action>

or you can also use

<reference name="footer">
<action method="addItem"><type>skin_css</type><name>css/styles.css</name></action>

For javascript, have you considered just using onload or jquery's $(document).ready()?

That would allow you to place your code in the header like the typical setup, but not run it until the content your js is referencing is loaded.

Your js filename.js code would look like:

$(document).ready( function(){
   your custom js here

The code for your layout would look like: (You would obviously need to add the appropriate directories as you have them set up.)

<reference name="head">
   <action method="addItem"><type>js</type><name>js/jquery/jquery.js</name></action>
   <action method="addItem"><type>js</type><name>js/filename.js</name></action>

Yes there is one way but you have to add via code like below add this code at bottom of the 1column.phtml file just before end of <body> tag.

<script src="<?php echo $this->getSkinUrl('js/jquery.noConflict.js') ?>"></script>
  • Bad advice, because you don't want to copy your code into all the templates. – Fabian Blechschmidt Feb 28 '14 at 11:07
  • we can not add js in footer via xml so I use this flow. – Keyul Shah Feb 28 '14 at 11:57
  • 1
    Have a look on my answer. You flow solves the problem, but you have to copy the code in every root template. – Fabian Blechschmidt Feb 28 '14 at 12:45

I highly recommend the mediarox pagespeed module to help you optimise your javascript (and css) and improve google pagespeed insight ranking.

It works by parsing html output by Magento and then performing a cut and paste action on the code to move javascript to the bottom of the html code. The process is fast but is best used in conjunction with a full page cache to cache the html changes.

More information on how this module works and can help you to improve pagespeed rank here:


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.