1

I have made a very simple JavaScript script. There is 1 .js file with a lot of code, and in the HTML file there is only 2 lines. The script works fine when I test it on a plain HTML page, but when I try it with WordPress, it doesn't work.

I guess it has something to do with the path to the external .js file (src="js/file.js").

What am I missing? Why isn't my script loading correctly?

Edit: See comment to answer below, I have now added the code to the functions.php, but still not working.

Edit2: This is the code I use in the functions.php:

add_action( 'wp_enqueue_scripts', 'my_enqueue_front_scripts' );
function my_enqueue_front_scripts(){
    wp_enqueue_script( 'my-custom-scripts', get_stylesheet_directory_uri() . '/js/file.js' );
}

And this is the code in my head tag:

<script type="text/javascript"> url_detect.OnBack = function() { window.location.replace("URL.org"); } </script>
  • 1
    How are you calling to script? Specifically, are you declaring it directly in header.php (the wrong way) or using the wp_enqueue_scripts hook and adding it via a function? Please update your question to include more details. – David Gard Feb 9 '15 at 12:04
  • Please post the code you are using to load your script as an EDIT to your question. – Brad Dalton Feb 9 '15 at 13:12
  • possible duplicate of I want to enqueue a .js file to my child theme – Brad Dalton Feb 9 '15 at 13:13
  • If will edit, but I use the code posted below: add_action('wp_enqueue_scripts', 'my_enqueue_front_scripts'); function my_enqueue_front_scripts(){ wp_enqueue_script('my-custom-scripts', get_stylesheet_directory_uri().'/js/file.js'); } – Alex Feb 9 '15 at 13:15
  • Do you have wp_head() in your header.php file? – yivi Feb 9 '15 at 15:11
1

In WordPress you should enqueue your scripts (and styles) using the wp_enqueue_scripts action hook.

The main reason for this is to ensure that your script/style is only added once. You can, if you wish, aslo add conditions so that a script/style is only added to certain pages.

You say in your question that your script is located at js/file.js - presumabily this is within your Theme?

If so, try the code below (place it in functions.php), if not, please provide further details.

add_action('wp_enqueue_scripts', 'my_enqueue_front_scripts');
function my_enqueue_front_scripts(){

    wp_enqueue_script('my-custom-scripts', get_stylesheet_directory_uri().'/js/file.js');

}

Note that dispite the name, this action hook should also be used to enqueue your style sheets. For more information, please take some time to view the pages below -

  • I did what you said and added the code into function.php, the only code I got now in my head tag is this. <script type="text/javascript"> url_detect.OnBack = function() { window.location.replace("URL.org"); } </script> Still not working. – Alex Feb 9 '15 at 12:44
  • 1
    Lol, someone has just seen fit to vote this answer down, yet they don't have the good grace to say why they feel it deserves a down vote. – David Gard Dec 23 '15 at 10:03
1

Assuming your file.js version is 1.0 and you want the js to be loaded to the document head (instead of footer), and according to the Codex You may add script files to your document using:

Active theme's functions.php

function my_add_js(){
    $theme_uri = get_template_directory_uri();
    wp_enqueue_script( $handle,  $theme_uri . '/js/file.js', array(), '1.0', false );
}

while adding it on an action to take place:

add_action( 'wp_enqueue_scripts', 'my_add_js' );

Active theme's header.php

<!DOCTYPE html>
<html>
    <head>

    <!-- other head section stuff here ... -->

    wp_head();?>
    </head>
    <body>

    <!-- some other html stuff maybe here ... -->

Note

If you have a JavaScript snippet and wanted to add it to you footer using your theme's functions.php file:

function my_add_js(){
    ?>
    <script>
    // This is my script ...
    </script>
    <?php
}

add_action( 'wp_footer', 'my_add_js' );

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.