WordPress.org

Ready to get started?Download WordPress

Forums

Quark
[resolved] Link to external javascript file (11 posts)

  1. ChrisHPZ
    Member
    Posted 1 year 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.

  2. ahortin
    Member
    Theme Author

    Posted 1 year ago #

    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.

  3. ChrisHPZ
    Member
    Posted 1 year ago #

    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.

  4. ChrisHPZ
    Member
    Posted 1 year ago #

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

  5. ChrisHPZ
    Member
    Posted 1 year ago #

    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

  6. ahortin
    Member
    Theme Author

    Posted 1 year ago #

    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.

  7. ChrisHPZ
    Member
    Posted 1 year ago #

    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?

  8. ahortin
    Member
    Theme Author

    Posted 1 year ago #

    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.

  9. ChrisHPZ
    Member
    Posted 1 year ago #

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

  10. ahortin
    Member
    Theme Author

    Posted 1 year ago #

    Ahhh Good to hear you got it sorted at least. Well done!

  11. Mediamanuk
    Member
    Posted 1 year ago #

    Thanks Anthony, worked a treat. been looking for this for ages and no fixes, this was spot on

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic