theme development - How to properly add and access a JavaScript file in Wordpress?

admin管理员组

文章数量:1023782

I intend to use a JavaScript library on my WP website and have uploaded the JS file via FTP to the following directory belonging to the currently activated theme Salient: /public_html/wp-content/themes/salient/js

Then, in order to load the JavaScript, I have added the following line in the "Header and Footer" settings (to be injected before the body closing tag):

<script type="text/javascript" src=".../public_html/wp-content/themes/salient/js/javascriptfile.js"></script>

When I am then loading a page and when inspecting it using the Chrome console, there's a 404 error for that JS file, although the file and the directory exist. As an alternative approach I also tried to add the script reference directly in HTML and even the page template, but with the same result.

Why do I keep getting the 404 error? Thanks for your help.

I intend to use a JavaScript library on my WP website and have uploaded the JS file via FTP to the following directory belonging to the currently activated theme Salient: /public_html/wp-content/themes/salient/js

Then, in order to load the JavaScript, I have added the following line in the "Header and Footer" settings (to be injected before the body closing tag):

<script type="text/javascript" src="https://www.mypage.../public_html/wp-content/themes/salient/js/javascriptfile.js"></script>

When I am then loading a page and when inspecting it using the Chrome console, there's a 404 error for that JS file, although the file and the directory exist. As an alternative approach I also tried to add the script reference directly in HTML and even the page template, but with the same result.

Why do I keep getting the 404 error? Thanks for your help.

• theme-development
• javascript
• page-template

Share Improve this question asked Apr 13, 2019 at 18:13 F.MarksF.Marks 12333 bronze badges 3

• 2 developer.wordpress/themes/basics/including-css-javascript – norman.lol Commented Apr 13, 2019 at 18:17
• Thanks, but how does this address my question: what is wrong with the approach as I describe it, i.e. by using the Header & Footer plugin? collectiveray/wp/tips/add-javascript-to-wordpress – F.Marks Commented Apr 13, 2019 at 18:44
• 1 @F.Marks, you are providing invalid url for src attribute and result is 404 error. It should be something like <script type="text/javascript" src="https://www.mypage/wp-content/themes/salient/js/javascriptfile.js"></script> . – Qaisar Feroz Commented Apr 13, 2019 at 19:18

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You should enqueue your script using

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

Where,
$handle is the name for the script.

$src defines where the script is located.

$deps is an array that can handle any script that your new script depends on, such as jQuery.

$ver lets you list a version number.

$in_footer is a boolean parameter (true/false) that allows you to place your scripts in the footer of your HTML document rather then in the header, so that it does not delay the loading of the DOM tree.

Documentation

Add this code to functions.php file of your theme.

function add_my_script() {

  wp_enqueue_script( 'my-script', 
         get_template_directory_uri() . '/js/javascriptfile.js', 
         array ( 'jquery' ), 
         false,
         true
  );

}
add_action( 'wp_enqueue_scripts', 'add_my_script' );

I intend to use a JavaScript library on my WP website and have uploaded the JS file via FTP to the following directory belonging to the currently activated theme Salient: /public_html/wp-content/themes/salient/js

Then, in order to load the JavaScript, I have added the following line in the "Header and Footer" settings (to be injected before the body closing tag):

<script type="text/javascript" src=".../public_html/wp-content/themes/salient/js/javascriptfile.js"></script>

When I am then loading a page and when inspecting it using the Chrome console, there's a 404 error for that JS file, although the file and the directory exist. As an alternative approach I also tried to add the script reference directly in HTML and even the page template, but with the same result.

Why do I keep getting the 404 error? Thanks for your help.

I intend to use a JavaScript library on my WP website and have uploaded the JS file via FTP to the following directory belonging to the currently activated theme Salient: /public_html/wp-content/themes/salient/js

Then, in order to load the JavaScript, I have added the following line in the "Header and Footer" settings (to be injected before the body closing tag):

<script type="text/javascript" src="https://www.mypage.../public_html/wp-content/themes/salient/js/javascriptfile.js"></script>

When I am then loading a page and when inspecting it using the Chrome console, there's a 404 error for that JS file, although the file and the directory exist. As an alternative approach I also tried to add the script reference directly in HTML and even the page template, but with the same result.

Why do I keep getting the 404 error? Thanks for your help.

• theme-development
• javascript
• page-template

Share Improve this question asked Apr 13, 2019 at 18:13 F.MarksF.Marks 12333 bronze badges 3

• 2 developer.wordpress/themes/basics/including-css-javascript – norman.lol Commented Apr 13, 2019 at 18:17
• Thanks, but how does this address my question: what is wrong with the approach as I describe it, i.e. by using the Header & Footer plugin? collectiveray/wp/tips/add-javascript-to-wordpress – F.Marks Commented Apr 13, 2019 at 18:44
• 1 @F.Marks, you are providing invalid url for src attribute and result is 404 error. It should be something like <script type="text/javascript" src="https://www.mypage/wp-content/themes/salient/js/javascriptfile.js"></script> . – Qaisar Feroz Commented Apr 13, 2019 at 19:18

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 1

You should enqueue your script using

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer);

Where,
$handle is the name for the script.

$src defines where the script is located.

$deps is an array that can handle any script that your new script depends on, such as jQuery.

$ver lets you list a version number.

$in_footer is a boolean parameter (true/false) that allows you to place your scripts in the footer of your HTML document rather then in the header, so that it does not delay the loading of the DOM tree.

Documentation

Add this code to functions.php file of your theme.

function add_my_script() {

  wp_enqueue_script( 'my-script', 
         get_template_directory_uri() . '/js/javascriptfile.js', 
         array ( 'jquery' ), 
         false,
         true
  );

}
add_action( 'wp_enqueue_scripts', 'add_my_script' );

本文标签： theme developmentHow to properly add and access a JavaScript file in Wordpress