Link to external javascript file

  • Resolved ChrisHPZ

    (@chrishpz)


    11 years, 9 months ago

    Hi Anthony, how are you. So first let me say that I love this theme. It is clean, functional and modern. Plus I’m a bit partial to the color scheme. Thanks for making this available to the community. So I’m having a bit of difficulty linking to an external javascript file. The code I’m using is as follows:

    <script type=”text/javascript” src=”js/jsFunctions.js”></script>

    I’m placing this file in the js folder with all of the other javascript files that come with this theme. A lot of websites say to put the above code in between the meta tags and the stylesheet code. But for the life of me I can’t seem to find this file. Unless I’m overlooking something, I’ve checked header.php, single.php, page.php, and content.php Can you point me in the right direction? Thanks brother.

Viewing 10 replies - 1 through 10 (of 10 total)
  • Theme Author Anthony Hortin

    (@ahortin)

    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.

    Thread Starter ChrisHPZ

    (@chrishpz)

    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.

    Thread Starter ChrisHPZ

    (@chrishpz)

    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’ );

    Thread Starter ChrisHPZ

    (@chrishpz)

    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

    Theme Author Anthony Hortin

    (@ahortin)

    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.

    Thread Starter ChrisHPZ

    (@chrishpz)

    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?

    Theme Author Anthony Hortin

    (@ahortin)

    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.

    Thread Starter ChrisHPZ

    (@chrishpz)

    Always something stupid!! Some of my css styles were conflicting with other styles that come with this theme.

    Theme Author Anthony Hortin

    (@ahortin)

    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

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Link to external javascript file’ is closed to new replies.