0

I'm setting up jQuery UI on one of my WordPress pages that uses a custom template (course-landing-page.php). I enqueued the scripts for jQuery UI the proper way, but I need to add a JavaScript snippet AFTER the scripts in order to register the tabs on the page.

This is what the code in my functions.php file looks like:

    wp_enqueue_script( 'jquery2', '//code.jquery.com/jquery-1.10.2.js', array( 'jquery' ), '1.10.2', false );

wp_enqueue_script( 'jqueryui', '//code.jquery.com/ui/1.11.4/jquery-ui.js', array( 'jquery' ), '1.11.4', false );


// Add the jQuery 'tabs' code to pages that use the 'course-landing-page.php' template

add_action('wp_enqueue_scripts','jQuery_UI_Tabs');
function jQuery_UI_Tabs(){
    if ( is_page_template('course-landing-page.php') ) {
        echo '<script>
                $(function() {
                    $( "#tabs" ).tabs();
                });
            </script>';

    }

It works great, EXCEPT for the fact that the JavaScript snippet is displaying BEFORE the enqueued jQuery UI scripts, and therefore it's causing the tabs not to work properly. How can I make it so the snippet shows up AFTER the enqueued scripts in the header?

1
  • 1
    You should place this in it's own javascript file, then use the third parameter of wp_enqueue_script to set the dependencies that this new javascript file depends on May 12, 2015 at 22:52

2 Answers 2

1

You should use the wp_enqueue_script() function and the dependency parameter to ensure scripts are loaded in the appropriate order, and if you're adamant in using inline scripts, you can add it with the wp_add_inline_script() function.

Also, WordPress has jQuery already installed, so you don't have to enqueue them on the frontend, simply list them as dependencies for your script and they'll get loaded before yours.

function jQuery_UI_Tabs() {

    if ( is_page_template('course-landing-page.php' ) ) {

        // Enqueue your script with dependencies
        wp_enqueue_script(
            'myTabs', // Handle
            '', // Absolute URL to the script, but yours is inline so empty
            array(
                'jquery', // Dependent on jQuery
                'jquery-ui-tabs' // Dependent on jQuery UI Tabs
            ), // Dependencies
            false, // Version
            false // Put in header
        );
        wp_add_inline_script(
            'myTabs', // Handle,
            'var $ = jQuery.noConflict(); $(function() { $( "#tabs" ).tabs(); });' // Your inline JavaScript
        );

    }
}
add_action('wp_enqueue_scripts','jQuery_UI_Tabs');

However, should you want to use CDN versions of jQuery instead, you absolutely can, just enqueue those and list those as your script's dependencies.

I also would recommend putting this particular JavaScript in it's own script file instead of inline and loading it in the footer for performance reasons, but I wanted to answer this particular case.

3
  • 1
    Seriously, I need to start checking the dates of these questions. I don't know why questions that are "modified today" are like... pretending they've been asked today, so I go in answering thinking it's a new question lol
    – AuRise
    Oct 6, 2022 at 13:54
  • 1
    Ha I have been tricked the same way recently. It seems a bot is pinging them and brings them back to the top. Good answer anyways ;)
    – zac
    Nov 8, 2022 at 4:19
  • Ah, that makes sense. Thanks!
    – AuRise
    Nov 8, 2022 at 16:08
0

Ahh, solved it with this!

add_action( 'wp_head', 'jQuery_UI_Tabs' );
function jQuery_UI_Tabs() {
if ( is_page_template('course-landing-page.php' ) ) {
    echo'<script>
            $(function() {
                $( "#tabs" ).tabs();
            });
        </script>';
} 
3
  • 1
    This is not a good solution. You can use the parameters of wp_enqueue_script to set the dependency and also there is a flag to load it in the footer.
    – Nick Young
    May 13, 2015 at 0:04
  • Or, just add it directly inside the template, where you want it to be - no need for all this complexity..
    – Q Studio
    Jan 27, 2021 at 20:13
  • To ensure your action runs later than the others, you can also set the third parameter to something higher than 10 like this: add_action( 'wp_head', 'jQuery_UI_Tabs', 20);
    – AuRise
    Oct 6, 2022 at 13:23

Your Answer

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

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