jQuery code not working with wordpress site

Question

So im working on a site, a custom wp theme with a _s boilerplate, i've enqueue my styles and scripts which the browser picks up fine no errors;

wp_enqueue_style( 'bootstrap-css', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css' );

    wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array(jquery), true);

    wp_enqueue_style( 'cbd-yums-style', get_stylesheet_uri() );

    wp_enqueue_script( 'cbd-yums-scripts', get_template_directory_uri(). '/js/scripts.js', array(), true );

scripts.js is where my jquery code is AND IM TRYING TO CHANGE THE TEXT COLOR OF MY MAIN NAVIGATION ITEMS i tried this code believing it would work:

( function( $ ) {

    $('.primary-menu .menu-item').css('background-color', '#AED038');

} ) ( jQuery );

& the corresponding HTML

<nav id="site-navigation" class="main-navigation col-md-6 col-lg-6">
  <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false">Primary Menu</button>
  <div class="menu-header-menu-container">
    <ul id="primary-menu" class="menu nav-menu" aria-expanded="false">
      <li id="menu-item-44" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-44"><a href="#home">Home</a></li>
      <li id="menu-item-45" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-45"><a href="#about">About</a></li>
      <li id="menu-item-46" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-46"><a href="#products">CBD Products</a></li>
    </ul>
  </div>        
</nav>

But no change on browser reload, so i went back to w3schools to check my syntax. i modified the jquery css() example;

Can anybody see that i'm doing wrong?

Why didn't you added jQuery to your dependencies? ` wp_enqueue_script( 'cbd-yums-scripts', get_template_directory_uri(). '/js/scripts.js', array('jquery'), true );` And why isn't jquery a string in this --> `wp_enqueue_script( 'bootstrap-js', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js', array(jquery), true);` ? — DanieleAlessandra, Oct 25 '18 at 12:07
doesn't work, i tried : $('.primary-menu .menu-item').css('cssText', 'background-color: #AED038 !important;'); , i found the use of cssText here https://stackoverflow.com/questions/1986182/how-to-include-important-in-jquery — K4S3, Oct 25 '18 at 12:12
@SumeshTG no need to use `!important` - inline css has highest specificity weight, so use of !important is redundant. — treyBake, Oct 25 '18 at 12:30
primary-menu is an id not a class, use like #primary-menu not like .primary-menu — charan kumar, Oct 25 '18 at 12:40

score 3 · Answer 1 · answered Oct 25 '18 at 12:11

3

you have to select ids with # prefix in jquery, in current situation call in id with . prefix that means class name, jquery is searching class name primary-menu, since you dont have any element with class name primary-menu, the style is ignored.

the issue can be solved by change the query $('#primary-menu .menu-item').css('background-color', '#AED038');

answered Oct 25 '18 at 12:11

Hafeez Hamza

794
3
16

thanks you for pointing that out and i've even got my glasses on lol, but it still didn't work, $('#primary-menu .menu-item').css('background-color', '#AED038'); am i right in saying that in theory this should 1. look for and element with ID 'primary-menu' 2. look for a child element with class 'menu-item' 3. change the elements background-color to #aed038. – K4S3 Oct 25 '18 at 12:24

score 0 · Answer 2 · answered Oct 25 '18 at 13:42

I FOUND THE PROBLEM!! 1. i didn't have jQuery properly loaded as a dependency 2. I didn't make sure jQuery was written in not conflict mode

so i simply changed it to

 jQuery(document).ready(function($){
    $('#primary-menu .menu-item').css('background-color', '#AED038');
});

and in the functions.php where i have to enqueue scripts and styles

wp_enqueue_script( 'cbd-yums-scripts', get_template_directory_uri(). '/js/scripts.js', array( 'jquery' ), '20181025' ,true );

thank you everyone for helping me narrow down the problem

Daniël Visser · Answer 3 · 2018-10-25T14:59:54.930

-1

A page can't be manipulated safely until the document is "ready." - http://learn.jquery.com/using-jquery-core/document-ready/

Alter your code like this:

(function($) {

    $(document).ready(function() {

        $('#primary-menu .menu-item').css('background-color', '#AED038');

    });

})(jQuery);

Now the code will execute once the document is ready.

And as Hafeez Hamza pointed out: change .primary-menu to #primary-menu.

edited Oct 25 '18 at 14:59

answered Oct 25 '18 at 12:28

Daniël Visser

581
3
13

What? Shorthand for `$(document).ready(function() {` is `$(function() {`. Could you clarify? – Daniël Visser Oct 25 '18 at 12:44
From the first anwser referring to `(function($){` : *The code in your question has nothing to do with .ready(). Rather, it is an immediately-invoked function expression (IIFE) with the jQuery object as its argument.* – Daniël Visser Oct 25 '18 at 12:58
sort by votes - and even so, the problem isn't due to how they declared the `$(document)` – treyBake Oct 25 '18 at 13:00
Ow yes that could be the problem, wordpress places the scripts tags in the head. See this JSfiddle demonstrating my point: https://jsfiddle.net/jrducf6v/3/ If you can refute that i will delete my answer. – Daniël Visser Oct 25 '18 at 13:22
you have a flawed test - jQuery/JavaScript is synchronous - it will take the last given values.. example 1: https://jsfiddle.net/hjxv26de/ works and example 2: https://jsfiddle.net/8ekwbpur/ works – treyBake Oct 25 '18 at 13:26
No the test is valid, i targeted diffrent elements by id: `#menu-item-44`, `#menu-item-45` and `#menu-item-46` so that it would not override.The second JSfiddle only works because the `load type` is set to `on load`. I changed the load type of your JSfiddle and it does not work: https://jsfiddle.net/8ekwbpur/1/ – Daniël Visser Oct 25 '18 at 13:36

jQuery code not working with wordpress site

3 Answers3