Adding <script> to WordPress in <head> element
In your theme's functions.php:
function my_custom_js() { echo '<script type="text/javascript" src="myscript.js"></script>';}// Add hook for admin <head></head>add_action( 'admin_head', 'my_custom_js' );// Add hook for front-end <head></head>add_action( 'wp_head', 'my_custom_js' );
For anyone else who comes here looking, I'm afraid I'm with @usama sulaiman here.
Using the enqueue function provides a safe way to load style sheets and scripts according to the script dependencies and is WordPress' recommended method of achieving what the original poster was trying to achieve. Just think of all the plugins trying to load their own copy of jQuery for instance; you better hope they're using enqueue :D.
Also, wherever possible create a plugin; as adding custom code to your functions file can be pita if you don't have a back-up and you upgrade your theme and overwrite your functions file in the process.
Having a plugin handle this and other custom functions also means you can switch them off if you think their code is clashing with some other plugin or functionality.
Something along the following in a plugin file is what you are looking for:
<?php/*Plugin Name: Your plugin nameDescription: Your descriptionVersion: 1.0Author: Your nameAuthor URI: Plugin URI: */function $yourJS() { wp_enqueue_script( 'custom_script', plugins_url( '/js/your-script.js', __FILE__ ), array( 'jquery' ) );} add_action( 'wp_enqueue_scripts', '$yourJS' ); add_action( 'wp_enqueue_scripts', 'prefix_add_my_stylesheet' ); function prefix_add_my_stylesheet() { wp_register_style( 'prefix-style', plugins_url( '/css/your-stylesheet.css', __FILE__ ) ); wp_enqueue_style( 'prefix-style' ); }?>Structure your folders as follows:
Plugin Folder |_ css folder |_ js folder |_ plugin.php ...contains the above code - modified of course ;DThen zip it up and upload it to your WordPress installation using your add plugins interface, activate it and Bob's your uncle.
Elaborating on the previous answer, you can gather all the required snippets before outputting the header, and only then use an action hook to inject all you need on the head.
In your functions.php file, add
$inject_required_scripts = array();/** * Call this function before calling get_header() to request custom js code to be injected on head. * * @param code the javascript code to be injected. */function require_script($code) { global $inject_required_scripts; $inject_required_scripts[] = $code; // store code snippet for later injection}function inject_required_scripts() { global $inject_required_scripts; foreach($inject_required_scripts as $script) // inject all code snippets, if any echo '<script type="text/javascript">'.$script.'</script>';}add_action('wp_head', 'inject_required_scripts');And then in your page or template, use it like
<?php/* Template Name: coolstuff */require_script(<<<JS jQuery(function(){jQuery('div').wrap('<blink/>')});JS);require_script(<<<JS jQuery(function(){jQuery('p,span,a').html('Internet is cool')});JS);get_header();[...]I made it for javascript because it's the most common use, but it can be easily adapted to any tag in the head, and either with inline code or by passing a href/src to an external URL.