10

I am modifying a Magento theme. And want to add a js file into the theme /js folder. I have added the following code:

<action method="addItem"><type>skin_js</type><name>js/custom-script.js</name></action>

into the /app/design/frontend/theme-name/default/layout/page.xml and published the js file into /skin/frontend/theme-name/default/js/. But no luck. It is not showing on the page.

9 Answers 9

14

Try adding the following to your layout .xml file within <reference name="head">

<action method="addJs">
    <script>js/custom-script.js</script>
</action>
Sign up to request clarification or add additional context in comments.

4 Comments

Would you please tell us Where to add it ? Which file to open for it. Where to write it ? Do we need to create new file or existing file need to edit? What name to give to this file ?
You can add to your "layout.xml" file within "reference name='head'"
Please edit the question and answer the questions I raised , as the answer will be used by many newbies.Thanks
I removed the 'js/' part, because it seems my magento (1.9) installation gave a 404 when adding this.
10

If you want to include javascript inthemethen put this code inyour module's layout.xmlunderdefault` tag.

<layout>  
 <default>
    <reference name="head">
        <action method="addJs">
            <script>custom-script.js</script>
        </action>
    </reference>
</default>
</layout>

If you want to include javascript for any particular controller then put this code in your module's layout.xml like below

<layout>  
<yourpackage_yourmodule_yourcontroller_action translate="label" module="yourpackage_yourmodule">       
    <reference name="head">
        <action method="addJs">
            <script>custom-script.js</script>
        </action>
    </reference>
</yourpackage_yourmodule_yourcontroller_action>
</layout>

And put custom-script.js file under yourMagentoDirectory/js folder.

3 Comments

Not trying to point out the mistakes, but people may get confused as you say to include css when I believe what you mean is include js which is what the questions about :) Great answer though. Helped me a lot!
Where to put the layout.xml file?
Put it app/design/frontend/[package]/[theme]/layout. For more help go with this magebase.com/magento-tutorials/…
4

Add this code in,

app/design/frontend/{your_theme}/default/template/page/html/header.phtml

<script type="text/javascript" src="<?php echo $this->getSkinUrl(); ?>js/custom-script.js"></script>

And put custom-script.js file in js folder on root.

FYI : Like this you can add any js/css file on phtml files

2 Comments

Would you please tell us Where to add it ? Which file to open for it. Where to write it ? Do we need to create new file or existing file need to edit? What name to give to this file ?
@jQuery.PHP.Magento.com Look at this app/design/frontend/{your_theme}/default/template/page/html/header.phtml . Edit this file
4

You can add your custom JS file in your theme's local.xml, located in: /app/design/frontend/{design package}/{theme}/layout/local.xml

 <?xml version="1.0"?>
 <layout version="0.1.0">
    <default>
       <reference name="head">
          <action method="addItem"><type>skin_js</type><name>js/script_name.js</name></action>
       </reference>
    </default>
 </layout>

Comments

3

Please try this, i think this is the way to add our js/css files into the load.xml:

<layout>
  <default>
    <reference name="head">
        <action method="addItem">
            <type>skin_js</type>
            <name>js/jquery-1.11.0.min.js</name>
        </action>
    </reference>
  </default>
</layout>

1 Comment

Works on both js and css
1

I believe if you change:

<action method="addItem"><type>skin_js</type><name>js/custom-script.js</name></action>

to

<action method="addItem"><type>skin_js</type><name>skin/frontend/{Theme Package Name}/{Theme Name}/js/custom-script.js</name></action>

that should allow you to access theme specific javascript file.

Comments

0

try with this code:

    <default>
        <reference name="head">
            <action method="addJs"><script>js/jquery/jquery-1.7.2.min.js</script></action>
        </reference>
    </default>

Comments

0

Best solution insert into local.xml file with reference name="head"

<action method="addJs">
    <script>js/custom.js</script>
</action>

Comments

-2

If you want to implement custom code (a .js file), please follow these steps:

  • From the Admin panel, go to Design > Themes Editor.

  • Click Customize under the theme you wish to add custom script to.

  • Click Java Script Editor in the left panel to manage JavaScript assets.

  • Click Browse Files, select the JavaScript file from your local drive, and then click Upload Files.

1 Comment

Where is the "Themes Editor"? I can not locate the link.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.