2

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>
Improve this question
8
  • 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
    Commented Feb 9, 2015 at 12:04
  • Please post the code you are using to load your script as an EDIT to your question.
    – Brad Dalton
    Commented Feb 9, 2015 at 13:12
  • possible duplicate of I want to enqueue a .js file to my child theme
    – Brad Dalton
    Commented Feb 9, 2015 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
    Commented Feb 9, 2015 at 13:15
  • Do you have wp_head() in your header.php file?
    – user47133
    Commented Feb 9, 2015 at 15:11

2 Answers 2

Reset to default
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 -

Improve this answer
2
  • 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
    Commented Feb 9, 2015 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
    Commented Dec 23, 2015 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' );
Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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