get template directory uri in Jquery and CSS

0 votes

I am trying to use get_template_directory_uri() to load images to a jquery.backstretch.js file and to my styles.css as well. So far, I added my images directly in the theme folder in a folder named "img" and I have used this for my HTML:

 <img src="<?php echo get_template_directory_uri(); ?>/img/logoyellow.png" class="hidden-xs" alt="logo" />

That worked fine!

But I did the following in a jquery file (jquery.backtretch.js):

  $(document).ready(function () {
       $("#home-section").backstretch("<?php echo get_template_directory_uri(); ?>/img/background-image2.jpg");
   });

But no cigar :( I also wold like to know how to load it in my CSS. Something like this:

  #milestones-section {
      background: url('<?php echo get_template_directory_uri(); ?>/img/hbg.jpg') center center;
  }

Thanks in advance!

May 31 in JQuery by Edureka
• 13,640 points
109 views

1 answer to this question.

0 votes

JS files aren't parsed by PHP, so you won't get access to functions like get_template_directory_uri().

The Quick and Dirty Way

You can make that available to Javascript by putting something like this in the <head> of each page:

<script>
    theme_directory = "<?php echo get_template_directory_uri() ?>";
</script>

The Right Way

You should probably load js in the correct Wordpress manner, using wp_register_script() and/or wp_enqueue_script(). If you do that, you can use the Wordpress function wp_localize_script() and make whatever information you like available to that script.

answered Jun 2 by Edureka
• 13,640 points

Related Questions In JQuery

0 votes
1 answer

difference between $ and $() in jQuery

JavaScript: It is a major scripting programming language ...READ MORE

answered Jun 10 in JQuery by rajatha
• 7,040 points
18 views
0 votes
1 answer
0 votes
1 answer

Difference between :hidden and :not(:visible) in jQuery

During animations that hide an element, the ...READ MORE

answered Jun 14 in JQuery by gaurav
• 17,580 points
21 views
0 votes
1 answer

How to add and remove classes in Javascript without jQuery

To add or remove a class on ...READ MORE

answered Jun 14 in JQuery by rajatha
• 7,040 points
10 views
0 votes
1 answer

How to shorten repeating code with html function and return tags in jquery

Firstly note that replace() only accepts two arguments, the ...READ MORE

answered Jun 15 in JQuery by rajatha
• 7,040 points
28 views
0 votes
1 answer

jQuery .slideUp() and .slideDown() equivalent in Angular2

In order to create a custom slideUp/Down ...READ MORE

answered Jun 16 in JQuery by rajatha
• 7,040 points
28 views
0 votes
1 answer

How to pass parameters in GET requests with jQuery?

Hello, Here is the syntax using jQuery $.get $.get(url, data, ...READ MORE

answered Apr 28, 2020 in JQuery by Niroj
• 82,740 points
25,564 views
0 votes
1 answer

How to set cache false for getJSON in jQuery?

Hello @kartik, Your code just needs a trigger ...READ MORE

answered May 12, 2020 in JQuery by Niroj
• 82,740 points
276 views
0 votes
1 answer

addClass and removeClass in jQuery - not removing class

What happens is that your close button ...READ MORE

answered Jun 2 in JQuery by Edureka
• 13,640 points
195 views
0 votes
1 answer

How to change color of SVG image using CSS (jQuery SVG image replacement)?

Edit your SVG file, add fill="currentColor" to ...READ MORE

answered Jun 1 in JQuery by Edureka
• 13,640 points
294 views
webinar REGISTER FOR FREE WEBINAR X
Send OTP
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP