JQuery not loading in custom theme

CMS & WordPress
1

Hi,
I’ve done a lot or reading to ensure that I am including my JQuery and custom javascript for my custom theme without blowing up other plugins…

The site that I am turning into a wp-theme requires this javascript:


 <script src="http://www.google.com/jsapi?key=ABQIAAAABZGjjDpjmjbzLaNWBpdrWhRYfwzT-VuwidSQZM_JU-MUSrbEShR1efDdxuqpWPsjsfs1V_59FUTrxg" type="text/javascript">
</script> 
 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js">    
 </script> <script type="text/javascript" src="./scripts/cycle/jquery.cycle.all.min.js"></script> 
  <script type="text/javascript" src="./scripts/cycle/aaro_cycle.js"></script> 
 <script type="text/javascript" src="./scripts/cycle/aaro_contest_cycle.js"></script>
 <script type="text/javascript" src="./scripts/jquery.hoverIntent.minified.js"></script> 
  <script type="text/javascript" charset="utf-8" src="./scripts/mega_menu.js"></script>

I started off pretty simple I just wanted to see if I could load the version of jQuery I need plus on jQuery plugin and one custom javascript so after researching it seemed this was the best way?:

<?php
                   function loadCustomScripts(){
                       wp_deregister_script('jquery'); 
                       wp_register_script('jquery', ("http".($_SERVER['SERVER_PORT'] == 443 ? "s" : "")."://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"), false, '1.4.3');
                       wp_enqueue_script('jquery');
                       
                       wp_deregister_script('jquery.cycle.all.min');
                       wp_register_script('jquery.cycle.all.min', ("./scripts/cycle/jquery.cycle.all.min.js"));
                       wp_enqueue_script('jquery.cycle.all.min');
                       
                       wp_deregister_script('mega_menu');
                       wp_register_script('mega_menu', (get_bloginfo("stylesheet_directory") . "/scripts/mega_menu.js"));
                       wp_enqueue_script('mega_menu');
                   }
                   
                   add_action('wp_enqueue_scripts','loadCustomScripts');
            }
        ?>

I know that a normal <script> in the <head> section loads as my google api key loads. I do not want to load the other scripts this way as it most certainly will later cause conflicts.

I also put the scripts that I need inside the wp-includes/js folder but they did not include.

Can you help me get these loaded in the best way to avoid conflicts? :slight_smile:

Regards,
Steve

2

Did I post this to the wrong forum? Not enough or unclear details? I would have thought that other Wordpress managers/theme developers would have faced needing jQuery/Javascript?

3

“Well at first if you do not succeed try, try, again!”

I got it working and I believe in a pretty safe way…

This code is located in my Wordpress function.php file


// load google hosted jquery and custom code
add_action('init', 'register_js');

function register_js(){
    $theme_path_uri = get_theme_root_uri();
    // register jQuery 1.4.3
    if( !is_admin()){
       wp_deregister_script('jquery'); 
       wp_register_script(
               'jquery'
               , "http".($_SERVER['SERVER_PORT'] == 443 ? "s" : "" )
                 . "://ajax.googleapis.com/ajax/libs/jquery /1.4.3/jquery.min.js"
               , false
               , '1.4.3'
           );
       // register jQuery cycle plugin
       wp_register_script(
               'jquery.cycle.all.min'
               , $theme_path_uri . "/aaro/scripts/cycle/jquery.cycle.all.min.js"
               , false
               , '1.0'
       );
       // register custom mega menu code
       wp_register_script(
               'mega_menu'
               , $theme_path_uri . "/aaro/scripts/mega_menu.js"
               , false
               , '1.0'
        );
        // register custom jQuery Hover Intent plugin that helps the mega_menu
        wp_register_script(
               'hoverIntent'
               , $theme_path_uri . "/aaro/scripts/jquery.hoverIntent.minified.js"
               , false
               , '1.0'
        );
       // register custom div cycle code
       wp_register_script(
               'aaro_cycle'
               , $theme_path_uri . "/aaro/scripts/cycle/aaro_cycle.js"
               , false
               , '1.0'
        );
    }
}

// load js code
add_action('wp_enqueue_scripts', 'add_js_to_page');
function add_js_to_page(){
    wp_enqueue_script('jquery');
     wp_enqueue_script('jquery.cycle.all.min');
     wp_enqueue_script('aaro_cycle');
     wp_enqueue_script('hoverIntent');
     wp_enqueue_script('mega_menu');   
}
?>

The if( !is_admin()){} wrapper means that this code won’t load if in the wp-admin. wp-admin loads its’ own jQuery and this jQuery could conflict with it, so the !is_admin() function insures that it won’t load in the admin.

I hope this helps other.:slight_smile:

Regards,
Steve