Ask your WordPress questions! Pay money and get answers fast! (more info)

Help with wp_enqueue_script

  • SOLVED

1/18/2011

Thank you to everyone that responded. I've tried a couple of these answers (Caught the type too) but no joy.

I'm realizing a bit of a challenge in this question/answer format. I don't have a footer tag in my apply.php. I realized I either should of know this was going to be an issue up front or written about every plugin we're using, etc.

The form you could say is a bit of a squeeze page. I don't want any links out so the consumer focuses on filling out the form. I guess my initial thought was this would be in the header just like the other JS that is called, but i couldn't get the orders correct when I added this JS.

I don't know if this is possible or allowed, but I'd rather just pay someone for an hour of their time to log in to my site and assess the plugins we have and then create the best solution for this so it loads correctly.

What would be the appropriate way to move forward on this?



Previous post:
I found this site via Ronald Huereca’s e-book entitled WordPress and Ajax.

I read the about the proper way to add Javascripts to WP via wp_enqueue_script. I like to do things the proper way. But I'll be honest. I'm trying to do this and it's just not working.

I have a custom PHP file that i made as a template that has a form using a few JQuery scripts. The form was working, but now with some new plug-ins are killing it and its running really slow. This is how I came across loading the scripts in order, etc.

<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput-1.0.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/jquery.accordion.js"></script>


I only need it to load on a page called apply.php, and not in the admin area, etc. If I need to combine all these into one file that'd be cool too.

My question is how do I format this I've seen different ways. Some using If statements. Not sure how complex this needs to be.

Hopefully this is clear enough.

Thank you.

Jose

Answers (7)

2011-01-16

rilwis answers:

I don't know what you mean your page "apply.php", I think you're talking about a page template (its file name is "apply.php"), so I made this code for this page template. Of course, you can use any Template Tags instead:

// add scripts and styles for custom page templates
add_action('wp_print_styles', 'rw_print_scripts');
function rw_print_scripts() {
$load_in_footer = true;
$theme_url = get_stylesheet_directory_uri();

if (is_page_template('apply.php')) { // you can use any Template Tags here
wp_enqueue_script('rw-validate', $theme_url . '/js/jquery.validate.js', array('jquery'), '', $load_in_footer);
wp_enqueue_script('rw-maskedinput', $theme_url . '/js/jquery.maskedinput-1.0.js', array('jquery'), '', $load_in_footer);
wp_enqueue_script('rw-dimensions', $theme_url . '/js/jquery.dimensions.js', array('jquery'), '', $load_in_footer);
wp_enqueue_script('rw-accordion', $theme_url . '/js/jquery.accordion.js', array('jquery'), '', $load_in_footer);
}
}


I also use a variable $load_in_footer with default value is TRUE, that will loads all these scripts in footer. This may help your page (a bit) run faster.

PS: The names of scripts are prefixed "rw-" to make them unique.

Editted: I forgot to mention about file path. I did for the case if all your JS files are located in "js" folder under theme folder. You can change this to other URL (must be absolute) to match your need.

2011-01-16

Maor Barazany answers:

First, it is better to put your js links at the footer.php file and not in the header.php file.

Second, if you just want to load the scripts on a specified page you can use the if statement.
Anyway, since I believe apply.php is a custom template file, you need to recognize that you are in this page.
One way is to have a variable inside the apply.php and set it to true on the page.
put this in the apply.php, at the top of the file this -
<?php $loadthejs = true;?>

Then, at the end of this file, after the call to the <?php get_footer(); ?> add this -
<?php $loadthejs = false;?>

Then, in your footer file put this:

<?php global $loadthejs ;
if ($loadthejs == 1) { ?>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript" src="js/jquery.maskedinput-1.0.js"></script>
<script type="text/javascript" src="js/jquery.dimensions.js"></script>
<script type="text/javascript" src="js/jquery.accordion.js"></script>
<?php } ?>


In order to use the WP enqueue script, you can replace any of the four scripts with a line like this -

wp_register_script('myname1', ("js/jquery.accordion.js"), false);
wp_enqueue_script('myname1');


Where 'myname1' is a common name you want, and the the path (maybe full path needed there) to the script src.

About the jQuery, since it is already loaded - you don't need to reload it.
If you want to reload jquery and not WP default jQuery version, you should de-register it first, and the register it again with your path, better to load it directly from Google:


wp_deregister_script('jquery');
wp_register_script('jquery', ("http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"), false);
wp_enqueue_script('jquery');

2011-01-16

Peter Michael answers:

wp_enqueue_script is good documented: [[LINK href="http://codex.wordpress.org/Function_Reference/wp_enqueue_script"]]http://codex.wordpress.org/Function_Reference/wp_enqueue_script[[/LINK]]

2011-01-16

David answers:


function enqueue_scripts() {

if ( is_page_template('apply.php') ){
wp_enqueue_script( 'jquery.validate', 'js/jquery.validate.js', array('jquery'));
wp_enqueue_script( 'jquery.validate', 'js/jquery.maskedinput-1.0.js', array('jquery'));
wp_enqueue_script( 'jquery.validate', 'js/jquery.dimensions.js', array('jquery'));
wp_enqueue_script( 'jquery.validate', 'js/jquery.accordion.js', array('jquery'));

}
}
add_action('wp_print_scripts', 'enqueue_scripts');

Throw this is your themes or child themes functions.php
These scripts will be enqueued when the template apply.php is used, no need to register jquery it is included in WP


David comments:

Yep sorry my bad, was a late night... Hope that it works for you José


David comments:

Thanks José, hope that it worked for you, it seemed the most easiest/cleanest of ways. Sorry about the typo..


David comments:

Thanks <strong>José</strong>, sorry about the typo. It seemed the easiest/cleanest of ways to do it.


David comments:

Best thing to do would be to contact one of us..

If you was to up the price a little I think that it would be easily resolved.

Although can I ask why you cannot add a footer tag on your apply.php template?

2011-01-16

WP Answers answers:

Hi Jose,

The script below will properly add your javascript files to the head your theme. Simply add this code to your functions.php file and you will be all good to go.


function jose_scripts() {

define('JOSE_JS', get_template_directory_uri() . '/js');

wp_enqueue_script( 'cufon', JOSE_JS .'/cufon.js', array('jquery'));
wp_enqueue_script( 'cufon-fonts', JOSE_JS .'/cufon-fonts.js', array('jquery'));
wp_enqueue_script( 'cufon-settings', JOSE_JS .'/cufon-settings.js', array('jquery'));
wp_enqueue_script( 'jquery', JOSE_JS .'/jquery-1.4.2.min.js', array('jquery'));
wp_enqueue_script( 'jquery-accordion', JOSE_JS .'/jquery.accordion.js', array('jquery'));
wp_enqueue_script( 'jquery-ui', JOSE_JS .'/jquery-ui-custom.js', array('jquery'));
}
add_action('wp_print_scripts', 'jose_scripts');

2011-01-16

José Pardilla answers:

David's method looks good to me, except he made a typo, you need to name differently each script in wp_enqueue_script() (first parameter)

function enqueue_scripts() {

if ( is_page_template('apply.php') ){
wp_enqueue_script( 'jquery-validate', 'js/jquery.validate.js', array('jquery'));
wp_enqueue_script( 'jquery-maskedinput', 'js/jquery.maskedinput-1.0.js', array('jquery'));
wp_enqueue_script( 'jquery-dimensions', 'js/jquery.dimensions.js', array('jquery'));
wp_enqueue_script( 'jquery-accordion', 'js/jquery.accordion.js', array('jquery'));
}
}
add_action('wp_print_scripts', 'enqueue_scripts');


PS: just correcting a typo, he still deserves the 10$ ro at least most of it ;)


José Pardilla comments:

David's method looks good to me, except he made a typo, you need to name differently each script in wp_enqueue_script() (first parameter)

function enqueue_scripts() {

if ( is_page_template('apply.php') ){
wp_enqueue_script( 'jquery-validate', 'js/jquery.validate.js', array('jquery'));
wp_enqueue_script( 'jquery-maskedinput', 'js/jquery.maskedinput-1.0.js', array('jquery'));
wp_enqueue_script( 'jquery-dimensions', 'js/jquery.dimensions.js', array('jquery'));
wp_enqueue_script( 'jquery-accordion', 'js/jquery.accordion.js', array('jquery'));
}
}
add_action('wp_print_scripts', 'enqueue_scripts');


PS: just correcting a typo, he still deserves the 10$ ro at least most of it ;)

2011-01-16

arman syam answers:

You must install RAW HTML
Requirements :
<blockquote>
* WordPress 2.3.1 – 2.7
* Disable visual editor for better results – some characters (e.g. the ampersand) may still be encoded if it’s enabled.
</blockquote>
Now, after plugin activated, you can freely type and insert any script and chars inside your post.