Wordpress Javascript File SRC File Path

Question

In my Wordpress site I am using some JavaScript code for an interactive part.

When the file is local I just call anyPlus.src = "solarZoom.png";.

I have tried many ways and can't figure out how to get the image from the file path once it's on my server. I tried /powerbox/Tour/solarZoom.png, ../Tour/solarZoom.png, Tour/solarZoom.png, /Tour/solarZoom.png, /solarZoom.png.

In my style I would call it as "../Tour/solarZoom.png" but it is not working in the javascript.

I have attached an image of my hierarchy. My root is /powerbox/index.php.

enter image description here

nope. I tried /powerbox/Tour/solarZoom.png, ../Tour/solarZoom.png, Tour/solarZoom.png, /Tour/solarZoom.png, /solarZoom.png — BDGapps
– BDGapps, Commented Aug 16, 2013 at 23:29
Interesting. Try messing around with $_SERVER['DOCUMENT_ROOT']."/path"; and other parameters and see what that yields — Sterling Archer
– Sterling Archer, Commented Aug 16, 2013 at 23:31
@BDGapps so your absolute path to the template folder is /wp-content/themes/powerbox ? — Ben
– Ben, Commented Aug 19, 2013 at 3:57
@BDGapps what are the locations of the js and css files you are referring to in your question, according to your file hierarchy? (E.g. for the css file you mentioned "In my style I would call it as..." but you don't indicate the actual css and js files you are referencing the image from in your file hierarchy image). — Werner
– Werner, Commented Aug 21, 2013 at 12:40

Александр Фишер · Accepted Answer · 2013-08-22 13:53:57Z

2

+50

With all the informations I could collect about your problem I can only solve it by this:

Take your index.php - file on the same level where your javascript.js - file is located, add

<script>var ABSPATH = "<?php bloginfo('template_url'); ?>/";</script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/Tour/javascript.js"></script>

into your <head> - tag. Now you have your Template-URL-prefix in the variable ABSPATH. Change your function hotSpotFunc(part) located in here: http://frankfusion.com/powerbox/wp-content/themes/powerbox/Tour/javascript.js on line 24:

anyPlus.src="http://frankfusion.com/powerbox/wp-content/themes/powerbox/"+imgName;

must be now

anyPlus.src=ABSPATH+imgName;

and then it should work without hardcoding the template url as you have it right now.

Worth to mention some other things:

every wordpress theme has a header.php - file where this stuff shall go. Read something about WP Theme Development: http://codex.wordpress.org/Theme_Development
Do not use global variables or global function names as you do right now in your javascript.
make a solid structure in your wordpress - folder. Do you really need a child theme for this project? It looks a bit messy right now.
The current "solution" is a dirty one. Use the advice from @brasofilo, as he showed up a clean solution.

answered Aug 22, 2013 at 13:53

Александр Фишер

1,5771 gold badge12 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

brasofilo Over a year ago

If it was a child theme, I think bloginfo('template_url') wouldn't work, the recommended way is get_stylesheet_directory_uri() as it looks first in the child folder and then in the parent (and it's equivalent to bloginfo('stylesheet_directory')). But looks like it's not a child... Although yours and Seth answers are similar, this one is very complete, kudos for that +1

brasofilo · Accepted Answer · 2013-08-19 15:44:51Z

2

Enqueue your JavaScript using wp_enqueue_scripts and pass the correct URL through wp_localize_script.

Like so:

add_action( 'wp_enqueue_scripts', 'b5f_enqueue_scripts' );

function b5f_enqueue_scripts()
{
    wp_register_script(
        'tour-script', // Handle
        get_stylesheet_directory_uri() . '/Tour/javascript.js', // File url
        array( 'jquery' ) // Dependencies
    );
    wp_enqueue_script( 'tour-script' );
    wp_localize_script( 
        'tour-script', 
        'localize_vars', 
        array( 
            'url' => get_stylesheet_directory_uri(),
            'path' => get_stylesheet_directory(),
            'solar' => get_stylesheet_directory_uri() . '/Tour/solarZoom.png'
        ) 
    );
}

And in your javascript.js file:

jQuery(document).ready(function($) {  
    console.log( localize_vars.url ); 
    $("body").prepend('<img src="'+ localize_vars.solar + '" />');
});

wp_localize_script was created to pass translated strings to JavaScript files, but it can be used to pass anything really. Just fill that array with other data and access it in the JS variable localize_vars.DATA.

edited Aug 19, 2013 at 15:44

answered Aug 19, 2013 at 0:08

brasofilo

26.2k15 gold badges96 silver badges189 bronze badges

7 Comments

BDGapps Over a year ago

So I do: anyPlus.src=localize_vars.url + '/Tour/solarZoom.png'

BDGapps Over a year ago

How would I check? I have a role over that when I hover over it the image enlarges and then changes to solarZoom.png.

BDGapps Over a year ago

I tried: alert(localize_vars.path + '/Tour/solarZoom.png'); and it didn't do anything

BDGapps Over a year ago

I just checked the dev in firefox and received RefrenceError: localize_vars is not defined

brasofilo Over a year ago

@BDGapps, I've updated the Answer including jQuery as a dependency and with a working example. I tested adding wp_enqueue_scripts in TwentyEleven's functions.php file and creating a JS and PNG files inside /wp-content/themes/twentyeleven/Tour/*.*. Works for me, hope it helps.

|

Seth · Accepted Answer · 2013-08-19 15:45:02Z

1

Try this, in your header define this above all scripts that will reference your images....

<script type="text/javascript">
    var ABSPATH = "<?php bloginfo('template_url'); ?>";
</script>

Now when referencing an image do anyPlus.src = ABSPATH + "/Tour/solarZoom.png";

answered Aug 19, 2013 at 15:45

Seth

10.5k10 gold badges50 silver badges69 bronze badges

4 Comments

BDGapps Over a year ago

i get ABSPATH not defined

BDGapps Over a year ago

Seth Over a year ago

Are you putting it above all script tags? This needs to be the very first javascript that loads. I just copy and pasted it into a current project and it's worked perfectly.

Александр Фишер Over a year ago

Wrong order. FIRST you need to declare the variable ABSPATH: <script>var ABSPATH = "<?php bloginfo('template_url'); ?>";</script> <script type="text/javascript" src="<?php bloginfo('template_url'); ?>/Tour/javascript.js"></script> and then you load your javascript.js - file in your index.php. By the way, the clean way would be the answer of brasofilo.

Collectives™ on Stack Overflow

Wordpress Javascript File SRC File Path

3 Answers 3

1 Comment

7 Comments

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

7 Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related