Menu
I have a custom jquery-based slider on homepage of a WordPress site. I'm loading jQuery (jquery.js) and the slider js (jquery.advanced-slider.js) using below code in my functions.php file of my theme.
function my_load_scripts() {
if (!is_admin()) {
wp_enqueue_script("jquery");
if (is_home()) {
wp_enqueue_script('theme-advanced-slider', get_template_directory_uri().'/js/jquery.advanced-slider.js', array('jquery'));
wp_enqueue_script('theme-innerfade', get_template_directory_uri().'/js/innerfade.js', array('jquery'));
}
}
}
add_action('wp_enqueue_scripts', 'my_load_scripts');
Now I put the below code in my header.php file BEFORE wp_head();
<script type="text/javascript">
var $j = jQuery.noConflict();
$j(document).ready(function () {
//Slider init JS
$j(".advanced-slider").advancedSlider({
width: 614,
height: 297,
delay: 1000,
pauseRollOver: true
});
});
</script>
It's obvious here that my jquery.js and jquery.advanced-slider.js load after the JavaScript code above and thus my slider doesn't work. If I put it after wp_head() call in <head> the slider works.
But if I put it after wp_head() wouldn't that be a hack? I want my code to be clean. As twentyeleven theme clearly says
/* Always have wp_head() just before the closing </head>
* tag of your theme, or you will break many plugins, which
* generally use this hook to add elements to <head> such
* as styles, scripts, and meta tags.
*/
I'm very confused here. I might be missing something very simple clue here. But help me out guys. What would be the best way to put the JavaScript before wp_head() and yet have it load after jquery.js and slider.js have loaded?
761
Load your JavaScript the correct way To register, or essentially make WordPress aware of the script's existence, use wp_register_script() . To load a script onto a page, use wp_enqueue_script() . wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer ); wp_register_script( $handle, $src, $deps, $ver, $in_footer );
jQuery is a JavaScript library, so it operates on top of JavaScript. It cannot exist on its own, so you can't use one over the other. You can use just JavaScript or JavaScript and jQuery. jQuery was introduced to make development with JavaScript easier.
Add your script block to the bottom of the HTML page, just before the </body>.
Your slider init JS code won't get executed until the full DOM has been parsed in the browser anyway so there is no disadvantage to this.
In fact web performance experts like Steve Souders suggest that script blocks should be added at the end of your HTML page as script blocks block rendering and the page appears to load faster this way.
198
As per wordpress function reference:
The safe and recommended method of adding JavaScript to a WordPress generated page is by using wp_enqueue_script(). This function includes the script if it hasn't already been included, and safely handles dependencies.
If you want to keep your "code clean" you might rethink how your js is organised. My approach with wordpress is to (usually) keep a scripts.js for all initialisation and small scripts and separate file(s) for plugins. But everything depends how big and how many files you have - you want to avoid too many http requests and files that are hard to manage.
As well, wp_enqueue_script lets you place the scripts in the footer. http://codex.wordpress.org/Function_Reference/wp_enqueue_script
29
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
