Using JQuery with Wordpress CMS to change background color of table cells

CMS & WordPress
1

I’m not sure whether this post should go in this forum, or in the jquery one. Everytime I try to use jquery in
one of my Wordpress sites, and google for answers, I get a multitude of different opinions on what to do.
I want to use the jquery that comes with Wordpress.

I am converting a client’s site into a Wordpress CMS and on one page there is a schedule in table form where
different table cells are color-coded depending on which session the date is in.

I used the plugin tinyMCE Advanced to allow the client to build various tables on the site. With this plugin, I can
change the background color of the text in the table cell (the editor wraps it in a <span> tag), but not the background-color of the table cell itself.

Here is an image of what I want … and an image of what the editor will allow me to do.

This is the code I put in the head of my site. It doesn’t work, but I have no idea what to do to fix it. Can anyone help me?

<?php wp_enqueue_script('jquery'); ?>

   <script type="javascript">

     $(document).ready(function() {
          $('#schedule_9week span').each(function(){
             $(this).parent().css('background-color', $(this).css('background-color'));
          });
      });

   </script>

	<?php wp_head(); ?>
</head>
2

Hi there,

There could be a bunch of reasons that this isn’t working.
Could you post a link to a page where I can see the error?

3

I can’t post a link unfortunately. I am developing this locally using a barebones theme that I am coding just for this site. The rest of the site works fine, but I can’t get this jquery to function. Would it help if I uploaded the site somewhere? But then you wouldn’t be able to access all of the code to see exactly what’s going on.

4

Yeah, that would help a great deal.
At first, it doesn’t really matter what PHP is behind the HTML being output, we just need to get a rough idea of where to start looking.

5

I have uploaded the site now. The page in question is here and the table I am trying to change with jquery is the third one down. Can you see what I did wrong with my jquery (see above post)? I have never had much luck getting javascript to cooperate with Wordpress. Please refer to the two images in my first post to get an idea of what I am trying to do. Thank you.

6

Hi,

You were almost there, but there are a couple of little things you have to change.

First off, you have this in line 24:

<script type="javascript">

change it to:

<script type="text/javascript">

Then you need to move the entire JavaScript block to the end of the document, just before the closing </body> tag.
As it is you are calling your script before jQuery has loaded and thus are getting an error.

The third thing you need to change is this:

$(document).ready(function() {

into this:

jQuery(document).ready(function ($) {

The reason for this is that the jQuery library included with WordPress loads in “no conflict” mode. This is to prevent compatibility problems with other JavaScript libraries that WordPress can load.
In “no-confict” mode, the $ shortcut is not available and the longer jQuery is used. By including the $ in parenthesis after the function call you can then use this shortcut within the code block.
You can read more about this here: http://stackoverflow.com/questions/10807200/jquery-uncaught-typeerror-property-of-object-object-window-is-not-a-funct

Your code will then look like this:

        ...
      </div><!-- end of container div -->
    </div><!-- end of wrapper div -->
  
    <script type='text/javascript' src='http://jaybeeweb.com/Markham_Gym/wp-content/plugins/ultimate-tables/js/jquery.dataTables.js?ver=1.0'></script>
    <!-- Don't forget analytics -->
    
    <script type="text/javascript">
      jQuery(document).ready(function ($) {
        $('#schedule_9week span').each(function(){
          $(this).parent().css('background-color', $(this).css('background-color'));
        });
      });
    </script>
  </body>
</html>

And everything will be good.
Hope that helps

7

Wow, it worked like a charm. Thank you so much. That first mistake … well I have no excuse for that. I should have know better. I learned from the other two changes. Your explanation makes a lot of sense and helped clarify all the discussion out there around jQuery and Wordpress.