How call php variable in Jquery

Question

I'm converting my static Html website into wordpress and some images don't show. This is because I use Jquery to change the "src" of my image. now in my index.php I added bloginfo('template_url') in every image src. My problem is I don't know how to call it in Jquery.

In my php code it looks like this

  <img src="<?php bloginfo('template_url'); ?>/images/logo-dark.png">

and

in my JS code I access it like this

$("img").attr("src","images/logo-light.png");

How do I call the in JQuery? TYIA

Try $("img").attr("src","<?php bloginfo('template_url'); ?>images/logo-light.png"); — Carl Binalla
– Carl Binalla, Commented Jan 29, 2019 at 6:30

Carl Binalla · Accepted Answer · 2019-01-29 06:31:27Z

1

$("img").attr("src","<?php bloginfo('template_url') ?>images/logo-light.png")

edited Jan 29, 2019 at 6:31

Carl Binalla

5,4315 gold badges31 silver badges49 bronze badges

answered Jan 29, 2019 at 6:30

elraphty

6306 silver badges14 bronze badges

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

Comments

Iftieaq · Accepted Answer · 2019-01-29 06:44:16Z

You can use wp_localize_script which allows you to access php data in JavaScript file.

First register your script using wp_enqueue_script

wp_enqueue_script( 'theme_script', get_template_directory_uri() . '/assets/js/code.js', array( 'jquery' ), '', true );

Then register your php variables to the code.js file.

$phpData = array(
    'logo_dark' => get_template_directory_uri()."/images/logo-dark.png",
);
wp_localize_script( 'theme_script', 'themeObj', $phpData );

Here

theme_script is the name of your javascript WordPress handle which we used on wp_enqueue_script.
themeObj is the name of JavaScript variable which we will use to access to our php data from JavaScript file.
$phpData is an array of the data we wish to serve.

Now can access the logo_dark value using themeObj.logo_dark from your JS file.

$("img").attr("src", themeObj.logo_dark);

For more info, check wordpress codex

Vaibhav singh · Accepted Answer · 2019-01-29 06:33:43Z

0

This may do this :

$("img").attr("src","<?php bloginfo('template_url'); ?>/images/logo-light.png");

answered Jan 29, 2019 at 6:33

Vaibhav singh

1012 silver badges10 bronze badges

1 Comment

user115203 Over a year ago

It displays <?php bloginfo('template_url'); ?> as a text

Muhammad Hasham · Accepted Answer · 2019-01-29 06:41:22Z

0

If you want to use your php function in jQuery block in your .php file then you can use the code which @vaibhav and @elraphty pointed out

$("img").attr("src","<?php bloginfo('template_url'); ?>/images/logo-light.png");

And if you want to use it in .js file then you need to assign a variable in head tag

<script>
   var baseImgurl =  '<?php bloginfo('template_url'); ?>';
</script>

and then use it in .js file

$("img").attr("src",baseImgurl+"/images/logo-light.png");

answered Jan 29, 2019 at 6:41

Muhammad Hasham

2731 gold badge7 silver badges15 bronze badges

Collectives™ on Stack Overflow

How call php variable in Jquery

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related