After inserting jquery weather code, my responsive menu is lost

Question

Site with issues - http://rheareview.com

I have a community news website built on wordpress (multisite). The task was to place a weather feed including current temp including nice weather condition icon.

I thought I found a solution with zweatherfeed http://www.zazar.net/developers/jquery/zweatherfeed/. I found after inserting the jquery weather... my menu doesn't display once it reaches the first responsive breakpoint which is browser width 768px.

I know it is the weatherfeed giving me issues. When I remove the feed from my header.php it works correctly. BTW, I have called the 'jquery.min.js' and 'jquery.zweatherfeed.min.js' from my header.php. Thanks in advance for any help.

Seamus...

I add the following to the bottom of my functions.php :

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

wp_enqueue_script( 'zweatherfeed');
}

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

function newsplus_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', 'newsplus_add_script_config', 20 );

It is now calling the zweather script, but it's not showing. I am actually using a child theme of the newsplus theme names 'newsplus-child'. Should I be using the functions.php in the child theme directory? It is currently empty.

Answer 1

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');
}