Grow your CSS skills. Land your dream job.

prepending and appending graphics to a header using JQuery in WordPress

  • # May 21, 2013 at 4:26 pm

    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

    < ?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? 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 “”)

    # May 21, 2013 at 5:05 pm

    `< ?php echo get_template_directory_uri(); ?>` 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

    # May 22, 2013 at 4:35 am

    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.

    # May 22, 2013 at 5:11 am

    What errors are you getting when you’re going to the page? It might be that you’ve run into the same issue I did: jQuery in WordPress is in a no-conflict mode (I bet that @traq can explain further, he tends to be able to vocalize what I’m trying to say! =), so `$` doesn’t quite work the same way. Instead, try the following:

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

    $(“h4.beechheader”)
    .prepend(‘‘)
    .append(‘‘);
    });

    If that doesn’t work (IE replacing the `$` with `jQuery`), we’ll probably need to see the code live in some form.

    # May 22, 2013 at 7:55 pm

    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.

    # May 23, 2013 at 2:25 am

    Post it online so we can take a looksie =)

    # May 23, 2013 at 5:54 am

    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

    # May 23, 2013 at 6:20 am

    Alright, I know the problem. =) Or, well, I know where the problem is.

    Pro-tip: Use the tools in the browser. The console of Chrome’s Web Inspector gave me the following error: `Uncaught TypeError: Object [object Object] has no method ‘flexslider’`

    I commented away the call to flexslider, and the prepend/append worked like a charm, which means it was choking on that, a prior issue.

    # May 23, 2013 at 6:40 am

    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.

    # May 23, 2013 at 6:52 am

    yeah, it’s a PITA when you’re staring at code that “should” work, but doesn’t. My first suggestion was, as I mentioned, based on me having had to troubleshoot my own work, trying to figure out why… whatever it was (I honestly don’t remember what exactly it was) wasn’t working in the theme although my static HTML-files had it working perfectly.

Viewing 10 posts - 1 through 10 (of 10 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".