jQuery plugin only in one page/post

2 Views

I’ve seen all the documentation in the codex, but I am doing something wrong since it doesn’t work!

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

Read More

I’ve 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.

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

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

Post Views: 2

Related posts

Leave a Reply

2 comments

  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