Question

50

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

rated 0 times [ 53] [ 3] / answers: 1 / hits: 24089 / 8 Years ago, mon, april 4, 2016, 12:00:00

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

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

marisela

Add To Favorites

Follow

Total Points: 103

Total Questions: 105

Total Answers: 102

Location: Solomon Islands

Member since Fri, Oct 8, 2021

3 Years ago

marisela questions

1 Access to XMLHttpRequest at '…' from origin 'localhost:3000' has been blocked by CORS policy

Wed, Aug 25, 21, 00:00, 3 Years ago

1 How to escape double and single quotes in a JSON array

Wed, Oct 21, 20, 00:00, 4 Years ago

1 TypeError: Cannot read property 'contentWindow' of undefined

Sat, Aug 15, 20, 00:00, 4 Years ago

1 Jest import statement: 'TypeError: Cannot set property 'fillStyle' of null'

Sun, Aug 2, 20, 00:00, 4 Years ago

1 Validation using Yup to check number length

Tue, Nov 19, 19, 00:00, 5 Years ago

View All

answered 8 Years ago ciarajourneyv · Accepted Answer

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.