How to Add/Remove CSS and JS Files in Magento Theme

In Magento, we can add/remove our custom CSS and JS files very easily. In this post, I will show you how to add/remove CSS and JS files in your magento theme.

We can add the CSS and JS files in the following two ways,

  • Add/Remove CSS and JS files through layout xml file
  • Add/Remove CSS and JS files through block file

Add/Remove CSS and JS files through layout xml file

Here is the example code that will help you to add/remove CSS and JS files from the skin folder.

<reference name="head">
    <!-- Include CSS File -->
    <action method="addItem">
        <type>skin_css</type>
        <name>css/styles.css</name>
    </action>
 
    <!-- Include JS File -->
    <action method="addItem">
        <type>skin_js</type>
        <name>js/bundle.js</name>
    </action>
 
    <!-- Remove CSS File -->
    <action method="removeItem">
        <type>skin_css</type>
        <name>css/print.css</name>
    </action>
 
    <!-- Remove JS File -->
    <action method="removeItem">
        <type>skin_js</type>
        <name>js/custom_script.js</name>
    </action>
</reference>

CSS files are located in <Magento Root>/skin/frontend/default/your_theme/css folder.

JS files are located in <Magento Root>/skin/frontend/default/your_theme/js folder.

Using the below code we can include CSS and JS files from the <Magento root directory>/js folder.

<reference name="head">
    <!-- Include JS File -->
    <action method="addJs">
        <script>mage/adminhtml/custom-sales.js</script>
    </action>
 
    <!-- Another Method to Include JS File -->
    <action method="addItem">
        <type>js</type>
        <name>mage/adminhtml/custom-scripts.js</name>
    </action>
 
    <!-- Include CSS File -->
    <action method="addItem">
        <type>js_css</type>
        <name>calendar/calendar-win2k-1.css</name>
    </action>
 
    <!-- Remove JS File -->
    <action method="removeItem">
        <type>js</type>
        <name>mage/adminhtml/sales.js</name>
    </action>
 
    <!-- Remove CSS File -->
    <action method="removeItem">
        <type>js_css</type>
        <name>calendar/calendar-win2k-2.css</name>
    </action>
</reference>

Note:

  • If you want to add CSS and JS files to every page, edit the code in the page.xml file which located in your layout folder (<Magento Root>/app/design/frontend/default/your_theme/layout/page.xml).
  • If you want to add CSS and JS files to any specific page, edit the appropriate layout xml file. For instance, if you want to add the CSS and JS files to product page, then edit the code in catalog.xml file and add/remove the CSS & JS file.

Add/Remove CSS and JS files through block file

We can add the CSS and JS files through our custom block files as well. For that, use the below code,

protected function _prepareLayout() {
    if ($head = $this->getLayout()->getBlock('head')) {
        $head->addItem('js', 'prototype/window.js')
            ->addItem('js_css', 'prototype/windows/themes/default.css')
            ->addItem('skin_js', 'js/custom_script.js')
            ->addItem('skin_css', 'css/print.css');
    }
    return parent::_prepareLayout();
}

In the above example, the function addItem() is defined in Mage_Page_Block_Html_Head class which located in <Magento Root>/app/code/core/Mage/Page/Block/Html/Head.php file.

In Mage_Page_Block_Html_Head class, you can find the below functions as well,

  • addCss
  • addJs
  • addCssIe
  • addJsIe
  • addItem
  • removeItem

Hope this helps.

Leave a Reply

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