Pasar variables de PHP a JavaScript en WordPress

Cuando estamos realizando desarrollos personalizados en WordPress, a veces necesitaremos para pasar variables desde PHP a JavaScript. Esto es especialmente interesante cuando queremos hacer uso de las funciones que la herramienta nos suministra, como podría ser conocer la ruta del tema con get_template_directory_uri(), pero a cuyos resultados no podemos llamar directamente desde un archivo JavaScript. Para ello tenemos a nuestra disposición la función wp_localize_script(), la cual nos permitirá añadir variables de PHP a un archivo JavaScript enlazado en WordPress.

Imaginemos que estamos creando un tema y en uno de los archivos PHP hemos definido una variable llamada $precio que queremos pasar a un archivo JavaScript y que estará enlazado a nuestro WordPress. Para ello, usarás la función wp_localize_script() de un modo similar a lo siguiente:

wp_localize_script(
    'nombre-script', // Script al que se quiere añadir la variable
    'nombre-variable', // Variable que se va a crear en JavaScript
    array(
        'precio' => $precio // Valor de la variable PHP que se va a pasar a JavaScript
    )
);

Si te fijas, primero indicamos el nombre del script donde trabajaremos, luego asignamos el nombre de la variable JavaScript (que será un objeto) y luego en un array el valor o valores que contendrá el objeto. Esto último nos permite más flexibilidad si necesitamos pasar más de un valor.

Una vez realizado lo anterior, podrás acceder a la variable de PHP en el archivo JavaScript utilizando el nombre que le hayas dado en la función. Por tanto, siguiendo el ejemplo anterior, podrías acceder al valor de la variable PHP de la siguiente manera:

var precio = nombre-variable.precio;

Ten cuenta que la función wp_localize_script() debe utilizarse después de haber enlazado el script en el tema de WordPress o no funcionará. Esto lo haremos normalmente en el archivo functions.php de tu tema con la funcion wp_enqueue_script().