How to add JavaScript to WordPress PHP file?

Question

I would like to reference JavaScript files from my root folder in a WordPress PHP file, however when I load the page, the JavaScript is being ignored. Is there a WordPress restriction on referencing .js files? Am I not correctly referencing JavaScript for PHP?

This is what I wrote (which does not work):

<?php wp_footer(); ?>
<script src="/files/js/jquery.js" type="text/javascript"></script>
<script src="/files/js/jquery.cycle.js" type="text/javascript"></script>
</body>
</html>

That should be the way to reference a JS-file. If you look at the generated source, does this actually get outputed to source? If you look in the browser devtools, and look at the network traffic as you reload the page, are the JS-files among the files in the list of files that has been loaded? — Christofer Eliasson
– Christofer Eliasson, Commented Mar 15, 2013 at 8:56
have you tried using absolute paths? maybe your site can't find your files. — rgin
– rgin, Commented Mar 15, 2013 at 8:59
Tutorial to wp_enqueue: halfelf.org/2012/jquery-why-u-no-enqueued — janw
– janw, Commented Mar 15, 2013 at 9:41

user850010 · Accepted Answer · 2013-03-15 09:37:40Z

3

For jQuery I use this technique Loading The Latest Version of jQuery in WordPress

Basically you use wp_enqueue_script function in functions.php.

For scripts where I want to simply add them in the template files and don't want to bother with wp_enqueue_script, I put them in scripts folder that was created in the theme folder. I add All custom added .js scripts there.

Then in the template file I use the code like this:

<script type="text/javascript" src="<?=get_template_directory_uri();?>/scripts/markers.js"></script>

edited Mar 15, 2013 at 9:37

answered Mar 15, 2013 at 9:20

user850010

6,37912 gold badges43 silver badges60 bronze badges

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

1 Comment

Chirag Over a year ago

If we are using a child theme, do we need a different scripts folder within child theme folder? Or can we add the script to parent theme script folder?

Ahmad Sharif · Accepted Answer · 2014-02-14 16:46:25Z

2

Wordpress has its own method to add js or css files.

<?php
function my_scripts_loader() {
    wp_enqueue_script( 'my-js', 'filename.js', false );
}
add_action( 'wp_enqueue_scripts', 'my_scripts_loader' );
?>

answered Feb 14, 2014 at 16:46

Ahmad Sharif

4,4536 gold badges40 silver badges51 bronze badges

Comments

Vikas Gautam · Accepted Answer · 2013-03-15 09:08:45Z

1

Put your files folder to your wordpress theme which you are curently useing after that just need to

include the path on header.php file like

<script src="<?php bloginfo('template_directory'); ?>/files/js/jquery-min.js" type="text/javascript"></script>

hope this will help you ....

answered Mar 15, 2013 at 9:08

Vikas Gautam

9788 silver badges25 bronze badges

Comments

Adib Aroui · Accepted Answer · 2013-04-13 11:26:04Z

1

WordPress got a various number of ways to include file, I myself have worked with WordPress in the early days, back then I had to call the path with a WordPress function.

Example: <script src="<?php echo bloginfo('template_directory'); ?>/files/js/jquery.js" type="text/javascript"></script> //add echo

You might want to var_dump the bloginfo('template_directory') and work your way from there.

edited Apr 13, 2013 at 11:26

Adib Aroui

5,0656 gold badges45 silver badges95 bronze badges

answered Mar 15, 2013 at 8:59

Jeremy

534 bronze badges

2 Comments

Rolice Over a year ago

His files are not in template directory as far as I see /files/js/..

elclanrs Over a year ago

get_template_directory_uri()

Collectives™ on Stack Overflow

How to add JavaScript to WordPress PHP file?

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related