Adding link to JQuery UI in Virtue Theme

  • Hello

    I am wanting to add a little javascript flip thing to my front page and I’ve managed to link the relevant .js file (which I’ve called flip-script.js), but I have discovered that the page also needs to link to JQuery UI as well as JQuery. It is currently linking to JQuery.

    How do I get it to link to the JQuery UI, I’m getting very confused with all the scripts files and enque script things.

    Also can I link it to the library link as opposed to downloading it and adding it to assets?

    Any help very much appreciated, I’m getting confused with the multitude of folders WordPress now has ??

    Thanks in advance

Viewing 4 replies - 1 through 4 (of 4 total)

  • The following article should help:
    https://code.tutsplus.com/articles/the-ins-and-outs-of-the-enqueue-script-for-wordpress-themes-and-plugins–wp-22509

    Thread Starter Kanger

    (@kanger)

    Thanks for your reply. The article is really helpful, thanks.

    Any chance you could help me further though, my brain is struggling today….

    I think I’ve registered the scripts I want and the libraries they are dependent on, but I am still getting an undefined function error.

    This is what I have listed: 

    wp_register_script('modernizr', get_template_directory_uri() . '/assets/js/vendor/modernizr.min.js', false, null, false);
  wp_register_script('kadence_plugins', get_template_directory_uri() . '/assets/js/plugins.js', false, '237', true);
  wp_register_script('kadence_main', get_template_directory_uri() . '/assets/js/main.js', false, '237', true);
  wp_register_script('flip-script', get_template_directory_uri() . '/assets/js/flip-script.js', array('jquery', 'jquery-ui-core', 'jquery-effects-core'), false, null);
   wp_register_script('jquery-flip', get_template_directory_uri() . '/assets/js/jquery.flip.min.js', array('jquery', 'jquery-ui-core', 'jquery-effects-core'), false, null);
   wp_enqueue_script('jquery-ui-core', true, false, true);
  wp_enqueue_script('jquery-effects-core', true);
   wp_enqueue_script('jquery-flip');
  wp_enqueue_script('flip-script');
  wp_enqueue_script('jquery');
  wp_enqueue_script('modernizr');
  wp_enqueue_script('masonry');
  wp_enqueue_script('kadence_plugins');
  wp_enqueue_script('kadence_main');

    In the page source they are showing in the <head> section as:

    <script type='text/javascript' src='https://localhost/wordpress/wp-includes/js/jquery/jquery.js?ver=1.11.1'></script>
<script type='text/javascript' src='https://localhost/wordpress/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<script type='text/javascript' src='https://localhost/wordpress/wp-includes/js/jquery/ui/core.min.js?ver=1.11.2'></script>
<script type='text/javascript' src='https://localhost/wordpress/wp-includes/js/jquery/ui/effect.min.js?ver=1.11.2'></script>
<script type='text/javascript' src='https://localhost/wordpress/wp-content/themes/virtue/assets/js/jquery.flip.min.js?ver=4.1'></script>
<script type='text/javascript' src='https://localhost/wordpress/wp-content/themes/virtue/assets/js/flip-script.js?ver=4.1'></script>
<script type='text/javascript' src='https://localhost/wordpress/wp-content/themes/virtue/assets/js/vendor/modernizr.min.js'></script>

    Any ideas why the function is undefined, I’m getting code blindness at mo.

    Thanks in advance

    Please provide page URL with exact error message.

    Hi Kanger.

    A few things to help you get started troubleshooting:

    1. Check that your flip javascript supports the version of JQuery UI that you are using

    2. If JQuery UI is being loaded from wp-includes, do you also need to “enqueue” it? Just check that you are requesting JQuery UI in the correct sequence.

    Hope that helps you get started.

    Post back, if you still cannot get to the bottom of the problem.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Adding link to JQuery UI in Virtue Theme’ is closed to new replies.

Tags