Answer by cfx for Adding jQuery to Magento

My preferred (and the most flexible way) to do this is through XML using local.xml, two separate Javascript files, and a new file we will create. The first Javascript file is jQuery itself--completely unmodified. The second file I call no-conflict.js and it contains only one line:

jQuery.noConflict();

Now we add both of these files, along with a new block, to the head section of our local.xml:

    <reference name="head">
        <block type="page/html_head" name="topScripts" template="page/html/top_scripts.phtml" before="head">
            <action method="addItem">
                <type>skin_js</type>
                <name>js/jquery-1.7.2.min.js</name>
            </action>
            <action method="addItem">
                <type>skin_js</type>
                <name>js/no-conflict.js</name>
            </action>
        </block>
    </reference>

no-conflict.js is necessary to allow jQuery to work alongside Prototype, the Javascript framework included in Magento by default. Keeping jQuery and a no-conflict file separated allows you to upgrade or downgrade jQuery as needed without the need to edit the jQuery file itself to include the noConflict() method.

In our XML we created a new block (topScripts) with the template file set to top_scripts.phtml.

Navigate to /app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/ and create this new file. It will contain one line:

<?php echo $this->getCssJsHtml(); ?>

Now edit /app/design/frontend/PACKAGE_NAME/TEMPLATE_NAME/template/page/html/head.phtml.

Find the line <?php echo $this->getCssJsHtml() ?> in your head.phtml and add this line directly above it:

<?php echo $this->getChildHtml('topScripts') ?>

You have now correctly added jQuery before any other Magento Javascript.