How can I add Wordpress php code into JavaScript

Question

I have the following javascript code:

$(window).scroll(function() {
    if($(this).scrollTop() > 50)  /*height in pixels when the navbar becomes non opaque*/ 
    {
        $('.navbar-default').addClass('sticky');
        $('.navbar-brand img').attr('src','assets/images/logo.png'); //change src
    } else {
        $('.navbar-default').removeClass('sticky');
        $('.navbar-brand img').attr('src','assets/images/logo__footer.png')

    }
});

Is it possible to insert a wp custom php code

<?php the_custom_logo(); ?>

Instead of this static attribute

.attr('src','assets/images/logo.png');

Many thanks in advance.

Is this javascript created as part of a php script or is it in a .js file that you link in to the page — RiggsFolly
– RiggsFolly, Commented Oct 18, 2018 at 8:36

Vasyl Zhuryk · Accepted Answer · 2018-10-18 08:41:24Z

5

You need to set variable in template:

<script>
    var logoImage = <?php the_custom_logo(); ?>;
    var logoImageFooter = <?php the_custom_logo()?> //here footer logo
</script>

and than, in your js file use it

$(window).scroll(function() {
    if($(this).scrollTop() > 50)  /*height in pixels when the navbar becomes non opaque*/ 
    {
        $('.navbar-default').addClass('sticky');
        $('.navbar-brand img').attr('src',logoImage); //change src
    } else {
        $('.navbar-default').removeClass('sticky');
        $('.navbar-brand img').attr('src',logoImageFooter)

    }
});

answered Oct 18, 2018 at 8:41

Vasyl Zhuryk

1,25810 silver badges24 bronze badges

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

3 Comments

Jamdev Over a year ago

Hi @vasyl-zhuryk , thank you so much. Could you, please, let me know in what exact template I have to set variable?

Vasyl Zhuryk Over a year ago

@Jamdev Now, I don't have wordpress server, and can't see the file. But you can find it by yourself. html file in your module, which is loading with your js file

Jamdev Over a year ago

Much appreciate!

Shaze · Accepted Answer · 2018-10-18 08:49:47Z

Your Js code:

$(window).scroll(function() {
    if($(this).scrollTop() > 50)  /*height in pixels when the navbar becomes non opaque*/ 
    {
        $('.navbar-default').addClass('sticky');
        $('.navbar-brand img').attr('src','custom_logo.png'); //change src
    } else {
        $('.navbar-default').removeClass('sticky');
        $('.navbar-brand img').attr('src','logo_footer.png')

    }
});

HTML code:

<?php $customLogo= 'custom_logo'; ?>
<?php $footerLogo= 'footer_logo'; ?>
<html>
  <body>
    <script type="text/javascript">  
      // notice the quotes around the ?php tag         
      var customLogo="<?php echo $customLogo; ?>";
      var footerLogo="<?php echo $footLogo; ?>";
      alert(customLogo);
      alert(footerLogo);
    </script>
  </body>
</html>

Ravi Patel · Accepted Answer · 2018-10-18 09:45:39Z

IF you need jquery with php code input then wp_localize_script() function. More information

 var logoImage = <?php the_custom_logo(); ?>;
var logoImageFooter = <?php the_custom_logo()?> //here footer logo

// Register the script
wp_register_script( 'some_handle', 'path/to/myscript.js' );

// Localize the script with new data
$translation_array = array(
    'logo_image' => the_custom_logo(),
    'logo_image_footer' => the_custom_logo()'
);
wp_localize_script( 'some_handle', 'object_name', $translation_array );

// Enqueued script with localized data.
wp_enqueue_script( 'some_handle' );

You can access the variables in JavaScript as follows:

    <script>
        alert( object_name.logo_image);
        alert( object_name.logo_image_footer);
    </script> 


 $('.navbar-brand img').attr('src',object_name.logo_image); //change src

Collectives™ on Stack Overflow

How can I add Wordpress php code into JavaScript

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related