Use a PHP variable from a php file in a javascript file

JavaScript
1

Hi,
I want to use a PHP variable from a php file in a javascript file. I found several methods on the Net but nothing works.

It would be great if you could help me.

Thanks in advance.

Best regards

Albert

2

Welcome to the forums @albertkastl

What have you tried that’s not worked?

3

For example I’ve loaded into the PHP file an external JS file with the content

var puzzlemin = '<?php echo $puzzlemin?>';

and used then puzzlemin in the JS file.

4

I think some example code of that would be helpful

For instance a simple test, this works

<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>Document</title>
</head>
<body>
  <?php
    $x = 5;
  ?>
<script>
  const x = <?php echo $x ?>;
  console.log('X is', x) // X is 5
</script>
</body>
</html>
1 Like
5

It’s going to be the same thing, except that what you’d have to do to make it external is to make your ‘JS file’ a .php file.

6

Thanks rpg_digital. But this is in ONE file.

To be more precise:
I loaded in the PHP file with “wp_enqueue_script” the mentioned JS file AND another JS file in which I wanted to use the PHP variable.

I wanted to change a Wordpress plugin. Therefore I have to use the separate JS file.

7

JS.php

<?php $x = 5; ?>
const x = <?= $x ?>;
console.log(x);

index.php (or .html)

<html>
<head>
<script src='JS.php'></script>
...

Your browser wont care what the extension of the file is - but the server does.

1 Like
8

With wp_enqueue_script() this is a slightly different matter though as you probably want access to variables defined within your wordpress instance, not just any PHP script floating around. The “wordpress way” to do this is using wp_localize_script() – as the name suggests, it’s actually intended for localization but can be used to expose any objects to your JS, for instance from your functions.php:

wp_enqueue_script('my-script', get_template_directory_uri() . '/js/my-script.js');
wp_localize_script('my-script', 'something', ['foo' => 'bar']);

Then in my-script.js:

/* global something */
console.log(something) // -> { foo: 'bar' }

Under the hood this does the same as in the examples already given, it defines a global variable on the window object – but only if the given script is actually getting enqueued, and it leaves the nasty <?php echo ... ?> inside JS to the wp internals. :-)

1 Like
9

Thanks m3g4p0p for the detailed help. :slightly_smiling_face:

But for me as a beginner who tries to customize a Wordpress plugin, all the connections Wordpress, Php, Javascript, CSS are very confusing. So, please be patient with me.

Could you please explain what I have to put in “something” and inside the brackets in

wp_localize_script('my-script', 'something', ['foo' => 'bar']);
1 Like
10

The 2nd argument is the variable name for your JS, and the 3rd argument (with the brackets) is an associative array with the data that will be assigned to that variable as a JS object. Here’s a somewhat more elaborate example:

$name = 'John';
$age = 42;

wp_localize_script('my-script', 'person', [
	'name' => $name,
	'age' => $age
]);

my-script.js

/* global person */
alert(person.name + ' is ' + person.age + ' years old')
11

And when in ‘my-script’ I have

var puzzlemin = '<?php echo $puzzlemin?>';

how would then ‘wp_localize_script’ look like?

12

Pass $puzzlemin the same way as $name or $age in the above example, and it will be available as a property of the object with the provided name… say

PHP

wp_localize_script('my-script', 'puzzleData', ['puzzlemin' => $puzzlemin]);

JS

console.log(puzzleData.puzzlemin)
1 Like
13

Thanks a lot m3g4p0p! :+1:

1 Like
14

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.