WordPress.org

Ready to get started?Download WordPress

Forums

How to load specific java script on specific page? (9 posts)

  1. hwu053
    Member
    Posted 4 years ago #

    I am developing my first site using wordpress. I have pretty much finished the site, expect one problem with java script conflicting.
    what I am having now is that all my java script files are imported in my header.php, so jquery is loaded on each single page.
    This is my current code

    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery-1.3.2.min.js"></script>
    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/validate_trigger.js" ></script>
    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/custom.js"></script>
    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/jquery.validate.js" ></script>
    
    <script type="text/javascript" src="<?php bloginfo('stylesheet_directory'); ?>/js/easySlider1.5.js"></script>

    What I am trying to archive is that jquery files are only loaded on certain pages where I need them.

    For example, I have a contact.php page, where I have jquery validator.
    how do I call my jquery.validate.js without putting my code inside header.php, but contact.php?
    I spent 3 hours trying to get wp_enqueue_script working, but it just doesn't!
    In my contact.php, it starts with

    <?php wp_enqueue_script('jquery-1.3.2.min', 'wp-content/themes/vono/js/jquery-1.3.2.min.js'); ?>
    <?php wp_enqueue_script('custom', 'wp-content/themes/vono/js/custom.js'); ?>
    
    <?php get_header(); ?>
    <?php get_sidebar(); ?>

    But it does not seem to work.
    Am I on the right track here?
    I am a newbie, I am sure this can be easily fixed, thanks in advance for anyone who can help.

  2. s_ha_dum
    Member
    Posted 4 years ago #

    I don't know if wp_enqueue_script will work if ran inside a template page. You may already be too late in the load process, though it may work if you load to the footer with the $in_footer parameter. I'm not sure about that. I haven't tried.

    wp_enqueue_script will work if you load it from your theme's functions.php, though, which is what I typically do for theme specific stuff.

    It isn't sufficient to just call wp_enqueue_script. Look at the codex. You also have to hook it to something. In the codex example its hooked to 'init'. Hooking to 'get_header' has worked for me so far.

  3. Mark / t31os
    Moderator
    Posted 4 years ago #

    Of course, you could always just do..

    if( is_page('x')) { ?>
    // YOUR SCRIPT STUFF
    <?php }

    ..in the header..

  4. hwu053
    Member
    Posted 4 years ago #

    Thank you both for your generous help.
    I tried putting the following code in my header.php

    <?php
    function load_index_page(){
    	wp_enqueue_script('jquery-1.3.2.min', 'wp-content/themes/vono/js/jquery-1.3.2.min.js');
        wp_enqueue_script('easySlider1.5', 'wp-content/themes/vono/js/easySlider1.5.js');
    }?>
    
    <?php if (is_home()){
    		add_action('init', load_index_page);
    } ?>
    
    <?php wp_head(); ?>

    and I've also tried the following code in my functins.php/

    function load_index_page() {
      if (is_home()){
      		wp_enqueue_script('easySlider1.5', 'wp-content/themes/vono/js/easySlider1.5.js');
    		wp_enqueue_script('jquery-1.3.2.min', 'wp-content/themes/vono/js/jquery-1.3.2.min.js');
      }
    }
    add_action('get_header', load_index_page );

    But neither of them loads up the codes enqueued.
    What mistake did I make in those codes?

  5. s_ha_dum
    Member
    Posted 4 years ago #

    If you want to write the javascript directly into header.php like t3los_ suggested just put the code in the header, or a link to it, and don't mess around with wp_enqueue_script at all.

    As for your second script, is_home may not be working the way you expect it to work. Echo something from inside that 'if' and see if is_home is firing when you expect it to. Secondly, you've called your callbacks incorrectly. It should be: add_action('get_header', 'load_index_page' );. Notice the second set of single quotes around your function name.

  6. davillan
    Member
    Posted 4 years ago #

    not sure if you have figured out the wp_enqueue out yet but i will post this for you and others

    This code goes in your functions.php file

    function scripts() {
    if ( !is_admin() ) { // this if statement will insure the following code only gets added to your wp site and not the admin page cause your code has no business in the admin page right unless that's your intentions
    	// jquery
    		wp_deregister_script('jquery'); // this deregisters the current jquery included in wordpress
    		wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"), false); // this registers the replacement jquery
    		wp_enqueue_script('jquery'); // you can either let wp insert this for you or just delete this and add it directly to your template
    	// your own script
    		wp_register_script('yourscript', ( get_bloginfo('template_url') . '/yourscript.js'), false); //first register your custom script
    		wp_enqueue_script('swfobject'); // then let wp insert it for you or just delete this and add it directly to your template
            // just in case your also interested
    		wp_register_script('yourJqueryScript', ( get_bloginfo('template_url') . '/yourJquery.js'), array('jquery')); // this last part-( array('jquery') )is added in case your script needs to be included after jquery
    		wp_enqueue_script('yourJqueryScript'); // then print. it will be added after jquery is added
    	}
    }
    add_action( 'wp_print_scripts', 'scripts'); // now just run the function
  7. Jerry G. Rietveld
    Member
    Posted 3 years ago #

    Legend! Thanks a million davillan. Solves all my problems!

  8. davillan
    Member
    Posted 3 years ago #

    Glad i could help --> jgrietveld

  9. bfred.it
    Member
    Posted 3 years ago #

    Davillan, that helped me as well. Awesome!
    Thanks!

Topic Closed

This topic has been closed to new replies.

About this Topic