3

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).

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

  • 1
    By "welcome page", do you mean your site front page? If so, does your Theme have a front-page.php template file? – Chip Bennett Dec 6 '12 at 13:47
  • it has only page.php and yes I put the "Welcome page" as the site front page – FZNB Dec 6 '12 at 15:15
2

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

  • I did what you said without the conditional to check it first. I think it loads but I cant see any animation in my page. * (btw) in your code there is a extra ';' in the 3rd wp_enque... – FZNB Dec 6 '12 at 16:09
  • These modifications where made the function.php. Should I put something more in the page (html) content? – FZNB Dec 6 '12 at 16:16
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'

  • Ouch! Ive changed the location of my scripts to the template folder, thanks – FZNB Dec 6 '12 at 15:55

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.