How to Add a .js file Only in one specific Page Dynamically to Head

Question

I need to add some scrips for Google Maps only in my contact page and I do not want to populate it on all pages. I am not willing to create a custom header as well so I was thinking is there any way to populate the js file only on contact page? currently I am using this code to add javascript to theme

//Load Scripts
function load_scripts(){
    wp_deregister_script('jquery'); // De-register Existing jquery
    wp_enqueue_script('jquery', 'http://code.jquery.com/jquery.js', '', '', true);
    wp_enqueue_script('bootstrap-jquery', get_template_directory_uri().'/assets/js/bootstrap.js', '', '', true);
}

but as I said I have another file called googlemap.js can you please let me know if I can add it to ONLY contact page from this code? the other Point is Wordpress is adding this code at the end of body (before tag) which honestly I do not know how and why! but in my specific case I need to add the code into ! can you please let me know how I can do this

Thanks

Answer 1

Use conditional is_page() for loading script on specific page.

Here Is The Modified Version of Your Function:

//Load Scripts
function load_scripts(){
    wp_deregister_script('jquery'); // De-register Existing jquery
    wp_register_script('jquery', 'http://code.jquery.com/jquery.js', '', '', true);
    wp_enqueue_script( 'jquery' );

    wp_register_script('bootstrap-jquery',get_template_directory_uri().'/assets/js/bootstrap.js', array( 'jquery' ), '', true);
    wp_enqueue_script( 'bootstrap-jquery' );

    // register the script
    wp_register_script( 'my-script', 'URL to Script' ); // by default script will load to head

    // conditionally load page
    if (is_page( 'Contact' )) {
        wp_enqueue_script('my-script');
    }
}

Answer 2

Here is some tricks for you

Note:

wp_register_script(); // is only register js file, it is not running
wp_deregiser_script(); // is completely remove js file, it is not nice method is to use in page condition check

//Run Js
wp_enqueue_script(); // is use only your register js file,
wp_dequeue_script(); // this function make not to run js file, it is nice method to use in page codition check

In your functions.php file

function js_library() {

    //1. Method
    if ( is_front_page() ) {
        //wp_dequeue_script();
    }

    //2. Method
    if ( is_page(120)) { //120 is page id, you can get page id using using $post->ID or get_the_ID
        //wp_dequeue_script();
    }

    if ( is_page($post->ID) == 120 ) { //120 is your page id
        //wp_dequeue_script();
    }

    if ( is_page('about-us') ) { //about-us is using page slug, you can get page slug http://yourdomain.com/about-us
        //wp_dequeue_script();
    }

    $remove_js_pages = array('about-us', 'contact-us', 'service'); // for multi page slugs
    if ( is_page($remove_js_pages) ) { //remember you can get page slug from your page url ;-)
        //wp_dequeue_script();
    }

    //Using page name
    $pagename = get_query_var('pagename');
    if ( !$pagename && $id > 0 ) {
        // If a static page is set as the front page, $pagename will not be set. Retrieve it from the queried object
        $post = $wp_query->get_queried_object();
        $pagename = $post->post_name;
    }

    if ( is_page() == $pagename ) {
        //wp_dequeue_script();
    }
}