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, 2022 in JQuery by Edureka
• 13,690 points
2,633 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, 2022 by Edureka
• 13,690 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, 2022 in JQuery by rajatha
• 7,680 points
560 views
0 votes
1 answer

How to get all css properties and events of a html element with jquery or other libraries?

You can get the computed value of ...READ MORE

answered Jun 14, 2022 in JQuery by gaurav
• 23,260 points
1,094 views
0 votes
1 answer

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

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

answered Jun 14, 2022 in JQuery by gaurav
• 23,260 points
781 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, 2022 in JQuery by rajatha
• 7,680 points
997 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, 2022 in JQuery by rajatha
• 7,680 points
985 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, 2022 in JQuery by rajatha
• 7,680 points
643 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,840 points
43,984 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,840 points
1,017 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, 2022 in JQuery by Edureka
• 13,690 points
10,894 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, 2022 in JQuery by Edureka
• 13,690 points
22,192 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP