Question 243636 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Problems enqeue scripts in wordpress (going nuts)

I’m trying to enqeue a custom.js in my wordpress theme created from scratch. Here’s what I have;

Here’s what I have tried

functions.php

<?php

function add_theme_scripts() {

    wp_enqueue_style('default-style', get_stylesheet_directory_uri() .'/style.css');
    wp_enqueue_style('bootstrap-style', get_stylesheet_directory_uri() .'/css/bootstrap.min.css');

    // Dequeue WordPress included jQuery
  wp_deregister_script('jquery');
  wp_enqueue_script('jquery', get_template_directory_uri() . '/js/jquery.min.js', array(), '3.0.0', true);


    wp_enqueue_script('bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '1.0', true);
    wp_enqueue_script('custom-js', get_template_directory_uri() . '/js/custom.js', array('jquery'), null, true);

}
add_action('wp_enqueue_scripts', 'add_theme_scripts');


custom.js

document.addEventListener('DOMContentLoaded', function () {
  const colorButton = document.getElementById('color-button');
  const colorDisplay = document.getElementById('color-display');

  const colors = ['color1', 'color2', 'color3', 'color4', 'color5'];
  let currentIndex = 0;

  function changeBackgroundColor() {
    document.body.className = colors[currentIndex];
    colorDisplay.textContent = getComputedStyle(document.body).backgroundColor;
    currentIndex = (currentIndex + 1) % colors.length;
  }

  colorButton.addEventListener('click', changeBackgroundColor);
});

Have tried to deqeue the built in jquery and enqeued the latest. Have tried the register and then enqeue variant as well but it just wont list out the javascripts when I look in the source code.

Have tried a simple variant where I just have

<?php

function add_theme_scripts() {

    wp_enqueue_style('default-style', get_stylesheet_directory_uri() .'/style.css');
    wp_enqueue_style('bootstrap-style', get_stylesheet_directory_uri() .'/css/bootstrap.min.css');

    wp_enqueue_script('bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '1.0', true);
    wp_enqueue_script('custom-js', get_template_directory_uri() . '/js/custom.js', array('jquery'), null, true);

}
add_action('wp_enqueue_scripts', 'add_theme_scripts');

The styles are there, the js wont show. What am I missing? It’s a simple script that should change the background color on body when one click a button.

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Finally got it to work with

    function add_theme_styles() {

    wp_enqueue_style('default-style', get_stylesheet_directory_uri() .'/style.css');
    wp_enqueue_style('bootstrap-style', get_stylesheet_directory_uri() .'/css/bootstrap.min.css');

}
add_action('wp_enqueue_scripts', 'add_theme_styles');

function my_plugin_assets() {

    wp_register_script('customjs', get_template_directory_uri(). '/js/custom.js', array('jquery'), null, true);
  wp_enqueue_script('customjs');

    wp_register_script('bootstrap-js', get_template_directory_uri(). '/js/bootstrap.min.js', array('jquery') , '3.0.0', true);
    wp_enqueue_script('bootstrap-js');

}

add_action( 'wp_enqueue_scripts', 'my_plugin_assets', 100 );

    and then

    document.addEventListener('DOMContentLoaded', function () {
  const colorButton = document.getElementById('color-button');
  const colorDisplay = document.getElementById('color-display');

  const colors = ['color1', 'color2', 'color3', 'color4', 'color5'];
  let currentIndex = 0;

  function changeBackgroundColor() {
    document.body.className = colors[currentIndex];
    colorDisplay.textContent = getComputedStyle(document.body).backgroundColor;
    currentIndex = (currentIndex + 1) % colors.length;
  }

  colorButton.addEventListener('click', changeBackgroundColor);
});


  2. 0

    Try unrooting your js in
    `

    jQuey(document).ready(function(){
document.addEventListener('DOMContentLoaded', function () {
  const colorButton = document.getElementById('color-button');
  const colorDisplay = document.getElementById('color-display');

  const colors = ['color1', 'color2', 'color3', 'color4', 'color5'];
  let currentIndex = 0;

  function changeBackgroundColor() {
    document.body.className = colors[currentIndex];
    colorDisplay.textContent = getComputedStyle(document.body).backgroundColor;
    currentIndex = (currentIndex + 1) % colors.length;
  }

  colorButton.addEventListener('click', changeBackgroundColor);
});
})

    `

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search