prepending and appending graphics to a header using JQuery in WordPress

[JonathanBeech]

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. This idea was based on something I saw when Chris Coyier was creating the website for [http://kailinyong.com](http://kailinyong.com/ “”)

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

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(‘‘)
.append(‘‘);
});
I tried adding

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? At Stackoverflow they spoke of using the wp_localize_script but I’m very unsure of the syntax and how Chris originally did this technique when he took it to WordPress. Any ideas. Here are the Stackoverflow suggestions. [stackoverflow question](http://wordpress.stackexchange.com/questions/100230/adding-the-full-image-path-to-a-wordpress-javascript-file “”)

[Alen]

`` this is wrong

it should be:

`whatever.js` would be located in `javascript` folder in your theme directory.

Here’s a [most basic template using HTML5 Boilerplate](https://github.com/alenabdula/clean_wp/), I wrote for someone on these forums… See if you can get some helpful tidbits. -Alen

[JonathanBeech]

Hi Alen

Sorry I didn’t notice that I hadn’t copied all the code into the code section of my original question. My code actually mirrors yours. What I am looking for help with is how to implement the JQuery code which is located in the whatever.js file into a wordpress theme without the need for hard coding the entire path to the image.

When Chris did his talk many screencasts ago about adding frillies graphics to the headers using javascript, he did that on the static template before theming it in WordPress and never told us how to implement the javascript within the actual wordpress theme itself.

Hope my explanation is clear and I can get to the bottom of this.

[JonathanBeech]

Thanks for the thoughts. I believe the wp_localize_script function built into wordpress is the way to go on this issue according to the answers to the [stackoverflow.com question](http://wordpress.stackexchange.com/questions/100230/adding-the-full-image-path-to-a-wordpress-javascript-file “”) that I asked which is regarding the same issue.

wp_localize_script takes an array of data (in PHP) spits out a javascript. It’s a way for you to add dynamic data for a specific script to the front end

So when i view source in the browser I see the javascript variable data code at the footer which is what is output by the wp_localize_script function: I also enqueued the file correctly which immediately follows the data code.

If I echo an javascript alert box and insert the my_data javascript variable into the alert then hook that into the wp_footer function, the alert box returns the path to the theme which is just what I need.

However when I attempt to add the javascript variable to the jQuery function it doesnt bring the images in and on viewing the source of the whatever.js file, there is no way of telling if the my_date variable has been parsed? So I’m stuck and its one of those annoying things that would be nice to solve.

I can post the site somewhere live and would be grateful for some ideas.

[JonathanBeech]

Many thanks Melindrea.

My site is at [http://sandpit.jonathanbeech.co.uk/](http://sandpit.jonathanbeech.co.uk/ “”)

Would you need to log into the WordPress admin area to view the functions.php file where the wp_localised_script does its stuff? I can supply those if needed.

If you view the source file of the sandpit page, there is a my data variable enclosed in some

[JonathanBeech]

Thank you so much for that, you’re a star! I would get you a drink or two if you were here.

I got rid of the redundant code and it works great for me too, I imagine you are aware of how such issues can be grating for us developers. Its been a good learning experience troubleshooting this code, ie look at the console!

I will make this a topic for my blog when I get it running. The wp_localize_script posts I found on line seemed to be aimed more towards plugin developers.

[Author]

Posts