How To Add Custom CSS and JS in Magento

Earlier, I posted a solution to add custom CSS and JS in Magento 2.

The below post offers the same solution for Magento 1 store owners.

One can use the below code to add custom CSS and JS in Magento store in order to customize a custom theme or a page.

I’d recommend bookmarking this post for the next time you face a crazy client requirement! 

Method to add custom CSS and JS in Magento:

Create app/design/frontend/base/default/layout/extension.xml:

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

That’s it.

Feel free to share the solution with fellow Magento developers via social media.

Thank you.

Also Read:

• How to Enable Merge CSS, Javascript in Magento 2