Daily Archives: June 29, 2013

How to Include Custom CSS and JS files On Home Pages only in Magento?

Hello friends today I write an article on How to Include Custom CSS and JS files On Home Pages only in Magento?

In magento it’s very easy to add our custom CSS and JS file. You didn’t add the tag for CSS and JS file to add in all pages rather than you have to just add that thing in your .xml file as I show below.

Step 1 : First find that  in your custom theme’s layout folder the cms.xml file exists or not. If cms.xml file is not created in your custom theme layout folder then just copy from the base folder and paste into that.

Step 2 : Now you pasted cms.xml file , then look for below code in cms.xml file.

    <cms_index_index translate="label">
        <label>CMS Home Page</label>
    </cms_index_index>

Step 3 : Now we add the CSS file from the skin CSS folder.

<cms_index_index translate="label">
<label>CMS Home Page</label>
         <reference name="head">
              <action method="addCss">
                 <stylesheet>
                           css/custom.css /*This is ur css path*/
                 </stylesheet>
              </action>
         </reference>
</cms_index_index>

Now we try to add JavaScript file from the skin JS folder.

<cms_index_index translate="label">
     <label>CMS Home Page</label>
         <reference name="head">
             <action method="addItem">
                   <type>skin_js</type>
                   <name>js/customJs.js</name>
              </action>
         </reference>
</cms_index_index>

Now we try to add JavaScript file from the /js folder.

<cms_index_index translate="label">
     <label>CMS Home Page</label>
         <reference name="head">
             <action method="addJs">
                   <script>myJs.js</script>
              </action>
         </reference>
     </catalog_product_view>
</cms_index_index>

Thanks for view this article.

Advertisements