0

I am trying to load CSS and Javscripts through the functions. CSS are loading, but dont know what mistake has been done that javascripts and Jquery are not loading through the functions method.

I tried by directly loading scripts through the head section and it worked, but by functions method it is not loading. I am producing the excerpts of the code here →

  /* Register scripts. */
        wp_register_script( 'custom', JS . '/jquery-3.1.1.js');
                wp_register_script( 'custom', JS . '/custom.js'); 

Do you think that there is any mistake commited in this also →

/*-------------------------------------------*/
/* 1. CONSTANTS */
/*-------------------------------------------*/
define( 'THEMEROOT', get_stylesheet_directory_uri() );
define( 'IMAGES', THEMEROOT . '/img' );
define( 'JS', THEMEROOT . '/js' );

The live WP site link can be found here for any direct troubleshooting.

Try to click the hamburger menu and then the scripts will not load thats why the hamburger menu is not animating.

The Complete Function →

if ( ! function_exists( 'klogeto_scripts' ) ) {
function klogeto_scripts() {
    /* Register scripts. */
    // wp_register_script( 'jquery', JS . '/jquery-3.1.1.js');
            // wp_register_script( 'custom', JS . '/custom.js',  array(), '20151215', true);
            // wp_enqueue_script( 'custom' );
            wp_register_script( 'custom-js', get_template_directory_uri() . 'js/custom.js', array(), '20151215', true );
            wp_enqueue_script( 'custom-js' );


    /* Load the stylesheets. */
    wp_enqueue_style( 'style', THEMEROOT . '/css/style.css' );
wp_enqueue_style( 'responsive', THEMEROOT . '/css/responsive.css' );
    wp_enqueue_style( 'fontawesome', 'https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css' );
}
add_action('wp_enqueue_scripts','klogeto_scripts');

}

  • Don't register your own version of jQuery, use the one that is included with WordPress. – Milo Apr 13 '17 at 11:19
  • that is not just the issue, but the custom.js is also not loading. Any Clue? – The WP Novice Apr 13 '17 at 11:26
2

There are several fundamental problems with what you're trying to do that prevent you reaching your goal

The Problems

Naming

You register 2 scripts, but you name them both 'custom'. How is WordPress supposed to know which script you meant when you later tell it to display 'custom'?

/* Register scripts. */
wp_register_script( 'custom', JS . '/jquery-3.1.1.js');

// does this overwrite the previous line? ¯\_(ツ)_/¯
wp_register_script( 'custom', JS . '/custom.js'); 

So lets fix that by giving them different names ( and proper indenting ):

/* Register scripts. */
wp_register_script( 'wpnovice-jquery', JS . '/jquery-3.1.1.js');
wp_register_script( 'wpnovice-custom', JS . '/custom.js');

Notice that I prefixed each, custom is a super generic term, and it's possible it's being used already.

WP Already Comes With JQuery!

Never bundle a library that already comes with WordPress. Doing what you did could lead to multiple copies and versions of jQuery being present on the frontend. Instead, tell WP that jQuery is required for your script:

/* Register scripts. */
wp_register_script( 'wpnovice-custom', JS . '/custom.js', array( 'jquery' ) ); 

Registration != Enqueing

Registering your script tells WordPress they exist, but not what to do with them. WordPress already registers a lot of scripts, yet these don't appear on the frontend of every WordPress site.

It's the difference between teaching somebody how to build a house, and somebody actually building that house.

So, after registering, you need to call wp_enqueue_script to tell WordPress how to add that script to your page

/* Register scripts. */
wp_register_script( 'wpnovice-custom', JS . '/custom.js', array( 'jquery' ) );
wp_enqueue_script( 'wpnovice-custom' );

Timing

Even with the newest version of that code, it may not work! This is because timing and location are important. In the same way that asking for your steak medium rare after it's been cooked doesn't work, asking WP to print scripts when it's already done the script printing won't work either.

As a general piece of advice, don't put code in the global scope sitting in a file, instead wrap it in an action or hook, so that it runs when it's supposed to ( and can be unhooked when needed ).

Here we want the wp_enqueue_scripts hook/action. Here's an example taken from the Core WP docs:

function themeslug_enqueue_script() {
    wp_enqueue_script( 'my-js', 'filename.js', false );
}
add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );

A Final Note on Constants

/*-------------------------------------------*/
/* 1. CONSTANTS */
/*-------------------------------------------*/
define( 'THEMEROOT', get_stylesheet_directory_uri() );
define( 'IMAGES', THEMEROOT . '/img' );
define( 'JS', THEMEROOT . '/js' );

I would advise against these, they're super generic names, and pollute the global namespace. In this case they may be misleading or cause problems.

This version of the register script call, is explicit, and there's no ambiguity about wether it references the correct URL or not:

// register script
wp_register_script( 'wpnovice-custom', get_stylesheet_directory_uri() . '/js/custom.js', array( 'jquery' ) );
  • I've removed my answer as this is MUCH more complete. I will endeavour to write answers like this in the future. Very nice breakdown. – Frits Apr 13 '17 at 11:49
  • I am a beginner, and it is slightly too much for me in its entirety to understand. I have one question sir. Do you want to say that ing should be done in some other functions and enequing should be done in some other functions? – The WP Novice Apr 13 '17 at 11:54
  • @Frits there's no upvotes for effort if you delete your answers, and you can always make edits and improvements :) – Tom J Nowell Apr 13 '17 at 11:57
  • 1
    @TheWPNovice you can do them in separate functions if you want to, I do mine in the same function, that parts entirely up to you. There are a lot of resources out there on how to enqueue scripts read around for more examples. I would put a full example of your code in the answer, but nobody would learn anything if they could just copy paste, and all the code you need is already there, just a trivial 1 line re-arrangement required – Tom J Nowell Apr 13 '17 at 12:00
  • I think I have done everything accoridng to your instructions, but still custom.js is not loading → screencast.com/t/PAYsaLJcI – The WP Novice Apr 13 '17 at 17:33
1

Once you register your script, you need to enqueue it.

The below assumes you are using a theme:

wp_register_script( 'custom-js', get_template_directory_uri() . '/custom.js', array(), '20151215', true ); 
wp_enqueue_script( 'custom-js' );

I would also suggest using WordPress's built-in jQuery file.

EDIT

The complete function should look like this:

function my_custom_scripts() {
    wp_register_script( 'custom-js', get_template_directory_uri() . '/custom.js', array(), '20151215', true ); 
    wp_enqueue_script( 'custom-js' );
}
add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );
0

First your site has some js error. You can see your site in chrome console tab and see there is an error like Uncaught

TypeError: $ is not a function at custom.js:1

Regarding adding the js in your site you have done like

wp_register_script( 'custom', JS . '/jquery-3.1.1.js');
wp_register_script( 'custom', JS . '/custom.js'); 

Its totally wrong. You don't need to add external jQuery in wordpress. Wordpress has already that file.

Where is wp_enqueue_script?

wp_enqueue_script and wp_register_script is different. Please go through these below link to know about them

https://jhtechservices.com/wordpress-wp_enqueue_script-vs-wp_register_script/

https://wordpress.stackexchange.com/questions/82490/ when-should-i-use-wp-register-script-with-wp-enqueue-script-vs-just-wp-enque

wp_enqueue_script vs. wp_register_script

You should do like this

wp_register_script( 'custom-js', get_template_directory_uri() . '/custom.js', array(jquery), '1.0', true ); 
wp_enqueue_script( 'custom-js' ); 

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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