Add Javascript in Wordpress - functions.php with wp_enqueue_script()

Question

I want to add my custom javascript to my wordpress page.

I tried it usign wp_enqueue_script() but its not working. When I tried to add script directly in Inspect element it works properly so my script is correct.

Now I create function in function.php file to add script and its not working. It shows script / file is loaded in page when I check source of page. But it doing nothing.

Below is my script and function.

Javascript -

jQuery(".tp-tab").mouseenter(function() {
  jQuery('.tp-tab').removeClass("selected");
});
jQuery(".tp-tab").click(function() {
  jQuery(this).addClass("selected");
});

Function in function.php

    function mytheme_custom_scripts() {

            if ( !is_admin() ) {
                $scriptsrc = get_stylesheet_directory_uri() . '/wp-content/themes/circles/js/';
                wp_register_script( 'myhandle', $scriptsrc . 'slider_hover_effect.js', 'jquery', '1.0',  false );
                wp_enqueue_script( 'myhandle' );
            }

        }

add_action( 'wp_enqueue_scripts', 'mytheme_custom_scripts' );

In /wp-content/themes/circles/js/ directory location my script is palced with file name of slider_hover_effect.js which contain above javascript code.

Please let me know is there any other way I can add this script in my wordpress website. Also I want to add/apply this script only for Homepage. So is this possible.

Thanks,

Update

I am not sure about that I should provide complete path after get_stylesheet_directory_uri() or just /js/ folder.

Or

Can I use like -

function slider_effect() { ?>
    <script type="text/javascript">

jQuery(".tp-tab").mouseenter(function() {
  jQuery('.tp-tab').removeClass("selected");
});
jQuery(".tp-tab").click(function() {
  jQuery(this).addClass("selected");
});

    </script>

    <?php

}

add_action('wp_head','slider_effect');

Nikhil · Accepted Answer · 2016-04-04 07:10:33Z

4

In your functions.php

function mytheme_custom_scripts(){
    if ( is_home() || is_front_page()) {
            $scriptSrc = get_template_directory_uri() . '/js/slider_hover_effect.js';
            wp_enqueue_script( 'myhandle', $scriptSrc , array(), '1.0',  false );
    }
}
add_action( 'wp_enqueue_scripts', 'mytheme_custom_scripts' );

JavaScript file (slider_hover_effect.js)

$( document ).ready(function($) {
    $( 'body' ).on( 'mouseenter', '.tp-tab', function () {
        $(this).removeClass("selected");
    });
    $( 'body' ).on( 'click', '.tp-tab', function () {
        $(this).addClass("selected");
    });
});

Check if there is any error in browser console.
View page source and see if the file is included at the bottom of source.
There might be some precedence issue, to check that try to change 'false' parameter to 'true' in wp_enqueue_script function (so the script will be added to header).

I hope this helps.

edited Apr 4, 2016 at 7:10

answered Apr 4, 2016 at 5:15

Nikhil

1,45812 silver badges24 bronze badges

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

10 Comments

Rahul Over a year ago

All your checklist is properly working. Script file is loading and there is no error in console. still script is not working.

Nikhil Over a year ago

Can you put console.log(123); after "$(function() {" and see if 123 is there in the console?

Rahul Over a year ago

I tried to print some text in JS script on Page and it working. But my code is not working . The effects I want to add is based on slider classes. When I inspect element those class shows but not in pagesource

Nikhil Over a year ago

But, if you open page source is this file (slider_hover_effect.js) is available there? Note: if you added is_home condition view page source of homepage.

Nikhil Over a year ago

I've also added is_front_page() condition to the function. Please see the updated answer.

|

madalinivascu · Accepted Answer · 2016-04-04 04:42:52Z

2

Try this ,change !is_admin() with is_home()

 function mytheme_custom_scripts() {
          if ( is_home() ) {
                    $scriptsrc = get_stylesheet_directory_uri() . '/js/';
                    wp_enqueue_script( 'myhandle', $scriptsrc . 'slider_hover_effect.js', array(), '1.0',  false );
           }
     }

add_action( 'wp_enqueue_scripts', 'mytheme_custom_scripts' );

or:

function slider_effect() {
if ( is_home() ) {
 ?>
    <script type="text/javascript">
jQuery(function(){
jQuery(".tp-tab").mouseenter(function() {
  jQuery('.tp-tab').removeClass("selected");
});
jQuery(".tp-tab").click(function() {
  jQuery(this).addClass("selected");
});
});
    </script>

    <?php }

}

add_action('wp_head','slider_effect');

edited Apr 4, 2016 at 4:42

answered Apr 4, 2016 at 4:19

madalinivascu

32.4k4 gold badges41 silver badges59 bronze badges

5 Comments

Rahul Over a year ago

Are you sure about /js/ file location? Should I use same or provide complete path for it. Or Can I use it Directly in function is <script></script>

madalinivascu Over a year ago

you are asking us lol you know where you put the script you should know the path

Rahul Over a year ago

I know where is my file. I am asking should I provide complete path or just /js/ like this.

madalinivascu Over a year ago

your file should be in /themename/js/slider_hover_effect.js go with a browser there if the page doesn't list your script you have the wrong url

Rahul Over a year ago

Yes my js file in js directory of theme. Check updates in question

Hasan Shahriar · Accepted Answer · 2016-04-04 05:09:17Z

1

Try this:

functions.php

function mytheme_custom_scripts() {
// No need to check admin, 'wp_enqueue_scripts' only enqueues at the frontend 
            $scriptsrc = get_stylesheet_directory_uri() . '/js/';
            wp_register_script( 'myhandle', $scriptsrc . 'slider_hover_effect.js', array('jquery'), '1.0',  false );
            wp_enqueue_script( 'myhandle' );

    }

add_action( 'wp_enqueue_scripts', 'mytheme_custom_scripts' );

Check full codex: https://developer.wordpress.org/reference/functions/wp_enqueue_script

You should not print JS in 'wp_head' unless you can't do otherwise.

slider_hover_effect.js

jQuery(document).ready(function($){
   $(".tp-tab").mouseenter(function() {
     $(this).removeClass("selected");
   });
   $(".tp-tab").click(function() {
     $(this).addClass("selected");
   });
});

edited Apr 4, 2016 at 5:09

answered Apr 4, 2016 at 4:16

Hasan Shahriar

4783 silver badges11 bronze badges

7 Comments

Rahul Over a year ago

Are you sure about /js/ file location? Should I use same or provide complete path for it. Or Can I use it Directly in function is <script></script>

Hasan Shahriar Over a year ago

You don't have to use complete path @RahulDambare. Plz check again if its working, its a well tested code.

Rahul Over a year ago

I check with your code .. and also check Source of page js file is loaded in source. But code is still not working. Should I use $ instead of jQuery word in js file .. Please check updates in question

Hasan Shahriar Over a year ago

First check if the file is added to the page now. You also might want to wrap your jquery in JQuery(document).ready(function(){});

Rahul Over a year ago

can you please addcomplete jQuery code if possible.

|

sandino · Accepted Answer · 2016-04-04 04:19:53Z

0

I believe you forgot the src parameter in the wp_enqueue_script when you called it in your callback mytheme_custom_scripts

From wordpress docs:

wp_enqueue_script ( string $handle, string|bool $src = false, array $deps = array(), string|bool $ver = false, bool $in_footer = false )

Parameters

$handle (string) (Required) Name of the script.

$src (string|bool) (Optional) Path to the script from the root directory of WordPress. Example: '/js/myscript.js'. Default value: false

So I believe your code should be:

 wp_enqueue_script( 'myhandle' , $scriptsrc . 'slider_hover_effect.js');

Another way is if you can create your custom plugin and activate that plugin to allow you to include custom js or css like this in your index.php file of the plugin:

add_action( 'init', 'my_script' );

function my_script() {
    if( is_home() ){
        wp_enqueue_script('my_script', plugins_url('js/script.js', __FILE__), array('jquery'));
        wp_enqueue_style('my_style', plugins_url('css/style.css', __FILE__));
    }
}

You place the files in the js/ or css/ dir and this works

answered Apr 4, 2016 at 4:19

sandino

3,8421 gold badge22 silver badges24 bronze badges

1 Comment

Rahul Over a year ago

I dont know how to implement this code in plugin. As this is just a small code I want to prefer it to write in fuctions.php file. Can you please provide proper code

Collectives™ on Stack Overflow

Add Javascript in Wordpress - functions.php with wp_enqueue_script()

Update

4 Answers 4

10 Comments

5 Comments

7 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

Update

4 Answers 4

10 Comments

5 Comments

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related