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 <?php endif; ?> from which i don't see the if part. — jaudette
– jaudette, Commented Dec 9, 2012 at 12:13
Just to make sure, you are trying to move the second script tag into map.js, is that it? — jaudette
– jaudette, Commented Dec 9, 2012 at 12:17
They don't because your php engine does not process your .js files, they are passed as-is to your browser. — jaudette
– jaudette, Commented Dec 9, 2012 at 12:21

Community · Accepted Answer · 2017-05-23 10:24:57Z

1

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

edited May 23, 2017 at 10:24

CommunityBot

11 silver badge

answered Dec 9, 2012 at 12:26

jaudette

2,3031 gold badge20 silver badges20 bronze badges

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

Comments

davidethell · Accepted Answer · 2012-12-09 12:26:43Z

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 9, 2012 at 12:26

davidethell

12.1k6 gold badges47 silver badges67 bronze badges

1 Comment

Mitro Over a year ago

Now I try also your solution

Asif Salahuddin Ghazi · Accepted Answer · 2012-12-09 13:43:35Z

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 9, 2012 at 13:43

Asif Salahuddin Ghazi

61017 silver badges38 bronze badges

Comments

SaidbakR · Accepted Answer · 2012-12-09 12:22:14Z

0

Don't forget echo

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

answered Dec 9, 2012 at 12:22

SaidbakR

13.6k23 gold badges113 silver badges202 bronze badges

3 Comments

Mitro Over a year ago

I didn't use echo, now I try

Mitro Over a year ago

As you can see with developer tools of google, the js file is found and recognized, but doesn't take variable lat and lng

SaidbakR Over a year ago

I see in the source: wpthemes.mtxlab.us/test/wp-content/themes/DeskLab/contact-form/…

Collectives™ on Stack Overflow

PHP variable to js variable in a WordPress theme

4 Answers 4

Comments

1 Comment

Comments

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related