JS File not running the script in wordpress custom theme

Question

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----
<?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(),'1.0' , true);
    wp_enqueue_style('main_styles',get_stylesheet_uri(),NULL,microtime());    
}
add_action('wp_enqueue_scripts','get_files');

Terminator-Barbapapa · Accepted Answer · 2020-06-25 16:50:44Z

1

Try the following:

wp_enqueue_script( 'main-scripts', get_stylesheet_directory_uri() . '/scripts.js', array(), '1.0', true );

Also at the moment you've declared your navSlide function but as far as I can see you haven't called it.

answered Jun 25, 2020 at 16:50

Terminator-Barbapapa

3,1362 gold badges7 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

John Smith Over a year ago

Same problem and this doesn't help anything. The script loads, I can see the script call in the page header, yet it never runs at all or is visible to the page. I added an anonymous function that just writes to the log to confirm. Some other step is being omitted here.

Collectives™ on Stack Overflow

JS File not running the script in wordpress custom theme

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related