WordPress.org

Ready to get started?Download WordPress

Forums

jquery plugin only in one page/post (6 posts)

  1. IntermediaVS
    Member
    Posted 1 year ago #

    Hi there,

    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!

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

  2. esmi
    Forum Moderator
    Posted 1 year ago #

    First off, you need to place your js code in a jQuery noConflict wrapper and, ideally, enqueue both it and script src call.

  3. IntermediaVS
    Member
    Posted 1 year ago #

    In the second code, I am already including the noConflict wrapper, right?

    What do you mean with enqueue both and script src call?

    sorry, a newbie here

  4. esmi
    Forum Moderator
    Posted 1 year ago #

    I am already including the noConflict wrapper, right?

    Oops! Sorry! I missed that start of the wrapper in the code.

    What do you mean with enqueue both and script src call?

    Place the js in an external file and enqueue it with a dependency upon jquery.typist.js using something like:

    function my_scripts_method() {
    	wp_enqueue_script('typist', bloginfo('template_url') . '/wp-includes/js/jquery.typist.js');
     	wp_enqueue_script(
     		'newscript',
     		plugins_url('/js/newscript.js', __FILE__),
     		array('typist')
     	);
     }
     add_action('wp_enqueue_scripts', 'my_scripts_method');
  5. IntermediaVS
    Member
    Posted 1 year ago #

    Ive created a .js file with my code that I want to executed and called myscript.js (this into the functions.php)

    But I dont see anything ...

    function my_scripts_method() {
        // id on the page where you want the script (disabled)
     //   if ( is_page('180') ) {
    
            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('myscript', get_template_directory_uri() . '/js/myscript.js', array('jquery')
        );
     //   }
    
    }
    // load js in footer
    add_action('wp_footer', 'my_scripts_method');

    This is myscript.js

    jQuery(document).ready(function($) {
    
    $('#terminal').typist({
      height: 300
    });
    
    $('#terminal').typist('prompt')
      .wait(1500)
      .typist('type', 'greet')
      .typist('echo', 'Hello, world!')
    
    });
  6. esmi
    Forum Moderator
    Posted 1 year ago #

    Try using the wp_enqueue_scripts action.

Topic Closed

This topic has been closed to new replies.

About this Topic