jquery plugin only in one page/post

Question

Ive seen all the documentation in the codex but I am doing something wrong since it doesnt work!

I want to implement this jquery plugin (https://github.com/davidcrawford/typist-jquery) in my welcome page (www.english.intermediavs.com)

Ive added this code in my function.php

function my_typist() {
    if (!is_admin()) {

        wp_enqueue_script('jquery');

        wp_enqueue_script('jquery.typist', get_bloginfo('template_url') . '/wp-includes/js/jquery.typist.js', array('jquery'), '1.0', true);
    }
}
add_action('init', 'my_typist');

And I also introduced this code in "welcome page" by using html raw plugin.

<!--raw-->
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/wp-includes/js/jquery.typist.js">
jQuery(document).ready(function($) {

$('#terminal').typist({
  height: 300
});

$('#terminal').typist('prompt')
  .wait(1500)
  .typist('type', 'greet')
  .typist('echo', 'Hello, world!')

});
</script>
<!--/raw-->

PS: I am using the plugin Use Google libraries as well.

Thanks in adavance!

links: http://codex.wordpress.org/Using_Javascript

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

Answer 1

If you only want to use the library "jquery.typist" on one page you could just add it by the conditional is_page() but if you want to use it on more than one page you should just minifyi all your js-files into a single one and compress it and cache it. It is better to use one single js-file witch is compressed and cached than use many single files.

And it also looks like you have put the file in /wp-includes/js ? it should be in your theme-root folder.

Lets say your structure is themes/mytheme in mytheme you should have a js folder. if so the code could look like this:

function wpse_75149() {
    // add  the id on the page whare you want the script
    if ( is_page('123') ) {

        wp_enqueue_script('jquery');

        wp_enqueue_script('jquery.typist', get_template_directory_uri() . '/js/jquery.typist.js', array('jquery'), '1.0', true);
        wp_enqueue_script('custom-script', get_template_directory_uri() . '/js/myscript.js', array('jquery');
    );
    }
}
// load js in footer 
add_action('wp_footer', 'wpse_75149');

Create a js file called myscript.js in your theme/js folder and add:

jQuery(document).ready(function($) {

$('#terminal').typist({
  height: 300
});

$('#terminal').typist('prompt')
  .wait(1500)
  .typist('type', 'greet')
  .typist('echo', 'Hello, world!')

});

http://codex.wordpress.org/Function_Reference/is_page - conditional to print the script on right page http://codex.wordpress.org/Function_Reference/wp_enqueue_script - how to load scripts

Answer 2

You are not specifying the correct location of your JS file. Your file is in:

http://www.english.intermediavs.com/wp-includes/js/

but this:

get_bloginfo('template_url') . '/wp-includes/js/jquery.typist.js'

won't link to that, it tries to load a wp-includes folder inside your current theme's directory, you want this instead:

home_url() . '/wp-includes/js/jquery.typist.js'