Support » Developing with WordPress » JS File not running the script

JS File not running the script

  • Resolved Purvesh Ghedia

    (@purvesh123)


    1 year, 5 months ago

    I am trying to create a custom WordPress theme. In which I’m trying to create a responsive header but I’m somehow unable to run the script that I’ve written in my scripts.js . I guess there is something that I am doing wrong while linking it to the theme because the script runs perfectly fine outside WordPress. This is my code:
    header.php–

    <body>
<nav>  
  <div class="logo">
        <h4>The Nav</h4>
    </div>
    <ul class="nav-links">
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Projects</a></li>
    </ul>
    <div class="burger">
        <div class="line1"></div>
        <div class="line2"></div>
        <div class="line3"></div>
    </div>
</nav>

css--
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

nav {
    padding-top: 30px;
    position: fixed;
    top: 0;
    width: 100%;
    display: flex;
    justify-content: space-around;
    align-items: center;
    min-height: 8vh;
    background-color: #5D4954;
    font-family: "Poppins", sans-serif;
}

.logo {
    color: rgb(226, 226, 226);
    text-transform: uppercase;
    letter-spacing: 5px;
    font-size: 20px;
}

.nav-links {
    display: flex;
    justify-content: space-around;
    width: 30%;
}

.nav-links li {
    list-style: none;
}

.nav-links a {
    color: rgb(226, 226, 226);
    text-decoration: none;
    letter-spacing: 3px;
    font-weight: bold;
    font-size: 14px;
}

.burger {
    display: none;
}

.burger div {
    width: 25px;
    height: 3px;
    background-color: rgb(226, 226, 226);
    margin: 5px;
    transition: all 0.3s ease;
}

@media screen and (max-width: 1024px) {
    .nav-links {
        width: 60%;
    }
}

@media screen and (max-width: 768px) {
    body {
        overflow-x: hidden;
    }
    
    .nav-links {
        position: fixed;
        right: 0px;
        height: 92vh;
        top: 8vh;
        background-color: #5D4954;
        display: flex;
        flex-direction: column;
        align-items: center;
        width: 50%;
        transform: translateX(100%);
        transition: transform 0.5s ease-in;
    }
    
    .nav-links li {
        opacity: 0;
    }
    
    .burger {
        display: block;
        cursor: pointer;
    }
    nav {
        padding-top: 50px;
        position: fixed;
        top: 0;
        width: 100%;
        display: flex;
        justify-content: space-around;
        align-items: center;
        min-height: 8vh;
        background-color: #5D4954;
        font-family: "Poppins", sans-serif;
    }
}

.nav-active {
        transform: translateX(0%);
}

@keyframes navLinkFade {
    from {
        opacity: 0;
        transform: translateX(50px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.toggle .line1 {
    transform: rotate(-45deg) translate(-5px, 6px);
}

.toggle .line2 {
    opacity: 0;
}

.toggle .line3 {
    transform: rotate(45deg) translate(-5px, -6px);
}

scripts.js--
function navSlide() {
    const burger = document.querySelector(".burger");
    const nav = document.querySelector(".nav-links");
    const navLinks = document.querySelectorAll(".nav-links li");
    
    burger.addEventListener("click", () => {
        //Toggle Nav
        nav.classList.toggle("nav-active");
        
        //Animate Links
        navLinks.forEach((link, index) => {
            if (link.style.animation) {
                link.style.animation = ""
            } else {
                link.style.animation = <code>navLinkFade 0.5s ease forwards ${index / 7 + 0.5}s</code>;
            }
        });
        //Burger Animation
        burger.classList.toggle("toggle");
    });
    
}

functions.php
function get_files()
{
    wp_enqueue_script('jQuery-js', 'http://code.jquery.com/jquery.js', array(), '1.0', true);
    wp_register_script('scripts',get_template_directory_uri().'blog-scripts.js',array(),false,'all');
    wp_enqueue_script('scripts'/*, get_theme_file_uri('scripts.js'),NULL,microtime(), true*/);
    wp_enqueue_style('main_styles',get_stylesheet_uri(),NULL,microtime());
    
}
add_action('wp_enqueue_scripts','get_files');
    • This topic was modified 1 year, 5 months ago by Purvesh Ghedia. Reason: mistyped code
Viewing 4 replies - 1 through 4 (of 4 total)
  • Thimal Wickremage

    (@thimalw)

    1 year, 5 months ago

    Hey!

    If I’ve read your code right, I believe you’re registering a script named “scripts” which has the source file “blog-scripts.js” with wp_register_script and then immediately loading that script on the next line with wp_enqueue_script. So you’re not loading the “scripts.js” file anywhere on your code.

    You don’t need to use wp_register_script unless you want to have the script registered and then load it elsewhere on your theme with a conditional statement for an example. So, just using wp_enqueue_script to load both the files as below should fix this.

    wp_enqueue_script('blog-scripts', get_template_directory_uri().'/blog-scripts.js',array(),false, true);
wp_enqueue_script('main-scripts', get_template_directory_uri().'/scripts.js', array(), microtime(), true);

    On an unrelated note, I’d also recommend not using microtime() for the script version and instead defining a constant somewhere in your “functions.php” file and using that.

    Thread Starter Purvesh Ghedia

    (@purvesh123)

    1 year, 5 months ago

    Hello,
    Basically the blog-scripts.js was my main scripts file that I wanted to load.
    I have changed the source code to what you suggested but it still didn’t run the code in the js files… here is the updated code.

    <?php 
function get_files()
{
    wp_enqueue_script('jQuery-js', 'http://code.jquery.com/jquery.js', array(), '1.0', true);
    wp_enqueue_script('main-scripts', get_template_directory_uri().'/scripts.js', array(), , true);
    wp_enqueue_style('main_styles',get_stylesheet_uri(),NULL,microtime());    
}
add_action('wp_enqueue_scripts','get_files');
    Moderator bcworkz

    (@bcworkz)

    1 year, 5 months ago

    It’s recommended that you use your local installation’s version of jQuery instead of using the one from their CDN. It’s already registered as “jquery”, merely specify it as a dependency when enqueuing your own script to have it load. If you need to use the CDN version for any reason, be sure nothing else is trying to load the local version. In this case you should register the jQuery so you can specify it as a dependency of your script. No need to enqueue as well if it’s used as a dependency. (yes, when not to enqueue and when not to register is confusing) Dependencies are the only way to be sure scripts load in the right order. Enqueuing in some order in PHP is not a guarantee.

    The local jQuery runs in noConflict mode, so the usual $ shortcut will not work unless a noConflict wrapper is created for your code. Without it, all use of $ needs to be changed to jQuery.

    If you still have trouble, check you error console.

    Thread Starter Purvesh Ghedia

    (@purvesh123)

    1 year, 5 months ago

    Thanks

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘JS File not running the script’ is closed to new replies.

Topic Tags

Views