CODEWITHSUNDEEP
javascriptphphtmlwordpresswordpress-theming
user3656673
user3656673

Reputation: 37

Wordpress Theme: JavaScript not working

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

Upvotes: 2

Views: 7245

Answers (3)

adrunis84
adrunis84

Reputation: 25

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

Upvotes: 0

Kristof Feys
Kristof Feys

Reputation: 1842

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

Upvotes: 4

Andi
Andi

Reputation: 939

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?

Upvotes: 0

Related Questions