I am currently building a WordPress theme where I am using jQuery to append and prepend some ornate images to a h4 tag with a class of beechheader in the page template markup.

Before turning the static html files into a WordPress theme, the code below worked great. The code is in a separate file called test.js

The jQuery code appears to be enqueued correctly in the functions file and I have called the test.js code using

<script src="<?php bloginfo('template_directory'); ?>/javascripts/whatever.js"></script>

right before the closing body tag. Here is the code that worked fine statically but now doesnt work

 // prepend some images to the headers
$(function() {

    .prepend('<img src="/images/beechleft.gif" alt="" />')
    .append('<img src="/images/beechright.gif" alt="" />');

I tried adding

<?php echo get_template_directory_uri(); ?>

before the trailing slash before images as you would in the html file. My research leads me to believe jQuery files may need to be handled a bit differently but I am unsure of the syntax or what to do. Can anyone help?

2 Answers 2


well first of all, don't directly inject a script tag like that, use wp_enqueue_script to add your javascript file. additional data can then be passed from php to javascript via the wp_localize_script function.

function wpa_scripts() {
        get_template_directory_uri() . '/js/script.js',
    $script_data = array(
        'image_path' => get_template_directory_uri() . '/images/'
add_action( 'wp_enqueue_scripts', 'wpa_scripts' );
  • For those who need to know, additionally you can then access the object like wpa_data.image_path in your js file.
    – Leo Fisher
    Jun 8, 2022 at 22:45

Use wp_localize_script to add a Javascript variable to the page.

function set_js_var() {
  $translation_array = array( 'template_directory_uri' => get_template_directory_uri());
  wp_localize_script( 'jquery', 'my_data', $translation_array );

You need to "register" that data to a script that has already loaded. That is why I used jquery which is the handle used when WordPress loads its bundled jquery library, but it can be any script handle that loads on the page. See the Codex for details.

Search your page source and you should see your data.

You should be able to access the Javascript variable with my_data.template_directory_uri. For example,

function test_var() {
  echo '<script type="text/javascript">alert(my_data.template_directory_uri);</script>';

I shouldn't really be shoving a script into the footer like that (rather than enqueue it) but this is just for testing. Presumably you already have a properly enqueued script that you will use this in.

So you will want something like ...

.prepend('<img src="' + my_data.template_directory_uri + '/images/beechleft.gif" alt="" />'); 
  • You can add it to your theme's functions.php. That should be all you need. The code above is already attached to an appropriate hook, and since you say jquery is already loading it should work (so long as jQuery is registered with the jquery handle the way WordPress does by default). If it fails to load add a priority to it like: add_action('wp_enqueue_scripts','set_js_var', 100); Milo's code would load the data based on some other script that you yourself register, which is a valid approach if you are loading other scripts.
    – s_ha_dum
    May 21, 2013 at 17:59
  • The code works for me-- your code from the comment above works for me unaltered. It has to be the way you've pasted it. Be very careful that you don't create a syntax error.
    – s_ha_dum
    May 21, 2013 at 18:26
  • Argh... that semicolon shouldn't have been there. My fault. I edited the answer.
    – s_ha_dum
    May 21, 2013 at 20:23
  • @JonathanBeech : See the edit
    – s_ha_dum
    May 22, 2013 at 13:37
  • I believe I'm making progress, when viewing source the whatever.js file is enqueued and shows up in the footer ok, I try your script which echos an alert box which echos the correct path to the theme which is good. For some reason when I attempt to add the .prepend('<img src="' + my_data.template_directory_uri + '/images/beechleft.gif" alt="" />'); The my_data variable isnt getting parsed, is this a syntax issue? I definately copied and pasted ok May 22, 2013 at 23:21

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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