rosmith

Fantastic! That did the trick!

Andrew, thank you so much for your persistence and help!!

I really appreciate it!

Ron Smith

Good call, Andrew!

I removed the hyphens in the functions.php script and uploaded the script again. When I refreshed the browser, the site returned.

I viewed the page source and found the following:
<script type='text/javascript' src='http://blogs.westmont.edu/athletics/wp-content/themes/westmont_athletics/westmont_athletics/js/featureImg.js?ver=3.9.1'></script>

However, the script is still not functioning as the images in the header are not rotating.

Just to summarize, here is what I now have in the functions.php script:

<?php

function featureImage() {
    wp_enqueue_script(
        'featureImage', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . '/westmont_athletics/js/featureImg.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}

add_action( 'wp_enqueue_scripts', 'featureImage' );

Here is what I have in the featureImg.js script:

jQuery(document).ready(function(){
    var curImgId = 0;
    var numberOfImages = 10; // Change this to the number of background images
    window.setInterval(function() {
      JQuery('.featureImg').fadeTo('slow', 0, function() {
        jQuery(this).css('background-image','url(http://www.westmont.edu/_sports/images/photos/headers/rotation' + '/' + curImgId + ')').fadeTo('slow', 1);
      });
        curImgId = (curImgId + 1) % numberOfImages;
    },8* 1000);
})();

Here is the code in the style.css file:

.featureImg {
    background-image:url(http://www.westmont.edu/_sports/images/photos/headers/rotation/0);
    background-position:left;
    background-repeat:repeat-x;
border-bottom:3px double #666;clear:both;height:72px;margin:0 0 0;padding:0;
}'

And here is what is in header.php:

<div class=”featureImg”></div>’

Hi Andrew!

I have removed the exit; and ?> tag. Still returning a blank page.

Hi Andrew,

So, I discovered one problem. I had named my php file function.php, not functions.php.

So, I created a functions.php file and uploaded it to themes/westmont_athletics.

When I went to the site and hit the refresh button, it returned nothing at all, just a black page.

I tried changing to:
get_template_directory_uri() . '/westmont_athletics/js/featureImg.js'
but that also produced a blank page.

Hi Andrew!

Thanks again for your help.

My directory structure was:
http://blogs.westmont.edu/athletics/wp-content/themes/js/featureImg.js

I changed this to:
http://blogs.westmont.edu/athletics/wp-content/themes/westmont_athletics/js/featureImg.js

I also changed the script to:

function feature-image() {
    wp_enqueue_script(
        'feature-image', // name your script so that you can attach other scripts and de-register, etc.
        get_template_directory_uri() . 'westmont_athletics/js/featureImg.js', // this is the location of your script file
        array('jquery') // this array lists the scripts upon which your script depends
    );
}

add_action( 'wp_enqueue_scripts', 'feature-image' );

Unfortunately, it did not make a difference.

As I mentioned earlier, I’m fairly new to all of this and may have missed something very basic. So, I tried to think through it in terms of process. I may being making some incorrect assumptions, but perhaps I’ve found a missing step in the process. Here is what I am thinking:

1. When WordPress loads the header, it comes across:
<div class=”featureImg”></div>

2. the <div> code sends it to style.css where it finds:

.featureImg {
    background-image:url(http://www.westmont.edu/_sports/images/photos/headers/rotation/0);
    background-position:left;
    background-repeat:repeat-x;
border-bottom:3px double #666;clear:both;height:72px;margin:0 0 0;padding:0;

3. The image loads and is formatted by the rest of the attributes listed.

4. How does WordPress then know to look for the js script and carry it out?

Hi Christine!

Thank you for the revised code.

I copied and pasted it into the featureImg.js file and uploaded it to themes/js/ directory. Unfortunately, that did not do the trick, the script is still not running.

Thank you! Downloading and installing a new file did the trick.

Can anyone please help me with this?