How to store css & js in separate file & call in custom 'tpl' files through variable in drupal 7?

Question

I have created a custom module where I have define my page url's & contents are created through my custom tpl files.

I am applying some css & js on those custom contents/pages/tpl files.

What I want : I don't want to add path of those css & js in all pages. I want to define those css & js in separate file & I want to call that css & js in my custom pages through variable. Simply I want to create a header file which hold my css & js. And I want to call that header file in my custom pages.

Why I want to do this : Right now the path of the css & js is not fixed. So if am I add drupal_add_css() & drupal_add_js() in every tpl file then will change the path in every tpl file. So I want to create a header file where am I put the css & js path & if the path will change then I have to change the path in only header file.

How can I implement this?

Answer 1

If you do not want, or are unable, to modify the theme html or page templates, you can also use drupal_add_css and drupal_add_js in the page_callback function defined in your modules menu array youmodule_menu().

If you have access to the template.php of the theme, you can use the preprocess hook to assign a variable to the file name, then do an include in the html template. Or from within your module use drupal_add_html_head, but this has limitations.

Using drupal_add_(css|js) the links go into the head element of those pages by default before the themeing phase begins, but you can also specify the boostrap phase and location.

EDIT

Using drupal_get_path from within yourmodule_init hook or the page_callback, and with the css and js stored within your module structure, you can then add the css and js using the drupal_add functions. This makes a single place you need to maintain the 'paths' to the files.

Answer 2

Rupesh is right, actually drupal_add_css and drupal_add_js are adding your files to the header of the website.

You don't have to call these in every tpl file, that is what preprocess functions are made for.

You could, for instance, implement a hook function "yourtheme_preprocess_page(&$variables)" (or _preprocess_node, or any other suitable preprocess) in your theme's template.php, then add your js with druapl_add_js.

If you have trouble with theme's preprocess function, my advice is to try the Zen theme which has these functions as commented placeholders.

If needed, you should be able to filter templates names with the preprocess &$variables parameter.

Answer 3

Use drupal_add_css and drupal_add_js function on that desired tpl to add css and js.

You can use CSS Injector and JS injector module. These module also support placement option to define on page or callback.