Javascript into WordPress

plet9090
(@plet9090)

10 years, 7 months ago

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 →

Moderator Jose Castaneda
(@jcastaneda)

THEME COFFEE MONKEY

10 years, 7 months ago
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
(@plet9090)

10 years, 7 months ago

I am trying to follow this one

https://codex.wordpress.org/Using_Javascript

Thread Starter plet9090
(@plet9090)

10 years, 7 months ago

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
(@jcastaneda)

THEME COFFEE MONKEY

10 years, 7 months ago

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
(@plet9090)

10 years, 7 months ago
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
(@jcastaneda)

THEME COFFEE MONKEY

10 years, 7 months ago
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
(@plet9090)

10 years, 7 months ago
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
(@jcastaneda)

THEME COFFEE MONKEY

10 years, 7 months ago

Are you able to post a link to the page/site?

Thread Starter plet9090
(@plet9090)

10 years, 7 months ago

http://www.tothenationsworldwide.com

Moderator Jose Castaneda
(@jcastaneda)

THEME COFFEE MONKEY

10 years, 7 months ago

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
(@plet9090)

10 years, 7 months ago

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
(@plet9090)

10 years, 7 months ago

where should i place the <div id=”map”></div>

and where do i place the css for the map?

Moderator Jose Castaneda
(@jcastaneda)

THEME COFFEE MONKEY

10 years, 7 months ago

Try changing the wp_head to wp_footer. It could very well be it is rendering sooner than needed.
Thread Starter plet9090
(@plet9090)

10 years, 7 months ago
```
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.]
Thread Starter plet9090
(@plet9090)

10 years, 7 months ago

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 →

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

Javascript into WordPress

Tags

Topics

Topics with no replies

Non-support topics

Resolved topics

Unresolved topics

All topics