How to add js, css files in a certain order in your head block?

Magento by default is not allowing you to do that, in order to be able to add files in a specific order (css or javascript in header) you have to customize the core.

Create a custom module, where you rewrite the page/html_head block:

 
<config>
    <modules>
        <Koncz_Utility>
            <version>1.0.0</version>
        </Koncz_Utility>
    </modules>
    <global>
        <blocks>
            <class>Koncz_Utility_Block</class>
            <page>
                <rewrite>
                    <html_head>Koncz_Utility_Block_Page_Html_Head</html_head>
                </rewrite>
            </page>          
        </blocks>
    </global>
</config>

and add 2 custom functions: addItemFirst and addItemAfter

 
class Koncz_Utility_Block_Page_Html_Head extends Mage_Page_Block_Html_Head {

/** Adds a head element into the first position, usage same as for addItem **/
public function addItemFirst($type, $name, $params = null, $if = null, $cond = null) {
    if ($type === 'skin_css' && empty($params)) {
        $params = 'media="all"';
    }

    $firstElement = array();
    $firstElement[$type . '/' . $name] = array(
        'type' => $type,
        'name' => $name,
        'params' => $params,
        'if' => $if,
        'cond' => $cond,
    );

    $this->_data['items'] = array_merge($firstElement, $this->_data['items']);

    return $this;
}

/*
* Adds a custom css, or js file after the $type, if it was found! $type=js/jquery/jquery.js  <= or skin_js/path 
*/
public function addItemAfter($after, $type, $name, $params = null, $if = null, $cond = null) {
    if ($type === 'skin_css' && empty($params)) {
        $params = 'media="all"';
    }

    $firstElement = array();
    $firstElement[$type . '/' . $name] = array(
        'type' => $type,
        'name' => $name,
        'params' => $params,
        'if' => $if,
        'cond' => $cond,
    );

    if (array_key_exists($after, $this->_data['items'])) :
        // get the position 
        $pos = 1;
        foreach ($this->_data['items'] as $key => $options) :
            if ($key == $after) :
                break;
            endif;
            $pos +=1;
        endforeach;

        array_splice($this->_data['items'], $pos, 0, $firstElement);

    endif;


    return $this;
}
}

After this in your local.xml you can use the following: (This will add jquery.js in the first position and jquery.no-conflict.js after jquery in 2nd position). {{ Also it worth mentioning that your skin_js files will be added after js types! }} So use js and not skin_js for the base js files.

 
<layout version="0.1.0">
    <default>        
        <update handle="add_jquery_elegant_way" />
    </default>
    <add_jquery_elegant_way>
        <reference name="head">
            <action method="addItemFirst"><type>js</type><script>jquery/jquery.js</script></action>
            <action method="addItemAfter">
                <after>js/jquery/jquery.js</after>
                <type>js</type>
                <script>jquery/jquery.no-conflict.js</script>
            </action>
        </reference>
    </add_jquery_elegant_way>
</layout>

Have fun coding ;)