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

Leave your comments

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s