Adding Custom Js to Wordpress Theme

Question

I have this short javascript I want to add to a client's wordpress. Im not really savvy on how wordpress operates or where to add my code. I've read some articles online but kinda confused on how to go about this. I added what I read is needed to register the script and to tell wordpress to use Jquery yet I keep recieving errors. Before it wasnt registering that it needed jquery. When i added the wptuts_script it won't recongnize that now. Did i put this code in the wrong place? here is the file path to the js file html/wp-content/themes/metis/js Basically I want to add this js (using jquery):

document.ready(function() {

    function wptuts_scripts_with_jquery()
    {

        // or
        // Register the script like this for a theme:
        wp_register_script( 'custom-script', get_template_directory_uri() . '/js/test.js', array( 'jquery' ));

        // For either a plugin or a theme, you can then enqueue the script:
        wp_enqueue_script( 'custom-script' );
    }
    add_action( 'wp_enqueue_scripts', 'wptuts_scripts_with_jquery' );

    function updatebtm() {
        var pos = $(window).scrollTop();
        console.log(pos);
        if (pos >= 800) {
            $('.portfolio-top').css('display', 'none');

        } else {

            $('.portfolio-top').css('display', 'block');
        }

    } $(window).bind('scroll', updatebtm);

});

Thanks for the edit RNEVIUS! Can you take alook at the question too?! — Ricki Moore
– Ricki Moore, Commented Sep 28, 2015 at 13:40

rnevius · Accepted Answer · 2015-09-28 13:42:49Z

6

The problem is that you're completely mixing PHP and JavaScript. You should be doing two things:

Add a custom JavaScript file to your theme
Register / enqueue that .js file in a plugin or functions.php

Your JavaScript also has some syntax errors.

The following is an example of what your files could look like:

JavaScript:

(function($) {

    $(document).ready(function() {

        function updatebtm() {
            var pos = $(window).scrollTop();
            console.log(pos);
            if (pos >= 800) {
                $('.portfolio-top').css('display', 'none');

            } else {

                $('.portfolio-top').css('display', 'block');
            }

        } 
        $(window).bind('scroll', updatebtm);

    });

})(jQuery);

PHP (in functions.php):

function wptuts_scripts_with_jquery() {
    wp_enqueue_script( 'custom-script', get_template_directory_uri() . '/js/test.js', array( 'jquery' ));
}
add_action( 'wp_enqueue_scripts', 'wptuts_scripts_with_jquery' );

answered Sep 28, 2015 at 13:42

rnevius

27.2k10 gold badges60 silver badges86 bronze badges

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

2 Comments

Ricki Moore Over a year ago

Thanks for the quick response. here is the error it threw back after adding your code Fatal error: Call to undefined function wp_enqueueu_script() in /home/content/p3pnexwpnas07_data02/08/2775808/html/wp-content/themes/metis/functions.php on line 70

rnevius Over a year ago

You should be using wp_enqueue_script, not wp_enqueueu_script.

geisterfurz007 · Accepted Answer · 2019-12-03 07:55:30Z

0

There is a Very easy way to add JS using a plugin called "Code Embed".

Once you have the plugin installed start a new post or page.
In the Custom Fields meta box enter a name of CODE1 and your embed code as the value. Save this.
In your post add {{CODE1}} where you wish the embed code to appear.

Use Following Link see step by step of using this plugin. Guide

edited Dec 3, 2019 at 7:55

geisterfurz007

5,9246 gold badges37 silver badges59 bronze badges

answered Dec 3, 2019 at 7:49

Rukshan

731 silver badge10 bronze badges

Collectives™ on Stack Overflow

Adding Custom Js to Wordpress Theme

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related