Add Javascript In Wordpress - Functions.php With Wp_enqueue_script()

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

Solution 1:

In your functions.php

functionmytheme_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");
    });
});

1. Check if there is any error in browser console.
2. View page source and see if the file is included at the bottom of source.
3. 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.

Solution 2:

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

functionmytheme_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() ) {
 ?>
    <scripttype="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');

Solution 3:

Try this:

functions.php

functionmytheme_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");
   });
});

Solution 4:

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' );

functionmy_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