1

I am trying to create new WordPress theme from scratch. I have working html, css and js files. To add JS into wordpress theme I used:

function my_scripts_styles() {
    wp_enqueue_script( 'easing', get_template_directory_uri() . '/js/easing.js',  '2014-12-030', true );
}

add_action( 'wp_enqueue_scripts', 'my_scripts_styles' );

this code into function.php

As well as I tried using:

<script src="<?php get_template_directory_uri();?>/js/jquery.min.js"></script>

But it is not working...

What am I doing wrong / how can I add Javascript files to my theme?

closed as off-topic by Pieter Goosen, kaiser Jan 1 '15 at 15:23

This question appears to be off-topic. The users who voted to close gave this specific reason:

  • "Questions that are too localized (such as syntax errors, code with restricted access, hacked sites, hosting or support issues) are not in scope. See how do I ask a good question?" – Pieter Goosen, kaiser
If this question can be reworded to fit the rules in the help center, please edit the question.

  • 1
    typo? Shouldn't it be functions.php? – Madivad Dec 29 '14 at 20:37
  • 1
    Please make sure that file names and code are correct before posting, syntax errors and spelling mistakes in file names are off topic here – Pieter Goosen Jan 1 '15 at 10:10
2

Your code should look like this

function my_scripts_styles() {
    wp_register_script('easing', get_template_directory_uri() . '/js/easing.js',  '2014-12-030', true );
    wp_enqueue_script('easing');
}

add_action( 'wp_enqueue_scripts', 'my_scripts_styles' );

The above code should work fine. Also don't forget to check if you have properly specified the path to your js file.

Check well that you have a functions.php and not function.php file.

Since your $in_footer parameter is set to true check that you do have a footer.php file included in your theme and that the footer.php file includes this line of code:

wp_footer();

Good luck !

  • oops!! was using function.php file, now changed name of file. thanku – Sanjeevani Dec 30 '14 at 5:28
  • You don't need to register and enqueue a style/script if you are not using conditional loading. You can just enqueue it – Pieter Goosen Jan 1 '15 at 10:11
  • @PieterGoosen While this is completely true (and I fully agree with you), it doesn't really matter in a real world scenario. And I'm a big fan of adding both in public answers just to show people that there is more to it. – kaiser Jan 1 '15 at 15:13
  • @kaiser totally agree, it is a very good answer but the problem is not because the OP did not enqueue and register the style. Just made the user posting the answer aware of the fact. Still think this question should be closed as too localised, read the first comment to this answer. OP had wrong name for functions.php. function.php instead of functions.php – Pieter Goosen Jan 1 '15 at 15:20
0

Your code looks fine. It should have worked. Since you stated that you have started from scratch, there might be possibility that you forgot to add wp_head() function in header.php file and wp_footer() on footer.php file.

wp_enqueue_scripts hooks into either wp_head() or wp_footer() depending upong the condition you specified for enqueuing css or js file you load.

  • current i am using only index.php, all header, footer related code is in same file, and i used <?php wp_head(); ?> this code before </head> and i am calling script i.e <script language="JavaScript" src="<?php echo get_template_directory_uri();?>/js/gen_validatorv31.js" type="text/javascript"></script> before wp_head() – Sanjeevani Dec 30 '14 at 11:07
  • is it correct way? i am not sure about it, coz its my first theme and i am kind of new – Sanjeevani Dec 30 '14 at 11:09
  • The better way to start WordPress Theme development is using a blank template from underscores.me That will help you in many ways. – Rajeeb Dec 30 '14 at 11:15
0

Add this function in your functions.php file to enqueue your script like this and put the wp_header() in your header.php before the closing head and wp_footer() in your footer.php before closing body tag.

 <?php  
    function my_scripts_styles() {
        wp_enqueue_script(
            'easing',
             get_template_directory_uri() . '/js/easing.js',
            array( 'jquery' )
        );
    }
    add_action( 'wp_enqueue_scripts', 'my_scripts_styles' );
    ?>

and if you want to include your script by using script tag then include script like this

<script src="<?php echo get_template_directory_uri() . '/js/easing.js'?>"></script>

it work fine

  • still not working – Sanjeevani Dec 30 '14 at 11:01
  • and i have 1 more question, i created functions.php and added scripts as per your code, but i am not getting how to use that functions.php file? or we need to call it in header? if yes, how? – Sanjeevani Dec 30 '14 at 11:03
  • wordpress automatically include functions.php file. don't need to include functions.php file in your header. please add wp_header() in your header.php file before closing head tag and also include wp_footer() in your footer.php file before closing body tag – Amit Mishra Dec 30 '14 at 13:58
  • already have that both functions – Sanjeevani Dec 30 '14 at 14:51
  • Hey then in your browser open developer tool->Resources check easing.js is included or not – Amit Mishra Dec 30 '14 at 15:16
0

If the file is being loaded from dev tools but the JS is not working, make sure you're aware of Jquery no-conflict mode which is set by default in Wordpress. This link explains it and how to work with it.

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