Including PHP in .JS file

Question

Before anyone says this should be on the Wordpress Stackexchange, please read through as this is a JS query and not a Wordpress query. I am trying to get a path to the Wordpress theme in to a JS file so I don't have to include the full path, would usually use <?php bloginfo('template_url'); ?> in the template files but obviously we are working in a JS file here.

I have found a forum post that says to use the following before the JS file is called for:

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

and then in the JS file put template_url but this just puts 'template_url' in the middle of the path.

The line this is to go in is:

$(this).prev().css({ backgroundImage : 'url(template_url/images/icons/menu-divider.png)' });

How can I please get the full path to be called in this line of JS?

Many thanks Adrian

@Quentin how is that a duplicate? The question title may be similar but the actual question is not. — Halcyon, Oct 09 '15 at 13:49
@Halcyon — The question is asking how to use the variable `template_url` in a string, and the attempt looks like: `'url(template_url/images/icons/menu-divider.png)'` — Quentin, Oct 09 '15 at 13:50
I am asking how I am meant to put the variable 'template_url' in to the file to make it get the actual template URL as I don't know Javascript. — Adrian, Oct 09 '15 at 13:51
@Adrian, if you mean in the js file the answer is you can't. You can't use PHP in an external js file. — Ionut Necula, Oct 09 '15 at 13:52
@Ionut I know I cant' I said this in the question, please read properly, hence i've defined the variable in PHP before the JS file is loaded. — Adrian, Oct 09 '15 at 13:53
And now you want to put that variable in a string … which is what the duplicate question is all about. — Quentin, Oct 09 '15 at 13:54
Looking at the page @Quentin linked my question to, would this work? `$imageurl = template_url + "images/file.png";` — Adrian, Oct 09 '15 at 13:55
$(this).prev().css({ backgroundImage : "url(template_url/images/icons/menu-divider.png)" }); — Ionut Necula, Oct 09 '15 at 13:56
No, because you want to end up with is `{ backgroundImage : 'url(SOMETHING/images/icons/menu-divider.png)' }` not `$imageurl = "SOMETHINGimages/file.png";` — Quentin, Oct 09 '15 at 13:56
@Ionut — No. That line is in a .js file. It won't be passed through the PHP compiler. — Quentin, Oct 09 '15 at 13:57
@Quentin I was thinking along these lines: `$imageurl = template_url + "/images/file.png";` `$(this).prev().css({ backgroundImage : 'url($imageurl)' });` — Adrian, Oct 09 '15 at 13:58
$(this).prev().css({ backgroundImage : 'url(' + template_url + '/images/icons/menu-divider.png)' }); — Ionut Necula, Oct 09 '15 at 13:58
@Adrian — So now you are trying to put a variable called `$imageurl` into the string `'url($imageurl)'`, which gives you the same problem just with a different variable name. — Quentin, Oct 09 '15 at 13:59
I know vey little about javascript, I just need to know how to turn the 'var template_url' in to the actual template URL in the JS file. — Adrian, Oct 09 '15 at 14:02
@Adrian — You now know all the JavaScript you need to know to solve this problem. You just need to apply a little logic to it. — Quentin, Oct 09 '15 at 14:03

score -1 · Answer 1 · answered Oct 09 '15 at 13:53

-1

Using this function returns what you're looking for get_template_directory_uri()

So, do this

<script type="text/javascript"><!--
var template_url = "<?php echo get_template_directory_uri(); ?>";
// -->
</script>

answered Oct 09 '15 at 13:53

James John

409
2
11

Including PHP in .JS file

1 Answers1