Title: Javascript into WordPress
Last modified: August 30, 2016

---

# Javascript into WordPress

 *  [plet9090](https://wordpress.org/support/users/plet9090/)
 * (@plet9090)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/javascript-into-wordpress/)
 * Okay I have a google map javascript code I want to insert into my homepage (I
   also have seperate maps for each of my other pages I will need to insert).
 * I am struggling with this and nothing is working for me. I have my java file 
   in my host server as map_script.js
    First, with this should it just be my java
   code? or should it have the <script>Insert Java code here</script>? At the end
   of the code is the code with my API key, how do I add that to my java code? or
   does that just get added to my homepage html?
 * Second, where do I go from here? I have read the wordpress page with enqueue 
   and tried this, but it just doesnt seem to work for me. Does anyone have a better
   resource as to how to do this enqueue process or can explain it to me better?

Viewing 15 replies - 1 through 15 (of 16 total)

1 [2](https://wordpress.org/support/topic/javascript-into-wordpress/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/javascript-into-wordpress/page/2/?output_format=md)

 *  Moderator [Jose Castaneda](https://wordpress.org/support/users/jcastaneda/)
 * (@jcastaneda)
 * THEME COFFEE MONKEY
 * [10 years, 7 months ago](https://wordpress.org/support/topic/javascript-into-wordpress/#post-6752279)
 * Hi there plet9090!
 * Are you following a tutorial, and if so which one?
 * Now, for the first question you have:
 * >  First, with this should it just be my java code? or should it have the <script
   > >Insert Java code here</script>? At the end of the code is the code with my
   > API key, how do I add that to my java code? or does that just get added to 
   > my homepage html?
 * There are several ways to load JavaScript files within WordPresss. As you may
   already know, enqueueing them is a better practice. With that in mind, when you
   do enqueue them WordPress will create the `<script src/>` in the header for you.
   From there all you would need to edit are the respective JavaScript files. For
   example, if I’m loading my JS files like:
 *     ```
       add_action( 'wp_enqueue_scripts', function(){
           wp_enqueue_script( 'my-cool-js-file', get_template_directory_uri() . '/js/app.js', array( 'jquery', 'underscore', 'backbone' ) );
       });
       ```
   
 * The file I would then edit would be the `app.js` file.
 * Now, if I wanted to add a simple two simple lines of JS I could use something
   like:
 *     ```
       add_action( 'wp_footer', function(){
           echo '<script>';
           // my super awesome JS code
           echo '</script>';
       }), 99 );
       ```
   
 * As for the second question:
 * >  Second, where do I go from here? I have read the wordpress page with enqueue
   > and tried this, but it just doesnt seem to work for me. Does anyone have a 
   > better resource as to how to do this enqueue process or can explain it to me
   > better?
 * Are there any errors when you open up your browser’s developer tool console? 
   If the file is not loading it will often give a 404 error on the file.
 * Any further questions, let us know!
 *  Thread Starter [plet9090](https://wordpress.org/support/users/plet9090/)
 * (@plet9090)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/javascript-into-wordpress/#post-6752313)
 * I am trying to follow this one
 * [https://codex.wordpress.org/Using_Javascript](https://codex.wordpress.org/Using_Javascript)
 *  Thread Starter [plet9090](https://wordpress.org/support/users/plet9090/)
 * (@plet9090)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/javascript-into-wordpress/#post-6752314)
 * What I’m wondering is where am I putting this code?
 * I feel like I need to put the enqueue code into my header.php and what else do
   I do?
    Or does this go into the head of my header.php? <script type=”text/javascript”
   src=”/scripts/map_script.js”></script>
 * I just don’t understand what to put where to be honest.
 *  Moderator [Jose Castaneda](https://wordpress.org/support/users/jcastaneda/)
 * (@jcastaneda)
 * THEME COFFEE MONKEY
 * [10 years, 7 months ago](https://wordpress.org/support/topic/javascript-into-wordpress/#post-6752326)
 * Gotcha!
 * That makes a little more sense now. 🙂
 * So, the `add_action` parts you would put inside your `functions.php` file of 
   your theme -or child theme- or in the plugin’s file. The `<script>` is created
   by WordPress so you don’t have to worry about that. Make sense?
 *  Thread Starter [plet9090](https://wordpress.org/support/users/plet9090/)
 * (@plet9090)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/javascript-into-wordpress/#post-6752328)
 * Okay kind of.
 * I posted this code into my functions.php
 *     ```
       function university_scripts() {
          wp_enqueue_script( 'map js', get_template_directory_uri() . '/js/map_script.js');
       }
   
       add_action( 'wp_enqueue_scripts', 'university_scripts' );
       ```
   
 * Now, when I look at the source code from my homepage, I can see that my javascript
   file is shown and I can click on it and its there.
 * So where should I put this code:
 *     ```
       <style>
             html, body {height: 100%;
       	margin: 1;
               padding: 1;
             }
             #map {
               height: 80%;
             }
           </style>
       ```
   
 * and this
 *     ```
       <script async defer
               src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&signed_in=true&callback=initMap"></script>
       ```
   
 * And will this be the solution to my map not showing up onto my homepage?
 * Thanks for your help!
 *  Moderator [Jose Castaneda](https://wordpress.org/support/users/jcastaneda/)
 * (@jcastaneda)
 * THEME COFFEE MONKEY
 * [10 years, 7 months ago](https://wordpress.org/support/topic/javascript-into-wordpress/#post-6752369)
 * Great!
 * So the `script` you can either hook to `wp_head` using something like:
 *     ```
       add_action( 'wp_head', function(){
           echo '<script src="path/to/file.js"></script>';
       });
       ```
   
 * The `style` code you can also hook to the `wp_head` if you want or you can hard-
   code that in the `head` of your page. Entirely up to you on that one. 🙂
 * That may be the solution to showing the map, if you post a link to the page we
   may be able to further troubleshoot just in case there are a few things that 
   may not be loading and perhaps missed. 🙂
 *  Thread Starter [plet9090](https://wordpress.org/support/users/plet9090/)
 * (@plet9090)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/javascript-into-wordpress/#post-6752396)
 * Okay I have this code in my functions.php file
 *     ```
       function university_scripts_map() {
          wp_enqueue_script( 'map js', get_template_directory_uri() . '/js/map_script.js', array( 'jquery', 'underscore', 'backbone' ) );
       }
       add_action( 'wp_enqueue_scripts', 'university_scripts_map' );
       add_action( 'wp_head', function(){
           echo '<script src="https://maps.googleapis.com/maps/api/js?key=YOURAPIKEY&signed_in=true&callback=initMap"></script>';
       });
       ```
   
 * Of course my API key is in there. But still this isn’t working for me. Any ideas
   on what I am missing? Do I need to input anything into my homepage text to show
   the map there?
 * Again thanks for your help, it is greatly appreciated.
 *  Moderator [Jose Castaneda](https://wordpress.org/support/users/jcastaneda/)
 * (@jcastaneda)
 * THEME COFFEE MONKEY
 * [10 years, 7 months ago](https://wordpress.org/support/topic/javascript-into-wordpress/#post-6752420)
 * Are you able to post a link to the page/site?
 *  Thread Starter [plet9090](https://wordpress.org/support/users/plet9090/)
 * (@plet9090)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/javascript-into-wordpress/#post-6752426)
 * [http://www.tothenationsworldwide.com](http://www.tothenationsworldwide.com)
 *  Moderator [Jose Castaneda](https://wordpress.org/support/users/jcastaneda/)
 * (@jcastaneda)
 * THEME COFFEE MONKEY
 * [10 years, 7 months ago](https://wordpress.org/support/topic/javascript-into-wordpress/#post-6752428)
 * From what I can gather it looks like you don’t have any element with an `ID` 
   of `map`. That is what the `map_script` is looking for in order to create the
   map.
 *  Thread Starter [plet9090](https://wordpress.org/support/users/plet9090/)
 * (@plet9090)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/javascript-into-wordpress/#post-6752429)
 * I have tried to post the <div id=”map”></div> code into the body of my page with
   no luck. Is this what you are talking about? I figured it must also be something
   with the code with my API key. Is this how to correctly write it like I did in
   my previous comment in the functions.php?
 *  Thread Starter [plet9090](https://wordpress.org/support/users/plet9090/)
 * (@plet9090)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/javascript-into-wordpress/#post-6752438)
 * where should i place the <div id=”map”></div>
 * and where do i place the css for the map?
 *  Moderator [Jose Castaneda](https://wordpress.org/support/users/jcastaneda/)
 * (@jcastaneda)
 * THEME COFFEE MONKEY
 * [10 years, 7 months ago](https://wordpress.org/support/topic/javascript-into-wordpress/#post-6752443)
 * Try changing the `wp_head` to `wp_footer`. It could very well be it is rendering
   sooner than needed.
 *  Thread Starter [plet9090](https://wordpress.org/support/users/plet9090/)
 * (@plet9090)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/javascript-into-wordpress/#post-6752449)
 *     ```
       add_shortcode('custom-map-shortcode', 'custom_map_shortcode_callback');
       function custom_map_shortcode_callback() {
           return '<div id="map" style="height: 100%; margin: 0;padding: 0;"></div>';
       }
       add_action( 'wp_enqueue_scripts', 'enqueue_map_script' );
       add_action( 'wp_head', function(){
           echo '<script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAsQtOoS2PUGzaip_GDVzVhxKNI5mLVr1A&signed_in=true&callback=initMap"></script>';
       });
       function enqueue_map_script(){
   
         global $post;
   
         if( is_a( $post, 'WP_Post' ) && has_shortcode( $post->post_content, 'custom-map-shortcode') ) {
             wp_enqueue_script( 'map-script', get_template_directory_uri() . '/js/map_script.js');
          }
   
       }
       ```
   
 * [Moderator note: code fixed. Please wrap code in the backtick character or [use the code button](https://codex.wordpress.org/Forum_Welcome#Posting_Code).]
 *  Thread Starter [plet9090](https://wordpress.org/support/users/plet9090/)
 * (@plet9090)
 * [10 years, 7 months ago](https://wordpress.org/support/topic/javascript-into-wordpress/#post-6752450)
 * the footer change didnt work. I have this code so far, and I know I’m almost 
   there because the js path file is in my source code, I also see my script source
   with my api key. If I put the shortcode into the body of my page, it doesn’t 
   show up in the page, so I know the shortcode is working. I just can’t find what
   else I am doing wrong.

Viewing 15 replies - 1 through 15 (of 16 total)

1 [2](https://wordpress.org/support/topic/javascript-into-wordpress/page/2/?output_format=md)
[→](https://wordpress.org/support/topic/javascript-into-wordpress/page/2/?output_format=md)

The topic ‘Javascript into WordPress’ is closed to new replies.

## Tags

 * [javascript](https://wordpress.org/support/topic-tag/javascript/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 16 replies
 * 2 participants
 * Last reply from: [plet9090](https://wordpress.org/support/users/plet9090/)
 * Last activity: [10 years, 7 months ago](https://wordpress.org/support/topic/javascript-into-wordpress/page/2/#post-6752455)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics