PHP variable to js variable in a WordPress theme

Question

I'm working with a wordpress theme, in the admin control panel I' ve added settings for the theme, here I can write some variables, like longitude and latitude for a map (works), and an email, that I need for a contact form, but this doesn' t work, I suppose that the problem is that I use

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/contact-form/contactform.js"></script>

In fact if I do the same with the map, that now is

<div id="gmapp"></div>
            <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
            <script type="text/javascript">
                var lat;
                var lng;
                lat=<?php echo($GLOBALS['desklab_theme_settings']['latcord_text']);?>;
                lng=<?php echo($GLOBALS['desklab_theme_settings']['lngcord_text']);?>;
                var latlng = new google.maps.LatLng(lat,lng);

                var options = {
                    zoom: 15,
                    center: latlng,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
                };  

                var map = new google.maps.Map(document.getElementById('gmapp'), options);

                var marker = new google.maps.Marker(
                {
                    position: latlng,
                    map: map
                }
                );

            </script>

I tried to write so:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/contact-form/map.js"></script>

But I don't see the map, and variables aren't found.

So what should I do to get the variable from settings as I do with lat and lng? I should write the js code in the php as I did with map?

You seem to have a stray `` from which i don't see the `if` part. — jaudette, Dec 09 '12 at 12:13
Just to make sure, you are trying to move the second script tag into map.js, is that it? — jaudette, Dec 09 '12 at 12:17
yes, but if do that, I don't know why but the variables lat and lng don't take the php variables — Mitro, Dec 09 '12 at 12:20
They don't because your php engine does not process your .js files, they are passed as-is to your browser. — jaudette, Dec 09 '12 at 12:21

score 1 · Accepted Answer · edited May 23 '17 at 10:24

You should move part of your code to the map.js file:

//map.js
var generateMap = function(lat,lng) {
  var latlng = new google.maps.LatLng(lat,lng);
  var options = {
         zoom: 15,
         center: latlng,
         mapTypeId: google.maps.MapTypeId.ROADMAP
  };  

  var map = new google.maps.Map(document.getElementById('gmapp'), options);

  var marker = new google.maps.Marker(
      {
         position: latlng,
         map: map
       }
  );
}

and from your php, do

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/contact-form/map.js"></script>
<script type="text/javascript" >
  var lat=<?php echo($GLOBALS['desklab_theme_settings']['latcord_text']);?>;
  var lng=<?php echo($GLOBALS['desklab_theme_settings']['lngcord_text']);?>;
  generateMap(lat,lng);
</script>

See this SO question for other solutions regarding data passing from PHP to JS

score 1 · Answer 2 · answered Dec 09 '12 at 12:26

1

You need to rename your map.js file to something like map.php so that the PHP engine parses it. Then your source will be:

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/contact-form/map.php"></script>

The contents will still be javascript with your PHP variables in place.

answered Dec 09 '12 at 12:26

davidethell

11,708
6
43
63

Now I try also your solution – Mitro Dec 09 '12 at 12:33

score 1 · Answer 3 · answered Dec 09 '12 at 13:43

1

One suggestion. Instead of using bloginfo('template_url') you should start using get_template_directory_uri() as the previous is being deprecated.

PS. I do not have comment privilege unless I answer a post.

answered Dec 09 '12 at 13:43

Lenin

570
16
36

score 0 · Answer 4 · answered Dec 09 '12 at 12:22

0

Don't forget echo

<script type="text/javascript" src="<?php echo bloginfo('template_url'); ?>/contact-form/map.js"></script>

answered Dec 09 '12 at 12:22

SaidbakR

13,303
20
101
195

I didn't use echo, now I try – Mitro Dec 09 '12 at 12:23
As you can see with developer tools of google, the js file is found and recognized, but doesn't take variable lat and lng – Mitro Dec 09 '12 at 12:27
I see in the source: http://wpthemes.mtxlab.us/test/wp-content/themes/DeskLab/contact-form/map.js – SaidbakR Dec 09 '12 at 12:58

PHP variable to js variable in a WordPress theme

4 Answers4