Theme Development: JavaScript not working when linked from functions.php

Question

I created a header with two modals using html, css, and javascript. Linking these within the html document.

I've decided to create a wordpress theme, and will include the mentioned header. I am following the Theme Developer Handbook by Wordpress, and have simply copied and pasted the code where it needs to go in header.php etc.

As it is more proper to do so, I created a functions.php file and used wp_enqueue_script to add my javascript. It is not working. When I say not working, I mean it doesn't even load onto the page.

functions.php

  <?php

function k9stormdomestictheme_script_enqueue() {
  wp_enqueue_style( 'k9stormdomesticstyle', get_stylesheet_uri() );
  wp_enqueue_script( 'k9stormdomesticscript', get_template_directory_uri() . '/js/script.js', array (), 1.1, true);

}

add_action('wp_enqueue_scripts', 'k9stormdomestictheme_script_enqueue');

?>

index.php

<?php
    get_header();
    get_footer();
?>

script.js

var modalBtns = [...document.querySelectorAll(".button")];
modalBtns.forEach(function(btn){
  btn.onclick = function() {
    var modal = btn.getAttribute('data-modal');
    document.getElementById(modal).style.display = "block";
  }
});

var closeBtns = [...document.querySelectorAll(".close")];
closeBtns.forEach(function(btn){
  btn.onclick = function() {
    var modal = btn.closest('.modal');
    modal.style.display = "none";
  }
});

window.onclick = function(event) {
  if (event.target.className === "modal") {
    event.target.style.display = "none";
  }
}

I really appreciate any help. Thank you very much!

Try giving more information about what is not working exactly. Is there any error? Does it not work in the way you expected? If so, explain what you expect and what is actually happening — Ángela
– Ángela, Commented Dec 13, 2018 at 19:32

Ryan · Accepted Answer · 2019-06-20 20:42:11Z

1

You're not actually enqueuing any external scripts at all in your functions.php file. You need to reference the path to the file as the 2nd parameter of your wp_enqueue_script method.

get_template_directory_uri() simply tells the method to go to the root of your theme folder, it doesn't specify the javascript file that you're trying to enqueue. It should look more like this:

<?php

    function k9stormdomestictheme_script_enqueue() {
        wp_enqueue_style( 'style', get_stylesheet_uri() );
        wp_enqueue_script( 'script', get_template_directory_uri() . '*the-remaining-path-to-your-js-file*' );

    }

    add_action('wp_enqueue_scripts', 'k9stormdomestictheme_script_enqueue');

?>

As a point of reference, check out the parameters section of the wp_enqueue_script function on the WordPress code reference: https://developer.wordpress.org/reference/functions/wp_enqueue_script/#parameters

UPDATE: 2019/06/20

As this has been identified as a child theme, you need to point to the CHILD theme's directory for your script source.

Using the get_template_directory_uri() reference will point to the parent theme's directory, not the child theme instance, whereas the get_stylesheet_uri() points to the stylesheet (style.css) file of the child theme.

This is what the finalized reference should look like:

<?php

    function k9stormdomestictheme_script_enqueue() {
        wp_enqueue_style( 'k9stormdomesticstyle', get_stylesheet_uri() );
        wp_enqueue_script( 'k9stormdomesticscript', get_stylesheet_uri() . '/js/script.js', array (), 1.1, true);
    }

    add_action('wp_enqueue_scripts', 'k9stormdomestictheme_script_enqueue');

?>

edited Jun 20, 2019 at 20:42

answered Dec 13, 2018 at 22:04

Ryan

5791 gold badge5 silver badges17 bronze badges

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

3 Comments

Meghan Slater Over a year ago

Hello, Thank you for your input, that makes a lot of sense to me. I've made those changes, but it still does not work!

Ryan Over a year ago

A few clarifying questions: (1) Are you receiving an error, or is the fine just not being enqueued? (2) Is this a parent or a child theme? (3) I assume your functions.php file is in the root of your theme folder?

Meghan Slater Over a year ago

(1) No error, the script is not being enqueued. The script works if I put it in my header.php (2) Child theme (3) functions.php is in the root of my theme folder.

Collectives™ on Stack Overflow

Theme Development: JavaScript not working when linked from functions.php

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related