2

I want to add Javascript in Head Tag. I found an answer in How to add script to <head>? but it doesn't work for a theme.

function mytheme_preprocess_page(&$vars, $hook) {
  drupal_set_html_head('<script type="text/javascript" src="http://use.typekit.com/12345.js"></script>');
  $vars['head'] .= drupal_get_html_head();
}

Can I add JavaScript code in the <head> tag through page.tpl.php?

1

5 Answers 5

5

Here's the link to the full document on module developing aspect which I assume is not your main goal, there are some ways that you wanna skip for now, my suggestion is depending on the theme you are using, is to do it via .info file. the easiest and common way.

This link is a very good guide for adding js files to omega subtheme, you may find it useful.

The .info file approach:

first open your theme's .info file that it should be something like YOURTHEMENAME.info

if you are using a subtheme there must be already some js files in there, you can find them and use them as an example.

what you wanna do is to add your js file like this:

scripts[] = somescript.js

this way the js file will be added to head of your website, remember after each time of editing a .info file you need to clear cache.

Adding External js to your site:

In your theme's template.php file use drupal_add_js() to the page preprocess method (or an equivalent preprocess).

function hook_preprocess_page(&$vars) {
  drupal_add_js('http://cdn.jquerytools.org/1.2.6/jquery.tools.min.js', 'external');
}

Edit: also with the extra info you just provided regarding using functions in the header you need to make a custom tpl file, locate the file that has <head> tag in your theme, it most likely be html.tpl.php (depends on the base theme you are using) if you couldnt find it you can copy it from modules/system/html.tpl.php and paste it into your theme's folder. edit the name of your file as this: html--node--id.tpl.php like html--node--1.tpl.php and clear cache afterwards. edit the file as you wish and you must be good to go.

6
  • It appears to me OP needs external js, so the info file is of no use. But maybe that's only my impression based on the question he linked to in his own?
    – Mołot
    Oct 29, 2013 at 8:25
  • yea I actually just noticed the link, anyhow I edited the answer and added the external js thing too.
    – Sohail
    Oct 29, 2013 at 8:46
  • It is adding path link, as below <script type="text/javascript" src="example.com/js/customjs.js?mvfdgf"></script> but I want to add script as below in head tag <script type="text/javascript"> // some content </script>
    – J Sinha
    Oct 29, 2013 at 10:28
  • do you want it to be on a specific page or all of your pages‌?
    – Sohail
    Oct 29, 2013 at 10:57
  • I need only for specific page.
    – J Sinha
    Oct 29, 2013 at 11:01
2

The drupal_add_js function takes an $options argument.

This is an array that may have a value for key scope as header that would place the JS file specified in the header part of your template.

drupal_add_js('path/to.js', array('scope'=>'header'));

Another way if you are working in a module :

Add this in your module's .info

scripts[] = somescript.js

4
  • drupal_add_js is deprecated in favor of using the #attached key in render arrays.
    – mpdonadio
    Nov 5, 2015 at 16:32
  • really ? I can't see that anywhere on the API documentation... weird, I would still use it as far as D7 is concerned
    – kartsims
    Nov 5, 2015 at 21:24
  • I read that link you posted in a comment on the other answer and it only concerns D8 so drupal_add_js still looks like a viable solution for @jdln 's issue
    – kartsims
    Nov 5, 2015 at 21:26
  • Yes, it will work in D7. However, there is an active push to try to get people to stop using these functions for new code as it will make the D8 transition harder. For example, we try to mention whenever we see it during the project application review process.
    – mpdonadio
    Nov 5, 2015 at 22:54
2

You can add something like this on your page. Use path and argument to identify the correct page. Or you can add it in hook_init but in that case it will display on all pages which is not recommended.

drupal_add_js('jQuery(document).ready(function () { alert("Hello!"); });',
    array('type' => 'inline', 'scope' => 'header', 'weight' => 5)
  );

Alternatively you can use drupal_add_html_head like the following

 $inline_script = <<<EOL
      <script src="my_src" type="javascript"></script>
      <script src="my_src" type="javascript"></script></script>
EOL;
    $element = array(
      '#type' => 'markup',
      '#markup' => $inline_script,
    );
    drupal_add_html_head($element, 'jquery-tmpl');
2
  • drupal_add_js is deprecated in favor of using the #attached key in render arrays.
    – mpdonadio
    Nov 5, 2015 at 16:33
  • Finally found your sample how to add custom markup like JSON-LD snippets as in schema.org microdata to the head! Thanks a lot!
    – leymannx
    Jul 26, 2016 at 8:25
2

You can add javascript to head by using theme_preprocess_html()

function theme_preprocess_html(&$var) {
  $script = array(
    '#tag' => 'script',
    '#attributes' => array('type' => 'text/javascript'),
    '#value' => 'Add your javascript here',
   );
   drupal_add_html_head($script, 'script');  
}
0

Sure thing! drupal_add_js is your friend here. Documentation for Drupal 7 is here: https://api.drupal.org/api/drupal/includes!common.inc/function/drupal_add_js/7

Basically, with drupal_add_js you get to select where the JS gets added, from a set of predefined options, which consist of 'header', 'footer', and your regions. So your function call, assuming this is a file in your module/theme, would look something like this:

drupal_add_js($path_to_js_file, array('scope' => 'header'));

There's a bunch more options you can use, like type to define the sort of JS you're adding (inline, external, etc) and weight to define the weight of the JS file relative to other JS files. There's more about that on the page linked in the first paragraph.

As for where this goes, I usually put mine in a hook_init function if it's part of a module, or in my hook_preprocess_html function if it's part of my theme.

There's also the option, if you have an html.tpl.php file that you can edit, of directly adding the JS to there. I'm not sure that that's the preferred method, though, and you can't sort where it lands in the list of other JS; it has to either be before the other JS is printed to the page or after it. Overall, not ideal.

5
  • drupal_add_js is deprecated in favor of using the #attached key in render arrays.
    – mpdonadio
    Nov 5, 2015 at 16:33
  • I thought it was only deprecated in D8? Nov 5, 2015 at 16:34
  • It was deprecated for D7 a couple of years ago @Erin (but not removed, for BC reasons)
    – Clive
    Nov 5, 2015 at 17:01
  • @ErinMcLaughlin Yeah, deprecated in D7 and gone in D8, drupal.org/node/2169605
    – mpdonadio
    Nov 5, 2015 at 18:03
  • Daaang I am behind the times apparently. Can someone post an answer on how you would do this the proper way with a render array from both a module and a theme? I still can't quite wrap my head around render arrays. Nov 5, 2015 at 19:25

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.