wp_head conflicts with other jQuery scripts

3 Views

The 

<?php wp_head(); ?>

conflicts with two of the other jQuery scripts when moved right at the top straight after the

Read More
<head> section

and this only happens in the Products page. 

<?php wp_head(); ?> conflicts with jQzoom.js and Navigation/jquery1.js on Products page.

When I put 

<?php wp_head(); ?>

above 

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/js/jq/jquery.jqzoom-core.js">

then jQzoom stops working on the products page and when I put if before Navigation/jquery1.js then Navigation stops working on Products page. 

<script src="<?php echo get_template_directory_uri(); ?>/js/navigation/jquery1.js" type="text/javascript"></script>.

Everything works fine when 

<?php wp_head(); ?>

is right at the end before the 

</head> section.

I need 

<?php wp_head(); ?>

right at the top straight after section due to SEO .

Here’s the link to the site that I’m working on http://www.nsmmusic.com and the issue happens to be on this page http://www.nsmmusic.com/products/digital-jukeboxes/icon-lite/ (Thanks in advance.)

Post Views: 3

Related posts

Leave a Reply

2 comments

  1. The best way to avoid asset conflicts is by properly enquing the files. To do this you must use wp_enqueue_script

    a good way to do this is to put it as part of a function in your functions.php file like so

    1. create a function
    2. insert wp_register_script into the function
    3. then insert wp_enqeue_script into the function
    4. use add_action(), to initlize the enqueue-ing process

    so –

    function load_scripts() {
  wp_register_script( 'script-name', get_template_directory_uri() . '/js/script.js', array( 'scriptyouwillwaittobeloaded' ) );
  wp_enqueue_script( 'script-name' );
}

add_action('wp_enqueue_scripts', 'load_scripts');

    In this example the function load_scripts() would then be called in the header.php file. Take a look at wp_register_script as well to get a better understanding of the arguments for that as well, but in summary –

    first argument: is the name you want to use as reference to this script

    second argument: is the actual link to the script

    third argument: is the script that you want to load before this script (the script you want to wait for before this script loads)

    and for wp_enqueue_script, the argument is merely a reference to the name (the first argument of wp_register_script)

    the add_action function arguments:

    first argument: the function you are “hooking” into

    second argument: the function you created that will be “hooked”

  2. I have added most of my conflicting jQuery scripts using the following method below:

    function et_load_my_scripts(){
if ( !is_admin() ){
    $template_dir = get_template_directory_uri();
    wp_enqueue_script('navigation', $template_dir . '/js/navigation/jquery1.js', array('jquery'), '1.0', true);
    wp_enqueue_script('navigation1', $template_dir . '/js/navigation/nav_touch.js', array('jquery'), '1.0', true);
    wp_enqueue_script('jqzoom', $template_dir . '/js/jq/jquery.jqzoom-core.js', array('jquery'), '1.0', true);

}
if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' );

$et_gf_enqueue_fonts = array();
$et_gf_heading_font = sanitize_text_field( et_get_option( 'heading_font', 'none' ) );
$et_gf_body_font = sanitize_text_field( et_get_option( 'body_font', 'none' ) );

if ( 'none' != $et_gf_heading_font ) $et_gf_enqueue_fonts[] = $et_gf_heading_font;
if ( 'none' != $et_gf_body_font ) $et_gf_enqueue_fonts[] = $et_gf_body_font;

if ( ! empty( $et_gf_enqueue_fonts ) ) et_gf_enqueue_fonts( $et_gf_enqueue_fonts ); }

add_action( 'wp_enqueue_scripts', 'et_load_my_scripts' );

    Thanks for helping 🙂