WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Trying to use Enqueue & Noconflict (11 posts)

  1. studioburst
    Member
    Posted 1 year ago #

    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.

  2. graphicgeek
    Member
    Posted 1 year ago #

    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.

  3. studioburst
    Member
    Posted 1 year ago #

    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.

  4. graphicgeek
    Member
    Posted 1 year ago #

    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');
  5. studioburst
    Member
    Posted 1 year ago #

    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?

  6. graphicgeek
    Member
    Posted 1 year ago #

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

  7. studioburst
    Member
    Posted 1 year ago #

    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.

  8. graphicgeek
    Member
    Posted 1 year ago #

    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.

  9. studioburst
    Member
    Posted 1 year ago #

    Aww dude you're too good, works perfect!

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

  10. graphicgeek
    Member
    Posted 1 year ago #

    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.

  11. studioburst
    Member
    Posted 1 year ago #

    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 :)

Topic Closed

This topic has been closed to new replies.

About this Topic