How to add JavaScript properly

Question

I have a page which adds styles and jquery to a page but it is a normal page and I need to add it to a wordpress website.

I have found this code for adding local stylesheets and JS

 <?php
    function wpb_adding_scripts() {
        wp_register_script('my_amazing_script', get_template_directory_uri() . '/js/amazing_script.js', array('jquery'),'1.1', true);

        wp_enqueue_script('my_amazing_script');
    }

    add_action( 'wp_enqueue_scripts', 'wpb_adding_scripts' );

Can i use this same method to transLate this line?

 <link rel="stylesheet" href="//code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />

Why does the href start with //? I see this a lot with jQuery references and I don't know what it means.

I have also found this for adding jQuery:

if (!is_admin()) add_action("wp_enqueue_scripts", "my_jquery_enqueue", 11);
function my_jquery_enqueue() {
   wp_deregister_script('jquery');
   wp_register_script('jquery', "http" . ($_SERVER['SERVER_PORT'] == 443 ? "s" : "") . "://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js", false, null);
   wp_enqueue_script('jquery');
}
?>

Why is it if !is-admin? I believe the point of this is to ensure jQuery is only loaded once even though loads of plugins use it.

Is that correct?

You have already added jQuery. Read the documentation for wp_enque_script and you'll see that one of the arguments is an array of dependencies. You have included such an array with "jQuery", and as jQuery is built into Wordpress it will be added automatically when set as a depency for one or more scripts, no need to add it again. — adeneo
– adeneo, Commented Apr 19, 2014 at 21:07

jk. · Accepted Answer · 2014-04-19 21:22:07Z

2

The // allows the script to load either http or https depending on what the protocol of the page is. This helps to avoid those "unsecure" items warnings or the script not loading at all.

if !is-admin ensures that the script is only loaded on the front end of the site and not in the admin section.

As @adeneo said, there are some scripts included: http://codex.wordpress.org/Function_Reference/wp_enqueue_script.

You may just need that CSS file: Function Reference/wp enqueue style

edited Apr 19, 2014 at 21:22

answered Apr 19, 2014 at 21:11

jk.

14.4k4 gold badges45 silver badges58 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

How to add JavaScript properly

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related