Thanks for you kind words. I’m glad you’re enjoying the theme.
All my scripts and stylesheets are loaded from within the functions.php. This is the correct way to load them within WordPress so as to avoid conflicting with any other scripts that get loaded either by WordPress itself or your plugins.
If you search for a function called quark_scripts_styles() you’ll see where they’ve been loaded.
To load your script, all you need to do is:
wp_register_script( 'myscript', trailingslashit( get_template_directory_uri() ) . 'js/jsFunctions.js', array( 'jquery' ), '1.0', true );
wp_enqueue_script( 'myscript' );
The above assumes that your script requires jQuery to run. If it doesn’t (ie. it’s just pure javascript), you can change array( 'jquery' ) to simply array().
Hope this helps.
Yep, that did the trick. Thanks again Anthony, and if there’s any way I can get involved with future projects let me know. My skill set surrounds PHP, Web Design, jQuery, and graphics.
I’m effectively confused here. The code above works, but it loads my external js file at the bottom of the page after the content is loaded. jQuery is loaded before page content, which is how it should be. But everything I’ve read about external files state that they should be loaded before any content. There’s got to be something I’m missing here.
Anthony should this code be encapsulated in a custom function? Just thinking out loud here.
wp_register_script( ‘myscript’, trailingslashit( get_template_directory_uri() ) . ‘js/jsFunctions.js’, array( ‘jquery’ ), ‘1.0’, true );
wp_enqueue_script( ‘myscript’ );
js/jsFunctions.js’, array( ‘jquery’ ), ‘1.0’, true ); should be
js/jsFunctions.js’, array( ‘jquery’ ), ‘1.0’, false);
false makes it load before any page content, I learned something, hahaha
Thanks Chris. And yep, that last True/False parameter will tell WordPress if the script is to placed at the bottom of the <body> or in the <head> section. If it’s True, it’ll be at the bottom of your html file, and False will add it to the <Head>.
Loading your scripts at the bottom of the document is (usually) better than loading at the top. It will allow your page to load visibly before executing JavaScript. This means it wont hold up the page load. If you’re using jQuery, you can attach to the “ready” handler, which makes sure that it executes JavaScript code after the DOM has been fully loaded.
Although this topic is resolved, I’ve run into yet another roadblock. My js code doesn’t work in WP, however it does work on the website this is going to replace. I know the file loads because I’ve seen and clicked on it from the View Source option. As an additional assurance, I put some silly
$(document).ready(function(){
$(“targetElementHere”).click(function(){
alert(“You clicked”);
});
});
And that works. But the actual code I want doesn’t work. I’m missing something and it’s probably something stupid like file location. Anthony, do javascript files belong in the wp-content or wp-includes js folder?
Hi Chris. Nope, you shouldn’t be putting any of your code in any of those core WordPress folders. For starters, when WordPress updates, you’ll most likley lose your files.
All your theme files should reside within your theme folder. The best place for your javascript is with the rest of the javascript files for the theme, which is the “js” folder within the theme folder.
Always something stupid!! Some of my css styles were conflicting with other styles that come with this theme.
Ahhh Good to hear you got it sorted at least. Well done!
Thanks Anthony, worked a treat. been looking for this for ages and no fixes, this was spot on
