Pass PHP variables to Javascript

Question

I've implemented a custom Google Maps script as a Wordpress shortcode but I have a problem with some of the values that are defined in the .js file but generated by Wordpress through PHP

This is the .js file:

//set your google maps parameters
var latitude = 41.03328,
    longitude = 21.30281,
    map_zoom = 16;

//google map custom marker icon - .png fallback for IE11
var is_internetExplorer11= navigator.userAgent.toLowerCase().indexOf('trident') > -1;
var marker_url = ( is_internetExplorer11 ) ? 'img/cd-icon-location.png' : 'img/cd-icon-location.svg';

//define the basic color of your map, plus a value for saturation and brightness
var main_color = '#00e1ff',
    saturation_value= -20,
    brightness_value= 5;

What I need to do is get the Wordpress theme directory for the images on line:

'img/cd-icon-location.png' : 'img/cd-icon-location.svg'

and for var main_color = '#00e1ff', get this value from PHP

<?php echo oneengine_option( 'main_color' ); ?>

You can read the color value from the page element or CSS rule. — Ruben Kazumov
– Ruben Kazumov, Commented Dec 29, 2014 at 23:05

ksealey · Accepted Answer · 2014-12-29 23:33:52Z

2

What I usually do to get JS values using PHP is declaring them before importing the JS script or the written code

<?php
    echo '<script type="text/javascript">var main_color = "'.$main_color.'";</script>';
?>

<script type="text/javascript" src="someJSScript.js">
    //If not in separate file, JS code will go here
</script>

answered Dec 29, 2014 at 23:33

ksealey

1,7381 gold badge17 silver badges16 bronze badges

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

2 Comments

Ruben Kazumov Over a year ago

You should include it in right place and read the variable after whole page is loaded, else you may have problems with undefined variable.

Peyovski Over a year ago

Everything I try returns either Uncaught ReferenceError: $templateDir is not defined or Var undetected. I'm pulling my hair out I hate this curly macaroni language mess that is js

Marco Kerwitz · Accepted Answer · 2014-12-29 23:35:41Z

0

Echo the PHP variables you need into Javascript variables inside of your theme files and reference the JS variables inside of your script files.

Theme files:

<script>
    var config_theme_directory = "<?=get_template_directory()?>";
</script>

Included JS file:

console.log( config_theme_directory );

answered Dec 29, 2014 at 23:35

Marco Kerwitz

5,5742 gold badges20 silver badges17 bronze badges

Collectives™ on Stack Overflow

Pass PHP variables to Javascript

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related