I am using drupal_add_css() and drupal_add_js() to add CSS and JavaScript files to my Drupal site. I am doing this in a module called control so the function I'm using is called control_preprocess_page(&$vars).
But in my theme nothing is added!
The reason these functions aren't working within the preprocess_page() function is that template_preprocess_page() (which is called first) has already formatted the structured content into variables $scripts and $styles. If you want to add additional js or css at the preprocess level, you need to regenerate those 2 variables, something like this:
function control_preprocess_page(&$vars) {
// Add new CSS.
drupal_add_css('path/to/css/foo.css');
// Rebuild the 'styles variable.
$vars['styles'] = drupal_get_css();
// Add new JS.
drupal_add_js(...);
$vars['scripts'] = drupal_get_js();
}
Using drupal_add_js/drupal_add_css in hook_init, or a more precisely targeted function (eg, an alter hook, or nodeapi hook, if applicable), will avoid having to regenerate those variables.
At the point your CSS/JS is needed, you can call it with drupal_add_css/js. You can also use it in the hook_init(), if your module is used on every page.
Some pointers that might help:
1) Place your CSS/JS script in your theme folder. 2) In your node.tpl.php file use the following:
<?php drupal_add_js(drupal_get_path('theme', 'INSERT_NAME_OF_THEME') . '/INSERT_NAME_OF_CSS_FILE.css'); ?>
3) If you place your CSS in a sub folder, you will need the following code:
4) Refresh the cache at yousite.com/admin/settings/performance
5) Sometimes I find that I have to disable the theme at admin/build/themes and the re-enable it.
