WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] how to 'use google libraries' (20 posts)

  1. jfkweb
    Member
    Posted 2 years ago #

    Hi, anyone know ho to call jQueryUI using use google libraries?

    install instructions just say 'install and activate' no mention of calling the script?
    Bit of a newbie!

    Thank you!

  2. esmi
    Forum Moderator
    Posted 2 years ago #

  3. jfkweb
    Member
    Posted 2 years ago #

    Thanks Esmi! so i do have to use enqueue script with the plugin?

  4. esmi
    Forum Moderator
    Posted 2 years ago #

    With the Google Libraries plugin? No. That plugin simply replaces the jQuery shipped in WordPress core with Google's version.

  5. jfkweb
    Member
    Posted 2 years ago #

    so with plugin installed when i use the following code, its callung from google CDN?

    <head>
    <style type="text/css" media="screen">
    	@import url("<?php bloginfo("stylesheet_url"); ?>");</style>
    <?php wp_enqueue_script('jquery'); ?>
    <?php wp_enqueue_script('jquery-ui-core'); ?>
    <?php wp_head(); ?>
    <script>
      jQuery(document).ready(function() {
        jQuery("#accordion").accordion({ header: "h3" });
      });
      </script>
    </head>
  6. Jason Penney
    Member
    Posted 2 years ago #

    If you want to use jQuery UI (or any of the scripts shipped with WordPress that are supported by UGL), get your code working without UGL enabled. Be sure to have WP_DEBUG set to true to ensure you aren't generating any new errors. Once that's working, activate UGL.

    All it does is change the location the script is loaded from if you enqueue it correctly in the supported manner.

  7. esmi
    Forum Moderator
    Posted 2 years ago #

    You need to enqueue scripts via your theme's functions.php file. See the function's Codex page for details.

  8. jfkweb
    Member
    Posted 2 years ago #

    ok thanks Jason and Esmi. Where is WP_DEBUG?

    so i should get accordion working while UGL is deactivated?

    I have the accordion working now though. when i deactivate UGL it stops working.

    'All it does is change the location the script is loaded from if you enqueue it correctly in the supported manner." - have i enqueued it properly, if not what is the correct way?

    Many Thanks

    Frank

  9. esmi
    Forum Moderator
    Posted 2 years ago #

    Where is WP_DEBUG?

    See this Codex section.

    have i enqueued it properly

    Not if you're adding that code above to your theme's header.php file. It needs to be in your theme's functions.php file. I'd also suggest that you remove:

    <script>
      jQuery(document).ready(function() {
        jQuery("#accordion").accordion({ header: "h3" });
      });
      </script>

    place it in an external .js file within your theme and enqueue it also.

  10. Jason Penney
    Member
    Posted 2 years ago #

    You have not enqueued it properly. Please read the codex page (the codex also covers WP_DEBUG). The code you posted will break a lot of things, although it may appear to work in some cases if you are lucky.

    Never put the javascript right into the page if you want to depend on scripts provided with WordPress like that. It won't work out.

    You want to put your javascript it it's own file (for example 'js/theme_enhancements.js').

    Then you do something like this in your theme's functions.php:

    function my_scripts_method() {
       // script depends on jquery-ui-accordian, so register
       // that as a dependency
       wp_register_script('my_theme_enhancements',
           get_template_directory_uri() . '/js/theme_enhancements.js',
           array('jquery-ui-accordian'),
           '1.0' );
       wp_enqueue_script('my_theme_enhancements')
    }
    
    add_action('wp_enqueue_scripts', 'my_scripts_method');

    But really, read the Codex page so you understand why.

  11. jfkweb
    Member
    Posted 2 years ago #

    Thank you guys. Dont have a functions.php file, should copy one from twentyeleven and add this? Was looking for relevant codex page is it 'Function Reference/wp enqueue script?

    do i need to put this in separate js file and then call it from functions.php using above structure? do i need to mention jquery-ui-accordion as you have above, thought it would be automatically called? sorry, quite confused.

    <script>
    jQuery(document).ready(function() {
    jQuery("#accordion").accordion({ header: "h3" });
    });
    </script>

  12. jfkweb
    Member
    Posted 2 years ago #

    cant find functions codex page.

  13. esmi
    Forum Moderator
    Posted 2 years ago #

    should copy one from twentyeleven and add this?

    Nooo! Start with a completely blank function.php file.

    do i need to put this in separate js file and then call it from functions.php using above structure?

    Yes.

    do i need to mention jquery-ui-accordion

    Ideally it should be referenced as a dependency when you enqueue the new .js file, yes.

  14. jfkweb
    Member
    Posted 2 years ago #

    thanks so all i need in functions.php is

    <?php
    function my_scripts_method() {
       // register your script location, dependencies and version
       wp_register_script('custom_script',
           get_template_directory_uri() . '/js/custom_script.js',
           array('jquery'),
           '1.0' );
       // enqueue the script
       wp_enqueue_script('custom_script');
    }
    add_action('wp_enqueue_scripts', 'my_scripts_method');
    ?>

    so i leave that line with jquery-ui-accordion as Jason wrote it? just change the name of the js file?

    much appreciated, thought this would be more automatic but its good to explore!

  15. Jason Penney
    Member
    Posted 2 years ago #

    If your custom script uses the accordion then you should change your dependency to array('jquery-ui-accordian') which will automatically bring in all the libraries accordion depends on.

    When UGL is active this will be just jquery, and the jquery-ui combined bundle file, but without it enabled it'll be a number of smaller files.

    I'm not sure why I took the time to give you the answer just to have you ignore me.

  16. jfkweb
    Member
    Posted 2 years ago #

    Sorry Jason, i'm not ignoring you you're just using terms i dont really understand, wasnt sure whether that line was as an example, but have read a bit on it now and get that bit.

    'Dependency' is a new one to me, i get what it is (the third part of the wp_register_script?)

    so this is my_accordion.js

    <script>
      jQuery(document).ready(function() {
        jQuery("#accordion").accordion({ header: "h3" });
      });
      </script>

    and this is my functions.php

    <?phpfunction my_scripts_method() {
       // script depends on jquery-ui-accordian, so register
       // that as a dependency
       wp_register_script('my_accordion',
           get_template_directory_uri() . 'my_accordion.js',
           array('jquery-ui-accordian'),
           '1.0' );
       wp_enqueue_script('my_accordion')
    }
    
    add_action('wp_enqueue_scripts', 'my_scripts_method');
    ?>

    is this all i need?

    Thank you!

  17. Jason Penney
    Member
    Posted 2 years ago #

    Ok, I understand. That looks pretty close.

    Don't really put html tags like '<script>' in your javascript file (my_accordion.js), so just:

    jQuery(document).ready(function() {
        jQuery("#accordion").accordion({ header: "h3" });
    });

    You need a '/' in your script registration url (difference between http://wordpress.orgsupport and http://wordpress.org/support )

    get_template_directory_uri() . 'my_accordion.js'

    Should be:

    get_template_directory_uri() . '/my_accordion.js'

    Also, somehow I mispelled accordion in my examples, so double check that. :)

  18. jfkweb
    Member
    Posted 2 years ago #

    Thanks a mil! got it working, kind of, hoping its a css thing, when click a header it pushes div below it down the page then it bounces back to where it should be. sound familiar? anyway no worries thanks for your help, big donation coming your way :-)

    happy paddys day to ye!

  19. Jason Penney
    Member
    Posted 2 years ago #

    Glad you got it working! I haven't used the accordion, but it sounds like it could be a style or markup issue.

    Good luck! Happy St. Patrick's Day to you as well.

    Jay

    p.s. don't forget to mark the thread resolved on the forum :)

  20. jfkweb
    Member
    Posted 2 years ago #

    Nice One. Will do. :-)

Topic Closed

This topic has been closed to new replies.

About this Topic