WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I need to include the path to my theme file within a javascript file. How would I go about this? I have already tried:

var templateUrl = "<?php get_stylesheet_directory_uri(); ?>";

function LightboxOptions() {
  this.fileLoadingImage = "'"+templateUrl+"/img/loading.gif'";
  this.fileCloseImage = "'"+templateUrl+"/img/close.png'";
  this.resizeDuration = 700;
  this.fadeDuration = 500;
  this.labelImage = "Image";
  this.labelOf = "of";

This does not give me the path, but just inserts <?php get_stylesheet_directory_uri(); ?> instead of the actual path. Any ideas? Thanks in advance!

share|improve this question
up vote 14 down vote accepted

What you're looking for is wp_localize_script function.

You use it like this when enqueing script

wp_register_script( 'my-script', 'myscript_url' );
wp_enqueue_script( 'my-script' );
$translation_array = array( 'templateUrl' => get_stylesheet_directory_uri() );
//after wp_enqueue_script
wp_localize_script( 'my-script', 'object_name', $translation_array );

In your style.js, there is going to be:

var templateUrl = object_name.templateUrl;
share|improve this answer
Thanks this worked like a charm! – charlenemasters Mar 7 '13 at 11:30

These are the following two ways to add theme path in javascript file.

1) You can use wp_localize_script() suggested by wordpress in your functions.php file. This will create a Javascript Object in the header, which will be available to your scripts at runtime.

Example :


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

and can use in your js file as following :


2) You can create a Javascript snippet that saves the template directory uri in a variable, and use it later as following: Add this code in header.php file before the js file in which you want to use this path. Example:

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

and can use in your js file as following :

share|improve this answer
wp_localize works! I tried the 2nd approach, too, but I didn't manage to make it work. wp_localize works is probably better practice, no? – charlenemasters Mar 7 '13 at 11:31
@charlenemasters to make the second approach work the order of declaring variable and accessing it is very important. – Vinod Dalvi Mar 7 '13 at 11:33

You can localize your javascript files, wich gives you the opportunity to generate a javascript array filled with PHP defined values (such as localisation or directories).

If you load your javascript file trough wp_enqueue_script or wp_register_script its easy to set up like follows:

function localize_vars() {
    return array(
        'stylesheet_directory' => get_stylesheet_directory_uri()

wp_enqueue_script( 'my_script', plugins_url( 'my_plugin/my_script.js' ), array( 'jquery' ) );
wp_localize_script( 'my_script', 'my_unique_name', localize_vars() );

And in your javascript files, you can call these variables by:

share|improve this answer

If the javascript file is loaded from the admin dashboard, you can use this javascript function get the root of your WordPress installation.

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

Then just contact the path to your theme like below.

var myThemePath = getHomeUrl() + '/wp-content/themes/myTheme';
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.