ruta del tema en archivo javascript

Estas son las dos siguientes formas de agregar la ruta del tema en un archivo JavaScript.

1) Puedes usar wp_localize_script() sugerido por WordPress en tu archivo functions.php. Esto creará un objeto JavaScript en el encabezado, que estará disponible para tus scripts durante la ejecución.

Ejemplo:

wp_register_script('custom-js',get_stylesheet_directory_uri().'/js/custom.js',array(),NULL,true);
wp_enqueue_script('custom-js');

$wnm_custom = array( 'stylesheet_directory_uri' => get_stylesheet_directory_uri() );
wp_localize_script( 'custom-js', 'directory_uri', $wnm_custom );

y puedes usar en tu archivo js de la siguiente manera:

alert(directory_uri.stylesheet_directory_uri); 

2) Puedes crear un fragmento de JavaScript que guarde la uri del directorio de la plantilla en una variable, y usarla más tarde de la siguiente manera: Agrega este código en el archivo header.php antes del archivo js en el que quieras usar esta ruta. Ejemplo:

<script type="text/javascript">
var stylesheet_directory_uri = "<?php echo get_stylesheet_directory_uri(); ?>";
</script>

y puedes usar en tu archivo js de la siguiente manera:

alert(stylesheet_directory_uri);

Puedes localizar tus archivos JavaScript, lo que te da la oportunidad de generar un array en JavaScript lleno con valores definidos en PHP (como localización o directorios).

Si cargas tu archivo JavaScript a través de wp_enqueue_script o wp_register_script es fácil configurarlo de la siguiente manera:

function localize_vars() {
    return array(
        'stylesheet_directory' => get_stylesheet_directory_uri() // Devuelve la URL del directorio del tema actual
    );
}

wp_enqueue_script( 'my_script', plugins_url( 'my_plugin/my_script.js' ), array( 'jquery' ) ); // Encola el script con dependencia de jQuery
wp_localize_script( 'my_script', 'my_unique_name', localize_vars() ); // Localiza las variables para el script

Y en tus archivos JavaScript, puedes llamar estas variables mediante:

my_unique_name.stylesheet_directory

Empecé a usar este práctico método para obtener el directorio del tema de WordPress y almacenarlo como una variable global de JavaScript (todo desde un archivo JavaScript):

function getThemeDir() {
    var scripts = document.getElementsByTagName('script'),
        index = scripts.length - 1,
        myScript = scripts[index];

    return myScript.src.replace(/themes\/(.*?)\/(.*)/g, 'themes/$1');
}
themeDir = getThemeDir();

Esto solo funcionará si se cumplen las siguientes condiciones:

    1. Este fragmento se ejecuta mediante un archivo JavaScript externo - así:

<script src="/wp-content/themes/nombredeltema/assets/app.js"></script>

    2. El archivo js reside dentro del directorio de tu tema (o subdirectorio).

Así es como lo hice.

Coloca el archivo javascript y las imágenes en theme-folder/assets

Y edita los siguientes archivos.

En functions.php

/* para javascript (solo cuando se usa tema hijo) */
wp_enqueue_script('my-script', get_template_directory_uri() . '-child/assets/test.js');
wp_localize_script('my-script', 'myScript', array(
    'theme_directory' => get_template_directory_uri() 
));

En tu archivo javascript

var url = myScript.theme_directory + '-child/assets/';

Si el archivo javascript se carga desde el panel de administración, puedes usar esta función javascript para obtener la raíz de tu instalación de WordPress.

function getHomeUrl() {
  var href = window.location.href;
  var index = href.indexOf('/wp-admin');
  var homeUrl = href.substring(0, index);
  return homeUrl;
}

Luego simplemente concatena la ruta a tu tema como se muestra a continuación.

var myThemePath = getHomeUrl() + '/wp-content/themes/myTheme';