Enqueue jquery to use accordion and tabs

  • jtm12

    (@jtm12)


    10 years, 4 months ago

    I have spent a long time trying to figure out how to enqueue jquery into WordPress using the accordion and tabs UIs as my test, and I’ve walked away from this several times because I just gave up.

    I recently stumbled over a suggestion online to put the enqueue code before the wp_head() and the script after it.

    I tried this with zero expectations, and it actually worked.

    The full code I’m using in my header for my little test is:

    <?php wp_enqueue_script('jquery'); ?>
<?php wp_enqueue_script('jquery-ui-core'); ?>
<?php wp_enqueue_script('jquery-ui-accordion'); ?>
<?php wp_enqueue_script('jquery-ui-tabs'); ?>

<?php wp_head(); ?>

<script type="text/javascript">
jQuery(document).ready(function($) {

		$( "#accordion" ).accordion();

		$( "#tabs" ).tabs();

	});

</script>

    Can anyone tell me if this is bad coding? Am I going to run into a problem down the road?

    Thank you.

Viewing 5 replies - 1 through 5 (of 5 total)
  • Predrag – WPMU DEV Support

    (@wpmudev-support1)

    10 years, 4 months ago

    Hi @jtm12,

    This is not the recommended method of linking JavaScript to a WordPress generated page and you may face problem in future.

    Instead of adding code like this, you should use wp_enqueue_scripts() action hook to add it.

    Please advise if you have more questions.

    Cheers.

    Thread Starter jtm12

    (@jtm12)

    10 years, 4 months ago

    I’ve been reading up on using wp_enqueue_scripts(), and I think I can handle using that method in the functions.php file, but I could use some clarification on two things:

    If I take the accordion script in the block of code above and place it before the ‘<?php wp_head(); ?>’ it stops working. If it’s placed after the ‘<?php wp_head(); ?>’ in the header file or even placed in one of the other templates, it works fine. Why is ‘<?php wp_head(); ?>’ affecting the performance of the accordion script?

    And if I use wp_enqueue_scripts() to add my jquery library to the header, am I putting my accordion script in there, too? If not, where am I putting it?

    Predrag – WPMU DEV Support

    (@wpmudev-support1)

    10 years, 4 months ago

    Hi @jtm12,

    The above accordion and tabs script depends on the following scripts to work
    jquery
    jquery-ui-core
    jquery-ui-accordion
    jquery-ui-tabs

    Therefore the above scripts should be loaded before the accordion and tabs script.

    To adjust this dependency instead of adding accordion script in header, you should add it in the js file and enqueue it using wp_enqueue_script() function passing handles of required scripts as a third parameter of function.

    Example:

    function add_custom_scripts() {
	wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/custom.js', array('jquery-ui-core', 'jquery-ui-accordion', 'jquery-ui-tabs') );
}

add_action( 'wp_enqueue_scripts', 'add_custom_scripts' );

    Best Regards,

    Thread Starter jtm12

    (@jtm12)

    10 years, 4 months ago

    WPMU DEV,

    You are awesome.

    Thank you for the explanation and the help with the code.

    I hope others find this, too, because I have been completely baffled by jQuery in WordPress, and I see the same frustration in others’ posts.

    I really appreciate the help.

    jtm12

    Predrag – WPMU DEV Support

    (@wpmudev-support1)

    10 years, 4 months ago

    Hi @jtm12,

    Thank you for your reply and you are always welcome.

    Any other issues, we’re here to help.

    Take care.

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Enqueue jquery to use accordion and tabs’ is closed to new replies.