0

Please assist, I am trying to load this Jquery on my Wordpress website with no luck.

I have used this script just BEFORE the </body> tag in my functions.php :

<script type="text/javascript"
   src="<?php bloginfo("template_url"); ?>/js/menu-hover.js"></script>

I have used this code in the of my functions.php file:

<?php
if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
   wp_deregister_script('jquery');
   wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/js/jquery.min.js", false, null);
   wp_enqueue_script('jquery');
}
?>

This is my Jquery/Javascript code:

jQuery( "#panel-2-1-0-0" ).hover( //Print and Document
    function() {
        jQuery('#mega-menu-item-475').addClass('mega-toggle-on');
    }, function() {
        jQuery('#mega-menu-item-475').removeClass('mega-toggle-on');
    }
);

jQuery( "#panel-2-1-1-0" ).hover( //Telecom
    function() {
        jQuery('#mega-menu-item-477').addClass('mega-toggle-on');
    }, function() {
        jQuery('#mega-menu-item-477').removeClass('mega-toggle-on');
    }
);

jQuery( "#panel-2-1-0-1" ).hover( //IT Dev
    function() {
        jQuery('#mega-menu-item-476').addClass('mega-toggle-on');
    }, function() {
        jQuery('#mega-menu-item-476').removeClass('mega-toggle-on');
    }
);

jQuery( "#panel-2-1-1-1" ).hover( // Safety and Security
    function() {
        jQuery('#mega-menu-item-478').addClass('mega-toggle-on');
    }, function() {
        jQuery('#mega-menu-item-478').removeClass('mega-toggle-on');
    }
);
Improve this question
5
  • 1. Why are you loading another version of jQuery? The standard one should be able to do .addClass and .removeClass just fine. 2. Why are you trying to load the script via <script> tags and not wp_enqueue_script with a dependancy set?
    – kero
    Oct 19, 2017 at 7:17
  • Hi Kero, Im not sure if you can see the coding properly. I have tried using this code in my <head> as well :
    – Bradley
    Oct 19, 2017 at 7:19
  • add_action( 'wp_enqueue_scripts', 'add_my_script' ); function add_my_script() { wp_enqueue_script( 'your_script_name', // your script unique name get_template_directory_uri().'/js/your-script.js', //script file location array('jquery') //lists the scripts upon which your script depends ); }
    – Bradley
    Oct 19, 2017 at 7:19
  • I have tried the en queue function with no luck
    – Bradley
    Oct 19, 2017 at 7:23
  • function file is the best choice for enqueuing styles and scripts. however if you willing to add javascript/jquery inside the head tag use as <script type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/menu-hover.js"></script>. if you are going to include using function file, @Bradley way is right.
    – user2584538
    Oct 19, 2017 at 9:40

2 Answers 2

Reset to default
1
  1. Don't enqueue your own version of jQuery. You're just going to cause conflict issues with other plugins and there's nothing in your script that requires a different version.
  2. Even if you were, just load the https:// version, there's no reason to bother checking what your own server is doing.
  3. Don't bother checking !is_admin() on your enqueue function, wp_enqueue_scripts doesn't even run in admin.
  4. Don't add script tags in templates, use wp_enqueue_script().
  5. The proper way, these days, to get the URL to a theme file is get_theme_file_uri().
  6. When you say "I have used this script just BEFORE the </body> tag in my functions.php :", you don't actually mean your </body> tag is in functions.php do you?

Put all together, your code should just be this, in your functions.php file:

function wpse_283386_enqueue_scripts() {
    wp_enqueue_script( 'menu-hover', get_theme_file_uri( 'js/menu-hover.js' ), array( 'jquery' ), '', true );
}
add_action( 'wp_enqueue_scripts', 'wpse_283386_enqueue_scripts' );

The only reasons it wouldn't work after this are:

  1. The IDs you're targeting in your script don't exist.
  2. The classes you're adding and removing don't do anything in your CSS.
  3. /wp-content/themes/{your theme}/js/menu-hover.js doesn't exist.
Improve this answer
0

This is the code I am using in the themes functions.php, exactly as advised:

enter image description here

This is the path where menu-hover.js exists:

enter image description here

Improve this answer

Your Answer

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

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