php - How do I get my Javascript scripts working?

I am reading through the developer site for Wordpress and am just at the beginning of my learning of it. I have gotten my CSS to work via the wp_enqueue_style() but my javascript won't work via the wp_enqueue_script().

I have not added any Javascript on the pages themselves, I have the functions.php file with the wp_enqueue_script() in it which points to my /js/functions.js file where I want the toggleNav() function to work in for displaying the navigation menu differently on mobile.

What am I doing wrong? Here is my code:

functions.php

<?php 

   function my_theme_scripts(){
   wp_enqueue_style( 'style', get_stylesheet_uri() );

   wp_enqueue_script( 'functions', get_template_directory_uri() . 
   'js/functions.js', array(), '1.1', true );
  };

   add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

 ?>

functions.js

 function toggleNav() {
            var nav = document.getElementById("navbar");
            if (!nav.style.display || nav.style.display === "none") {
                nav.style.display = "block";
            } else {
                nav.style.display = "none";
            }

        };

I've even tried placing a function call in the footer.php but it doesn't work. When I add the javascript directly into the footer.php file it does work though.

Edit: Console output (I don't mind the images not being found as I'm just wondering about the js right now)

What am I doing wrong? Here is my code:

functions.php

<?php 

   function my_theme_scripts(){
   wp_enqueue_style( 'style', get_stylesheet_uri() );

   wp_enqueue_script( 'functions', get_template_directory_uri() . 
   'js/functions.js', array(), '1.1', true );
  };

   add_action( 'wp_enqueue_scripts', 'my_theme_scripts' );

 ?>

functions.js

 function toggleNav() {
            var nav = document.getElementById("navbar");
            if (!nav.style.display || nav.style.display === "none") {
                nav.style.display = "block";
            } else {
                nav.style.display = "none";
            }

        };

I've even tried placing a function call in the footer.php but it doesn't work. When I add the javascript directly into the footer.php file it does work though.

Edit: Console output (I don't mind the images not being found as I'm just wondering about the js right now)

Share Improve this question edited Jun 20, 2019 at 11:51 asked Jun 20, 2019 at 11:12 Niall 271 silver badge5 bronze badges

did you check js file is enqueued properly or not ? can you see functions.js in view source ? – Chetan Vaghela Commented Jun 20, 2019 at 11:29
In the source there is the following in the head (but I think it might be from the wp_head(), not sure): <script type="text/javascript"> window._wpemojiSettings =... </script> (I didn't add the whole script as it's too long for the comments) – Niall Commented Jun 20, 2019 at 11:34
functions.js doesn't show up in Network though – Niall Commented Jun 20, 2019 at 11:36
did you use child-theme ? – Chetan Vaghela Commented Jun 20, 2019 at 11:37
2 please check in your header.php have wp_head(); AND in footer.php have wp_footer(); ? – Chetan Vaghela Commented Jun 20, 2019 at 12:20

| Show 14 more comments

1 Answer 1

Sorted by: Reset to default 1

You must have to include wp_head() in header.php and wp_footer(); in your footer.php

header.php

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<?php
  wp_head();
?>
<body>

footer.php

 <?php wp_footer();?>
    </body>
    </html>

if you do not add wp_head() AND wp_footer() Wordpress hook does not fire using wp_enqueue_scripts hook .

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

php - How do I get my Javascript scripts working?

1 Answer 1

与本文相关的文章

评论列表(0)