Take the 2-minute tour ×
WordPress Development Stack Exchange is a question and answer site for WordPress developers and administrators. It's 100% free, no registration required.

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() {

$("h4.beechheader")
    .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?

share|improve this question
add comment

2 Answers

up vote 2 down vote accepted

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() {
    wp_enqueue_script(
        'wpa_script',
        get_template_directory_uri() . '/js/script.js',
        array('jquery'),
        null,
        true
    );
    $script_data = array(
        'image_path' => get_template_directory_uri() . '/images/'
    );
    wp_localize_script(
        'wpa_script',
        'wpa_data',
        $script_data
    );
}
add_action( 'wp_enqueue_scripts', 'wpa_scripts' );
share|improve this answer
add comment

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 );
}
add_action('wp_enqueue_scripts','set_js_var');

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>';
}
add_action('wp_footer','test_var',1000);

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="" />'); 
share|improve this answer
    
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 '13 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 '13 at 18:26
    
Argh... that semicolon shouldn't have been there. My fault. I edited the answer. –  s_ha_dum May 21 '13 at 20:23
    
@JonathanBeech : See the edit –  s_ha_dum May 22 '13 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 –  Jonathan Beech May 22 '13 at 23:21
show 2 more comments

Your Answer

 
discard

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.