2

I am attempting to design my own wordpress theme, but I'm having issues getting my JavaScript to work, and nothing I have researched seems to have the answer. If anyone can help me out I'd greatly appreciate it!

Things I have done:

Enqueue my javascript file in functions.php: 

function sorenTheme_scripts() {
    wp_enqueue_style('style', get_stylesheet_uri());
    wp_register_script( 'soren-script', get_template_directory_uri() . '/js/soren-script.js', array( 'jquery', 'jquery-ui-core' ), '1', true );
    wp_enqueue_script('soren-script');
}
add_action('wp_enqueue_scripts', 'sorenTheme_scripts');

Create a simple javaScript file in the directory {template folder}/js named soren-script.js, which currently just contains a very simple alert test

alert('Hello World');

and that's it. When I tried to put the alert in the index.php file directly using the script tags, the alert came up as expected, but when I move it to the js file I get nothing. Is there something i need to add to the .php or .js files?

EDIT: When I look at the developer console, the source files include jquery, my css file, etc but not soren-script.js

So I guess getting soren-script.js to show up would fix the problem but I don't know how to do that, i thought the enqueue would make it automatically show up as a source, as it did with my style sheet

Improve this question
5
  • What does your browser console output look like? Commented May 20, 2014 at 12:59
  • The browser console doesn't have anything relating to the alert, just the message "Consider using 'dppx' units instead of 'dpi', as in CSS 'dpi' means dots-per-CSS-inch, not dots-per-physical-inch, so does not correspond to the actual 'dpi' of a screen. In media query expression: (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) " Commented May 20, 2014 at 13:05
  • do you have the 'wp_footer()' hook in your index.php file? Commented May 20, 2014 at 13:13
  • yes, at the beginning of my php i have <?php get_header(); ?> and at the end of it I have <?php get_footer(); ?> Commented May 20, 2014 at 13:18
  • see my answer. get_footer =/= wp_footer Commented May 20, 2014 at 13:23

3 Answers 3

Reset to default
4

You probably don't have the wp_footer() function in your template. Since in this hook the code will get loaded it won't appear if you haven't defined the hook.

$in_footer (boolean) (optional) Normally, scripts are placed in of the HTML document. If this parameter is true, the script is placed before the end tag. This requires the theme to have the wp_footer() template tag in the appropriate place. Default: false

ref: http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Note that get_footer() and wp_footer() are 2 different things:

The get_footer() template tag is a custom wrapper for the locate_template() function, used to include a template-part file within a template file. The get_footer() template tag is part of the WordPress template system, and is used primarily by the Theme itself, to specify the footer.php or footer-{slug}.php file to include in the current template.

The wp_footer() template tag is a custom wrapper for the wp_footer action hook, which is invoked via do_action( 'wp_footer' ). The wp_footer() template tag is part of the WordPress Hooks API, and is used primarily by Plugins, to inject scripts in the site HTML footer.

The wp_footer hook is typically placed right befor the closing body tag:

<?php
    wp_footer();
?>
</body>

cfr.: http://codex.wordpress.org/Function_Reference/wp_footer

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

4 Comments

so $in_footer is a parameter in my wp_enqueue_script function call, but I set it as false. I thought that that would mean I wouldn't need to worry about wp_footer? Or do I still need it even if it's false?
In you're example it's set to true. And you should always include wp_footer() since lot's of plugins also use this hook to insert scripts etc. And not including this will break a lot of plugins
FYI it's the last true in: wp_register_script( 'soren-script', get_template_directory_uri() . '/js/soren-script.js', array( 'jquery', 'jquery-ui-core' ), '1', true );
oh woww lol i thought i had set it to false X) all the scripts are loading now! thanks so much!!!
0

Try to include your script like this:

wp_enqueue_script('scriptname', get_template_directory_uri() . '/js/scriptname.js', array(), '20140520', true);

Second thing. Have you put the alert in a document.ready or something?

Improve this answer

5 Comments

I have tried to add my script using the one line enqueue as shown, and no results. Also, no, i didn't use document.ready, just the one line shown in my post. Do i need a document.ready?
No. you don't need a document.ready. Sometimes it's useful but you dont need it. Have you got another script with the same name? That's a failure I have done a few times. Then the script wont be loaded.
Is your script included but not executed or isnt it included at all?
I just added an edit explaining that. It doesn't seem to be included because I can't find it as a source file in my developer console
As others have written, check your footer.php if it contains the "wp_footer();"
0

In your functions.php add the following;

add_action('wp_enqueue_scripts', function () {
    wp_enqueue_script(
       'script name', 
       get_template_directory_uri() . '/functions/js/script.js', 
       array('jquery') // any script dependancies. i.e. jquery
    );
});

In your file manager, place your script in the functions/js/ folder.

Ensure the following opens and closes your script.

jQuery(document).ready(function($) {
}

This has worked a treat for me and should be all you need to get js working right on a wordpress theme

Improve this answer

Comments

Your Answer

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

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.