Support » Themes and Templates » Trying to use Enqueue & Noconflict

  • Resolved studioburst

    (@studioburst)


    Hi guys – i’m in despair and am relying on you to point my head in the right direction please!

    I need to use “enqueue” and “noconflict” for my javascript files and Jquery on my latest WP theme.

    I have been advised to do this in order to to get my theme on a marketplace, but after around 6 hours of head-scratching and google searching, I just cannot get it working, and this is my first time in using these features.

    My Head section:
    http://pastebin.com/Gz5WtSeK

    Everything works fine and as intended, but I MUST alter the code above so it uses the “enqueue” and “noconflict” features, i’ve gone through several sites explaining how to do this (jquery before wp_head, scripts after it etc..) and have even gone via the “init” route but all my sliders stopped working.

    Would really appreciate any help on this 🙂

    Can link if needed.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Basically, you’ll want to take all of those script tags out of your header file, and replace them with a function in your functions.php file. For, example this:

    <script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

    Could be replaced by adding this to functions.php:

    function my_scripts_method() {
    
    $jQuery = "http://code.jquery.com/jquery-latest.min.js";
    wp_deregister_script( 'jQuery' );
    wp_register_script( 'jQuery', $jQuery);
    wp_enqueue_script( 'jQuery');
    
    }    
    
    add_action('wp_enqueue_scripts', 'my_scripts_method');

    You can also use this one function to call multiple scripts.

    this:

    <?php if ( is_home() ) { // IF HOMEPAGE, LOAD SCRIPTS FOR SLIDERS ?>
                    <script language="javascript" type="text/javascript" src="<?php bloginfo('template_directory'); ?>/js/jflow.plus.js"></script>
                    <script type="text/javascript" language="javascript" src="<?php bloginfo('template_directory'); ?>/js/jquery.carouFredSel-5.6.4-packed.js"></script>
            <?php }

    could be replaced with this:

    function my_scripts_method() {
    
    $jQuery = "http://code.jquery.com/jquery-latest.min.js";
    wp_deregister_script( 'jQuery' );
    wp_register_script( 'jQuery', $jQuery);
    wp_enqueue_script( 'jQuery');
    
    if ( is_home() ) { // IF HOMEPAGE, LOAD SCRIPTS FOR SLIDERS
    
    $jflow= get_bloginfo('template_directory'); ?>/js/jflow.plus.js";
    wp_deregister_script( 'jflow' );
    wp_register_script( 'jflow', $jflow);
    wp_enqueue_script( 'jflow');
    
    $carouFredSel= get_bloginfo('template_directory'); ?>/js/jquery.carouFredSel-5.6.4-packed.js";
    wp_deregister_script( 'carouFredSel' );
    wp_register_script( 'carouFredSel', $carouFredSel);
    wp_enqueue_script( 'carouFredSel');
    }//end if
    }    
    
    add_action('wp_enqueue_scripts', 'my_scripts_method');

    If you haven’t already come across it, take a look at this: http://codex.wordpress.org/Function_Reference/wp_enqueue_script#jQuery_noConflict_wrappers

    hope that helps.

    Thank you very much for your time.

    The first Jquery code worked, but I get a syntax error warning on dreamweaver when I add the seccond snippet, it highlights the line:

    $jflow= get_bloginfo('template_directory'); ?>/js/jflow.plus.js";

    I presume it’s the ?> part but can’t seem to get the syntax right.

    Thanks for the link too, that was my first post of call many hours ago, but this is literally my first attempt at calling scripts in this way, I’ve learnt a lot today, my coding was outdated without realising it.

    Appreciate any further help.

    Yes, sorry. You are right, the ?> doesn’t belong. it should be like this:

    function my_scripts_method() {
    
    $jQuery = "http://code.jquery.com/jquery-latest.min.js";
    wp_deregister_script( 'jQuery' );
    wp_register_script( 'jQuery', $jQuery);
    wp_enqueue_script( 'jQuery');
    
    if ( is_home() ) { // IF HOMEPAGE, LOAD SCRIPTS FOR SLIDERS
    
    $jflow= get_bloginfo('template_directory') . "/js/jflow.plus.js";
    wp_deregister_script( 'jflow' );
    wp_register_script( 'jflow', $jflow);
    wp_enqueue_script( 'jflow');
    
    $carouFredSel= get_bloginfo('template_directory') . "/js/jquery.carouFredSel-5.6.4-packed.js";
    wp_deregister_script( 'carouFredSel' );
    wp_register_script( 'carouFredSel', $carouFredSel);
    wp_enqueue_script( 'carouFredSel');
    }//end if
    }    
    
    add_action('wp_enqueue_scripts', 'my_scripts_method');

    Awesome, it seems to be running nice!!

    My opacity.js file doesn’t seem to like it though, no idea why, I mashed it together myself to add a slight opacity on hover effect to images within the theme.

    http://pastebin.com/vCND13Ah

    Any idea as to why it doesn’t like this method of being added?

    Not sure. If you paste the enqueue code you ended up with, I’ll see if I can spot any issues.

    This is what I finished with, all scripts are visible in the source code when viewed on the site, all my sliders and tickers are running fine, it’s just the opacity effect seems to have gone using the method you gave me.

    http://pastebin.com/s9daRZhc

    Many, many thanks for your help.

    The scripts will load in the order put them in inside that function. It looks like your callbacks.js is trying to call something from jcarousel, which has not loaded yet. I’m no expert on javascript, but I suspect this error is somehow preventing the next script (opacity.js) from loading/running.

    I would try moving your if ( is_home() statement up to just after the jQuery call. Hopefully that will fix it.

    Aww dude you’re too good, works perfect!

    Would you say that the above suggestions satisfies the need for this “noconflict” demand with jquery?

    I’m not sure exactly what their requirements are, but I believe writing your jQuery using jQuery() intead of $() is what is meant by No Conflict Mode.

    Okay, that’s kinda the jist of what I’ve picked up and made all the changes to the files just like what you describe.

    Again, many thanks for your help 🙂

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Trying to use Enqueue & Noconflict’ is closed to new replies.