Register and load scripts

In my functions.php

    function load_scripts() 
        {
 wp_enqueue_script( 'jquery' );
wp_register_script( 'modernizr', get_template_directory_uri() .'/js/modernizr.foundation.js' );
wp_enqueue_script( 'modernizr' );
wp_register_script( 'jquery.simpleWeather', get_template_directory_uri() .'/js/jquery.simpleWeather.js', array( 'jquery'));
wp_enqueue_script( 'jquery.simpleWeather' );
        }
        add_action( 'wp_enqueue_scripts', 'load_scripts ');

I try to register and load scripts to my wp theme. For jquery.simpleWeather.js i have a part of code that load in the header.php

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>

<script type="text/javascript">
$.simpleWeather({
zipcode: '',
woeid: '',
location: '',
unit: 'f',
success: function(weather) {
html = '<span>'+weather.city+', '+weather.region+'</span>';
html += '<img style="float:left;" width="125px" src="'+weather.image+'">';
html += '<p>'+weather.temp+'&deg; '+weather.units.temp+'<br /></p>';
$(".weather").html(html);
},
error: function(error) {
$(".weather").html('<p>'+error+'</p>');
}
}); 
</script>

Also i edit the code :

<script type="text/javascript">
 jQuery(document).ready(function($) {
$.simpleWeather({    
zipcode: '',    
woeid: '',   
location: '',   
unit: 'f',   
success: function(weather) {
html = '<span>'+weather.city+', '+weather.region+'</span>';
html += '<img style="float:left;" width="125px" src="'+weather.image+'">';
html += '<p>'+weather.temp+'&deg; '+weather.units.temp+'<br /></p>';
$(".weather").html(html);    
},
error: function(error) {    
$(".weather").html('<p>'+error+'</p>');
} 
});    
</script>

But the scripts didn’t register and load. Any idea?

Thanks.

Solutions Collecting From Web of "Register and load scripts"

You don’t need if ( !is_admin() ). wp_enqueue_scripts only runs on the front end.

WordPress loads jQuery in “No Conflict” mode. The $ alias does not work. Use jQuery or wrap your script is a function as demonstrated in the jQuery docs:

jQuery.noConflict();
(function($){
  $(function() { 
   // more code using $ as alias to jQuery
  });
})(jQuery);

You claim that your script loads after jQuery but I don’t see that it loads at all, and certainly not after jQuery.

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js"></script>
<!-- missing jquery.simpleWeather.js -->
<script type="text/javascript">
$.simpleWeather({

Your jquery.simpleWeather.js has to load at the line marked in the code or your attempt to use it in the following line will fail, but there is no sign of that script. If it has loaded, it loaded before jQuery, which will also fail since it is a jQuery plugin and is dependent upon jQuery.

Also, I get an ‘invalid callback’ error with your code. I don’t know why. It looks fine. Possibly there is some oddball character in the code somewhere. I had to completely rewrite the function to get it working. If you can’t get this working copy the following code.

function load_my_scripts() {
  wp_enqueue_script( 'jquery' );
  wp_register_script( 'modernizr', get_template_directory_uri() .'/js/modernizr.foundation.js' );
  wp_enqueue_script( 'modernizr' );
  wp_register_script( 'jquery.simpleWeather', get_template_directory_uri() .'/js/jquery.simpleWeather.js', array( 'jquery'));
  wp_enqueue_script( 'jquery.simpleWeather' );
}
add_action('wp_enqueue_scripts','load_my_scripts');

Somewhat off-topic but what software are you using to edit this code?

header.php

….

<?php wp_enqueue_script('jquery'); ?> 
.....
<script type="text/javascript">
$(document).ready(function() {
$.simpleWeather({
zipcode: '',
woeid: '',
location: '',
unit: '',
success: function(weather) {
html = '<h6>'+weather.city+', '+weather.region+'</h6>';
html += '<img style="float:left;" width="125px" src="'+weather.image+'">';
html += '<p>'+weather.temp+'&deg; '+weather.units.temp+'<br /></p>';
$(".weather").html(html);
},
error: function(error) {
$(".weather").html('<p>'+error+'</p>');
}
}); 
});
</script>

in the functions.php

function load_my_scripts() {
wp_enqueue_script( 'jquery' );
wp_register_script( 'modernizr', get_template_directory_uri() .'/js/modernizr.foundation.js' );
wp_enqueue_script( 'modernizr' );
wp_register_script( 'jquery.simpleWeather', get_template_directory_uri() .'/js/jquery.simpleWeather.js', array( 'jquery'));
wp_enqueue_script( 'jquery.simpleWeather' );}
add_action('wp_enqueue_scripts','load_my_scripts');?>

and works, Thanks for the feedback.