I was googling for weeks, found alot of stuff but nothing that explains in an easy way how to implement custom javascript and jQuery in Wp.Anyway, I made my theme and installed it in Wp, everything works fine except the scripts, it seems as they are not loading. I don't know what to do? I tried so many things, and nothing... wp.enque, wp_register and all that. I put it all in my function.php.

 

Please, help me!!! I'm going crazy!

I've done a fair bit of work with wordpress recently. I'm not sure what you've read about the functions.php file, but I'm not putting any references to JS in there.

 

Outside of all the usual wp_head and wp_footer includes you need to do, in my footer, i've also included the following:

 

   <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="https://code.jquery.com/jquery.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="<?php bloginfo('template_directory'); ?>/js/bootstrap.min.js"></script>

This is BEFORE the closing body tag. I'm no expert on wordpress (and I think it's already loading it's own version of jquery) but including the external jquery file there BEFORE calling the rest of the external JS files I need seems to work a treat for me. Just add all options and other references you need in there.

 

I know I know, someone is going to say that hardlinking to a JS file is a bad idea, but for what I need it for, this does the job fine, it's PER THEME, so it's not so bad. And any work I do for people regarding wordpress based CMS sites with a custom theme, I always add a disclaimer in there saying that modifications to my theme code (outside of the appearance tab) invalidate any free support they would have had from me.

Hi.

 

You should always use your functions.php to load scripts and styles. WordPress comes bundled with jQuery already but if you want to change your version use the snippet below:

 

/*------------------------------------*\
	Enqueue JS Scripts
\*------------------------------------*/

// Register Script/s
function custom_scripts() {

	if (!is_admin()) {

		wp_deregister_script( 'jQuery' );
		wp_register_script( 'jQuery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js', false, '1.10.2', false );
		wp_enqueue_script( 'jQuery' );

	  wp_register_script('customJS', get_template_directory_uri() . '/assets/js/custom-scripts.js', array(), '1.0.0', true); // Custom scripts
	  wp_enqueue_script('customJS'); // Enqueue it!
  
  }
        
}

// Hook into the 'wp_enqueue_scripts' action
add_action( 'wp_enqueue_scripts', 'custom_scripts' );

I hope that helps.

Edited February 15, 201412 yr by welshhuw

Thank you guys! But do I need to put this snippet just in the functions.php or in the head.php also?

Thank you guys! But do I need to put this snippet just in the functions.php or in the head.php also?

Functions.php only

Thanks @Privileged! And what do I do with this

 

 

<script type="text/javascript">
$(document).ready(function(){
$('#navi').localScroll(800);

$('#usluge').parallax("50%", 0.1);
$('.bg').parallax("50%", 0.4);
$('#radovi').parallax("50%", 0.3);
})
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#arrow').localScroll(800);
$('#usluge').parallax("50%",0.3);
});
</script>

<script type="text/javascript">
$(document).ready(function() {
$("a.gallery").fancybox({
'openEffect' : 'elastic',
'closeEffect' : 'elastic',
'nextEffect' : 'elastic',
'prevEffect' : 'elastic',
speedIn : 600,
speedOut : 200,
overlayShow : false

});
});

</script>

 

This is placed in my index.html head.

@ars,

 

you can move all those snippets to a separate file; eg . "plugins.js", and then call back the file in the same way @welshhuw described above.

 

Wrap all the snippets with the following function:

 

jQuery(document).ready(function($) {
//Your custom snippet 1
//Your custom snippet 2
//Your custom snippet 3
});
 

This will only execute the contents after page load (and thus, you don't need to call it on every function), and it also means you can use the $ sign safely.

 

The Wordpress codex describes the process and reasoning in much better detail:

 

http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Edited February 17, 201412 yr by KaiserK108

@ars

 

What is written above by Kaiser is exactly how you need to do it.

 

Hope it all works well for you

Thank you @KaiserK108! I did what you say and still doesn't work. Here is my function.php

<?php

function custom_scripts() {

if (!is_admin()) {

wp_deregister_script( 'jQuery' );
wp_register_script( 'jQuery', 'scripts/jquery-1.8.3.min.js', false, '1.8.3', false );
wp_enqueue_script( 'jQuery' );

wp_register_script('myscript', get_template_directory_uri() . '/scripts/myscript', array(), '1.0.0', true); // Custom scripts
wp_enqueue_script('myscript'); // Enqueue it!

}

}

// Hook into the 'wp_enqueue_scripts' action
add_action( 'wp_enqueue_scripts', 'myscript' );



wp_register_script('custom', get_template_directory_uri() . 'source/jquery.fancybox.pack.js', array(), '1.0.0', true); // Custom scripts
wp_enqueue_script('custom'); // Enqueue it!


// Hook into the 'wp_enqueue_scripts' action
add_action( 'wp_enqueue_scripts', 'custom' );


wp_register_script('fancy', get_template_directory_uri() . 'source/helpers/jquery.fancybox-thumbs.js', array(), '1.0.0', true); // Custom scripts
wp_enqueue_script('fancy'); // Enqueue it!


// Hook into the 'wp_enqueue_scripts' action
add_action( 'wp_enqueue_scripts', 'fancy' );

wp_register_script('eas', get_template_directory_uri() . 'scripts/jquery.easing.1.3.js', array(), '1.3', true); // Custom scripts
wp_enqueue_script('eas'); // Enqueue it!


// Hook into the 'wp_enqueue_scripts' action
add_action( 'wp_enqueue_scripts', 'button' );

wp_register_script('button', get_template_directory_uri() . 'source/helpers/jquery.fancybox-buttons.js', array(), '1.0.0', true); // Custom scripts
wp_enqueue_script('button'); // Enqueue it!


// Hook into the 'wp_enqueue_scripts' action
add_action( 'wp_enqueue_scripts', 'button' );

wp_register_script('scroll', get_template_directory_uri() . 'scripts/jquery.scrollTo-1.4.2-min.js', array(), '1.4.2', true); // Custom scripts
wp_enqueue_script('scroll'); // Enqueue it!


// Hook into the 'wp_enqueue_scripts' action
add_action( 'wp_enqueue_scripts', 'scroll' );

wp_register_script('local', get_template_directory_uri() . 'scripts/jquery.localscroll-1.2.7-min.js', array(), '1.2.7', true); // Custom scripts
wp_enqueue_script('local'); // Enqueue it!


// Hook into the 'wp_enqueue_scripts' action
add_action( 'wp_enqueue_scripts', 'local' );

wp_register_script('paral', get_template_directory_uri() . 'scripts/jquery.parallax-1.1.3.js', array(), '1.1.3', true); // Custom scripts
wp_enqueue_script('paral'); // Enqueue it!


// Hook into the 'wp_enqueue_scripts' action
add_action( 'wp_enqueue_scripts', 'paral' );

wp_register_script('mouse', get_template_directory_uri() . 'scripts/jquery.mousewheel.js.js', array(), '1.0.0', true); // Custom scripts
wp_enqueue_script('mouse'); // Enqueue it!


// Hook into the 'wp_enqueue_scripts' action
add_action( 'wp_enqueue_scripts', 'mouse' );

?>

 

 

I don't know what I'm doing wrong?

Hi @ars

Firstly, forgive me for the essay, but stick with me. Let's start by breaking down what @welshhuw first suggested

You're declaring a function (custom_scripts)

/*------------------------------------
	Enqueue JS Scripts
  ------------------------------------*/

// Register Script/s
function custom_scripts() {
    //code to execute when function is run
    //see welshhuw's original example
}

 

which when run will:

1. de-register Wordpress's inbuilt jQuery,
   
2. register YOUR SPECIFIED version (in this instance 1.8.3)
   
3. and then enqueues it to the HEADER
   (^^^You ONLY need to do these first 3 steps, IF you need a specific version of jQuery)
   
4. Registers a new script ('customJS') - gets it ready, tells WordPress we want to use this
   
5. Enqueues it (outputs the file, in this case 'customJS') to the FOOTER.

Then, you are using one of the available wordpress hooks (wp_enqueue_scripts), to run this function ('custom_scripts').

// Hook into the 'wp_enqueue_scripts' action
add_action( 'wp_enqueue_scripts', 'custom_scripts' );

 

That means when Wordpress runs that action, your function will also run.

Within that function ('custom-scripts'), you can register as many scripts as you like, and then enqueue them as necessary.

Then you run that function once, and it will run everything declared inside it.

As I stated above, registering a script get its ready for use, and tells Wordpress I'm going to use this script; here's the format:

 

<?php wp_register_script( $handle, $src, $deps, $ver, $in_footer ); ?>
 

 

$handle = the name of the script, eg 'customJS'

$src = is the source of the file eg [path to template directory] 'js/customJS.js'

$deps = dependencies (if the script relies on another script first, for examle Jquery, or in your case, fancybox thumbs is prbably dependent on fancybox.pack (not sure, never used it))

$ver = what version you're using

$in_footer = whether the script appears in footer or not (true for yes, false for no).

So here's an example:

 

function my_custom_scripts() {
 
  wp_register_script( 'script1', get_template_directory_uri().'/js/script1.js', array('jquery'), '', false );
  wp_register_script( 'script2', get_template_directory_uri().'/js/script2.js', array('script1'), '', true );
  wp_register_script( 'script3', get_template_directory_uri().'/js/script3.js', array(), '', true );
 
  wp_enqueue_script( 'script2' );
  if ( is_front_page() ) {
    wp_enqueue_script('script3');
  }
}
 

 

So, now a breakdown:

1. we declared 1 function: 'my_custom scripts'
2. Registered script1, which is dependent on 'jQuery', and will be output to the header
3. Registered script2, which is dependent on 'script1', and will be output to the footer
4. Registered script3, which will be output to the footer
5. Then, we enqueue script2
6. then we set a conditional, and say to enqueue script 3 only if it is the front page.

Next we do this:

 

 

add_action( 'wp_enqueue_scripts', 'my_custom_scripts' );
 

That means, when 'wp_enqueue_scripts' runs, it will also run our function 'my_custom_scripts':

which in turn registers 3 different scripts

then enqueues (outputs) script 2, which is dependent on script 1 (so it will automatically run script1), which in turn is dependent on jQuery (so it will automatically run that first);

then it will check if it is the front-page, and then output script3.

 

Hope that made sense... and then have a look back at your code, and break down what you're trying to do, and see if you can get it to fit into this pattern.

(Declare one function, register all your scripts in there, and think about dependencies), then enqueue those which need to be called, and in the right places), and then, call that function once by hooking it into wp_enqueue_scripts.

Let me know how you get on...

Edited February 19, 201412 yr by KaiserK108

Thank you very much @Kaiserk108! You're really kind to spend time to explain it to me, although it didn't help me. I did what you said but still nothing. Here's my code:

 

<?php

function custom_scripts() {

if (!is_admin()) {

wp_deregister_script( 'jQuery' );
wp_register_script( 'jQuery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' false, '1.10.2', false );


wp_register_script('customJS', get_template_directory_uri() . '/scripts/jquery-1.8.3.min.js', array('jQuery'), '1.8.3', false); // Custom scripts


wp_register_script('myscript', get_template_directory_uri() . '/scripts/myscript', array('paral')); // Custom scripts



wp_register_script('custom', get_template_directory_uri() . 'source/jquery.fancybox.pack.js', array('customJS')); // Custom scripts


wp_register_script('fancy', get_template_directory_uri() . 'source/helpers/jquery.fancybox-thumbs.js', array('custom')); // Custom scripts




wp_register_script('eas', get_template_directory_uri() . 'scripts/jquery.easing.1.3.js', array('customJS'), '1.3', false); // Custom scripts


wp_register_script('button', get_template_directory_uri() . 'source/helpers/jquery.fancybox-buttons.js', array('fancy')); // Custom scripts


wp_register_script('scroll', get_template_directory_uri() . 'scripts/jquery.scrollTo-1.4.2-min.js', array('customJS'), '1.4.2', false); // Custom scripts


wp_register_script('mygallery', get_template_directory_uri() . 'scripts/gallery.js', array('fancy'), false); // Custom scripts


wp_register_script('local', get_template_directory_uri() . 'scripts/jquery.localscroll-1.2.7-min.js', array('scroll'), '1.2.7', false); // Custom scripts



wp_register_script('paral', get_template_directory_uri() . 'scripts/jquery.parallax-1.1.3.js', array('local'), '1.1.3',false); // Custom scripts


wp_register_script('mouse', get_template_directory_uri() . 'scripts/jquery.mousewheel.js', array('customJS'), false); // Custom scripts


wp_enqueue_script('customJS'); // Enqueue it!
wp_enqueue_script('fancy'); // Enqueue it!
wp_enqueue_script('scroll'); // Enqueue it!
wp_enqueue_script('paral'); // Enqueue it!
wp_enqueue_script('local'); // Enqueue it!
}

}

// Hook into the 'wp_enqueue_scripts' action
add_action( 'wp_enqueue_scripts', 'custom_scripts' );

?>

 

I don't know what I'm doing wrong?

At the top, you're registering two diff versions of jQuery - why??

 

'myscripts' location has not been defined - there's no filename (should it be myscripts.js)?

 

My head's spinning with all these files, and I've no clue with these dependencies. try this:

 

<?php

function custom_scripts() {

    if (!is_admin()) {

        wp_deregister_script( 'jQuery' );
        // register jQuery
        wp_register_script( 'jQuery', 'http://ajax.googleap...2/jquery.min.js' false, '1.10.2', false );

        //Just to make it easier to read, grouping all jQuery plugins together 
        //register jquery.easing.js
        wp_register_script('ars-easing', get_template_directory_uri() . 'scripts/jquery.easing.1.3.js', array(), '1.3', false); 
        //register scrollTo.js
        wp_register_script('ars-scroll', get_template_directory_uri() . 'scripts/jquery.scrollTo-1.4.2-min.js', array(), '1.4.2', false);
        //register localscroll.js
        wp_register_script('ars-local-scroll', get_template_directory_uri() . 'scripts/jquery.localscroll-1.2.7-min.js', array(), '1.2.7', false);
        //register parallax.js
        wp_register_script('ars-parallax', get_template_directory_uri() . 'scripts/jquery.parallax-1.1.3.js', array(), '1.1.3',false);
        //register mousewheel.js
        wp_register_script('ars-mousewheel', get_template_directory_uri() . 'scripts/jquery.mousewheel.js', array(),  false);

        //grouping your fancybox scripts together
        //register fancybox.pack.js   
        wp_register_script('ars-fancybox-pack', get_template_directory_uri() . 'source/jquery.fancybox.pack.js', array(), false);
        //register fancybox-thumbs.js
        wp_register_script('ars-fancybox-thumbs', get_template_directory_uri() . 'source/helpers/jquery.fancybox-thumbs.js', array(), false);  
        //register fancybox-buttons.js
        wp_register_script('ars-fancybox-buttons', get_template_directory_uri() . 'source/helpers/jquery.fancybox-buttons.js', array(), false);
       
        //all other scripts
        //register gallery.js
        wp_register_script('ars-mygallery', get_template_directory_uri() . 'scripts/gallery.js', array(), false);

        // register myscript.js
        // I presume this has specific calls, that action on some of the above plugins, so you want it to load last
        // hence moved to the footer
        wp_register_script('ars-myscript', get_template_directory_uri() . '/scripts/myscript.js', array(), true);
        
    ​    //let's fire them off then
        wp_enqueue_script('jQuery');
        //the jQuery plugins
        wp_enqueue_script('ars-easing');
        wp_enqueue_script('ars-scroll');
        wp_enqueue_script('ars-local-scroll');
        wp_enqueue_script('ars-parallax');
        wp_enqueue_script('ars-mousewheel');
        //fancyBox plugin
        wp_enqueue_script('ars-fancybox-pack');
        wp_enqueue_script('ars-fancybox-thumbs');
        wp_enqueue_script('ars-fancybox-buttons');
        //custom scripts
        wp_enqueue_script('ars-mygallery');
        wp_enqueue_script('ars-myscript');

   }    
        
}

// Hook into the 'wp_enqueue_scripts' action
add_action( 'wp_enqueue_scripts', 'custom_scripts' );

?>

I've grouped the similar files together, and then re-named it just to make it easier to see what's going on.

(Just double check the filenames, and locations are correct - remember to verify the correct sub-folders too eg. are the fancybox files in a folder called 'source', which is directly in your 'theme' folder?)

Just another quick note: get_template_directory_uri will reference the theme directory, and does NOT output a trailing slash at the end, so when referencing a file location, you'll need to enter the '/' too, eg. get_template_directory_uri . '/scripts/.../script.js' [just realised it's missing from most of the $src locations I just posted].

Thank you again @KaiserK108! The "myscript.js" is a snippet from my index.html file and also gallery.js. "myscript.js" calls the parallax.js script and the "gallery.js" my fancybox.js. About the dependency, frankly I don't undestand exactly where to put what?

 

I fixed the errors and nothing again! Damn!

is this on a livesite? do you have a link?

When you view source of the page, what files are being output?

Here is the link http://www.itm.com.hr

You have one JS file that cannot be found (404): "jquery.mousewheel.js" Fix that first and let us know if it all works as expected.

 

That is a lot of scripts!

Edited February 20, 201412 yr by welshhuw

I know it's a lot of scripts @welshhuw, but to achieve want I want is necessary! I deleted the "mousewheel.js" script 'cause actually I don't need it, still nothing!

Is this (itm.com.hr) the WP version? Because I see (most) of the scripts loaded fine in the head?

Also, I don't see your myscript.js, or gallery.js files listed anywhere?

Which script/s aren't working? I can see parallax and lightbox work fine.

 

Perhaps, with your inline JS, instead of using the dollar sign ($) use jQuery - give that a try.

Yes, this is the WP version. You don't see my myscript.js, or gallery.js listed because they are not there. I put these snippets in two files (myscript.js and gallery.js) that are in my index.html head.

 

<script type="text/javascript">
$(document).ready(function(){
$('#navi').localScroll(800);

$('#usluge').parallax("50%", 0.1);
$('.bg').parallax("50%", 0.4);
$('#radovi').parallax("50%", 0.3);
})
</script>
<script type="text/javascript">
$(document).ready(function(){
$('#map').localScroll(800);
$('#usluge').parallax("50%", 0.3);
$('#radovi').parallax("50%", 0.3);
$('#home').parallax("50%",0.3);
});
</script>

<script type="text/javascript">
$(document).ready(function() {
$("a.gallery").fancybox({
'openEffect' : 'elastic',
'closeEffect' : 'elastic',
'nextEffect' : 'elastic',
'prevEffect' : 'elastic',
speedIn : 600,
speedOut : 200,
overlayShow : false

});
});

</script>

@welshhuw they are working fine but not in WP!

Did you try this in your WP version? :

 

Perhaps, with your inline JS, instead of using the dollar sign ($) use jQuery - give that a try.

sorry, I'm really confused - they are working, but not in WP? As @welshhuw pointed out, the link you gave shows them working fine.

 

See post#12 above, what error message do you get when you copy / paste that code into your functions file (remember to edit the file locations as many of them are missing the trailing slash).

 

(copy and paste exactly what I've written, but just change / edit the file location (eg. add the '/' in the right place).

 

If no error, what JS files are output into the site (view the site, and look at 'view source'). Which ones, if any, are missing? (if missing, check the file locations have been correctly specified).

 

Secondly, you don't need to put those snippets in separate files, create one file, eg. 'mycustomscripts.js', and then include the snippets (see post#7). So, the contents of that file will look like:

 

jQuery(document).ready(function($) {
    //insert custom snippets below

    //sections parallax
    $('#navi').localScroll(800);  
    $('#usluge').parallax("50%", 0.1);
    $('.bg').parallax("50%", 0.4);
    $('#radovi').parallax("50%", 0.3);

    //map parallax
    $('#map').localScroll(800);
        $('#usluge').parallax("50%", 0.3);
        $('#radovi').parallax("50%", 0.3);
        $('#home').parallax("50%",0.3);
    });

    //gallery fancybox
    $("a.gallery").fancybox({
        'openEffect'    :    'elastic',
        'closeEffect'   :    'elastic',
        'nextEffect'    :    'elastic',
        'prevEffect'    :    'elastic',
         speedIn        :    600,
        speedOut        :    200,
        overlayShow     :    false      
    });
});

Sorry, that link you posted itm.com.hr - is this not a plain ol' html site?

 

Yes, this is the WP version. You don't see my myscript.js, or gallery.js listed because they are not there. I put these snippets in two files (myscript.js and gallery.js) that are in my index.html head.

 

...

 

You mean you just typed it directly in the header.php file, (since it's WP) not in the head of your index.html (plain ol' html)...

Please clarify

Sorry, this is not my WP version, because it's not published yet, I use xampp to see it. When I look at the 'view source' I don't see my scripts? Do I have to put then into my 'index.php file?

I DID IT!!!!!! Finally guys i succeed! It was so easy but I couldn't find out the reason why it didn't work. I forgot to put my scripts in my header.php and also my "mycustom script".

 

I'd like to THANK YOU ALL @KaiserK108 and @welshhuw for the effort you put into it! Without you I couldn't find the answer!

 

Thank you again!

Awesome! and well done!

Brilliant!