After inserting jquery weather code, my responsive menu is lost

Question

The reason the menu breaks is because the responsive menus are handled with a jQuery plugin. You are wiping out the jQuery object and all the jQuery plugins (which includes the responsive menu) when you include the zweatherfeed Javascript by including a second version of jQuery. The second version overwrites the first version.

WordPress has a feature to handle the including the various Javascript files which means you don’t need to include them in your header.php. WordPress allows you to register Javascript files (wp_register_script()) with various settings such as version number, include in the head or footer, and which Javascript files to include before it as they are dependent upon it.. The other feature (wp_enqueue_script()) is to tell WordPress to print the script element to include the Javascript file.

In your theme’s functions.php file, you are going to add a function to add the zweatherfeed Javascript. Then you are going to tell WordPress to call your function during the wp_enqueue_scripts hook; this makes sure it gets called at the correct time.

function theme_name_add_scripts() {
    // Register the zweatherfeed script
    wp_register_script(
        'zweatherfeed', // The name for the script 
        'http://rheareview.com/weather/jquery.zweatherfeed.min.js', // The URL for the script
        array( 'jquery' ), // The scripts this script needs loaded before it
        '1.0.1', // Version number
        false // False will include it in the head, true will include it at the end
  );
    // Tell WordPress to include the zweatherfeed
    wp_enqueue_script( 'zweatherfeed');
}

// Call our function for the 'wp_enqueue_scripts' hook
add_action( 'wp_enqueue_scripts', 'theme_name_add_scripts' );

Another thing you’ll noticed is you don’t have to register jQuery because jQuery is included by default with WordPress. But we still had to tell WordPress to include jQuery before the zweatherfeed script.

Your zweatherfeed also has a script element with some configuration. WordPress does not have a specific way to handle your case (there is a feature for a configuration object), but we can make it work all the same. The Javascript files in the head are printed out during the wp_head(). You will use the wp_head hook to print out your config Javascript code.

function theme_name_add_script_config() {
    if ( wp_script_is('zweatherfeed') ) { // check that the zweatherfeed script is printed
        echo "<script> jQuery('#test').weatherfeed(['USTN0132']);</script>";
    }
}
add_action( 'wp_head', 'theme_name_add_script_config', 20 );

Now that being done, usually this is something I would place in a Javascript file in the theme. I will have a Javascript file that does the various hooking up of the various plugins and services.

As an additional note, if you place the Javascript file in your theme, you’ll need to use the get_template_directory_uri() to get the URL to your theme folder.

function theme_name_add_scripts() {
    // Register the zweatherfeed script
    wp_register_script(
        'zweatherfeed', // The name for the script 
        get_template_directory_uri() . '/js/jquery.zweatherfeed.min.js', // Here
        array( 'jquery' ),
        '1.0.1', 
        false
  );

    wp_enqueue_script( 'zweatherfeed');
}

Related Posts: