1

I have this code I want to implement onto my website. I have successfully set up a child theme. This code is suppose to change the background every day of the week. I am not all too familiar with Wordpress, and I am wondering where I should place it and how. Can someone please give me step by step instruction what I need to do?

The code is below. Thank you very much.


function chgDailyImg()

{

var imagearray = new Array();

imagearray[0] = "sundaypic.jpg";

imagearray[1] = "mondaypic.jpg";

imagearray[2] = "tuesdaypic.jpg";

imagearray[3] = "wednesdaypic.jpg";

imagearray[4] = "thursdaypic.jpg";

imagearray[5] = "fridaypic.jpg";

imagearray[6] = "saturdaypic.jpg";



var d = new Date(); /*** create a date object for use ***/

var i = d.getDay(); /*** use the date object to get the day of the week - this will be a number from 0 to 6 - sunday=0, saturday=6 -it's the way counting works in javascript it starts at 0 like in the arrays ***/

document.getElementById("dailyImg").src = imagearray;

}/* CSS Document *//* CSS Document */
  • voting to reopen, as the question is trivial but on topic – Mark Kaplun Sep 14 '16 at 3:26
2

In this scenario, the tag that you want to call to execute your function is the wp_head().

Looking at the code you provides, you have the idea down, but I decided to rewrite it differently. In your child theme's functions.php file, add the following:

add_action( 'wp_head', 'wpse_238911_weekly_background' );
    function wpse_238911_weekly_background() {
    $day = date( "l" );

    switch( $day ) {
        case 'Monday':
            $background_image = 'mon-img.jpg';
            break;
        case 'Tuesday':
            $background_image = 'tue-img.jpg';
            break;
        case 'Wednesday':
            $background_image = 'wed-img.jpg';
            break;
        case 'Thursday':
            $background_image = 'thu-img.jpg';
            break;
        case 'Friday':
            $background_image = 'fri-img.jpg';
            break;
        case 'Saturday':
            $background_image = 'sat-img.jpg';
            break;
        case 'Sunday':
        default:
            $background_image = 'sun-img.jpg';
            break;
    }

    ?>
    <style type="text/css">
    body {
        background-image: url( 'http://web.site/img/<?php echo $background_image; ?>' );
    }
    </style>
    <?php
}

Just switch out the mon-img.jpg to your actual image names and change the http://web.site/img/ path to wherever you will be having your day-of-the-week images stored.

  • 2
    Note that native PHP date() will always be in GMT in WP context, that can cause day to be significantly off in timezones with considerable offsets. I would use something like date_i18n( 'N' ) on top of my head (localized time, but numeric so that translation doesn't interfere). – Rarst Sep 14 '16 at 10:30
1

The code you've posted is JavaScript, and it should be placed within a JavaScript file inside of your child theme, e.g.:

/your-child-theme/js/background-changer.js

Your child theme should then enqueue your JS file from within its functions.php file, like so:

function wpse238911_load_js() {
    wp_enqueue_script( 'wpse238911_load_js', get_stylesheet_directory_uri() . '/js/background-changer.js', array(), false, false );
}
add_action( 'wp_enqueue_scripts', 'wpse238911_load_js' );

This is really the only WordPress specific part of your issue.

It looks like there may be a some problems with your JS too. You are assigning the entire imagearray to the src attribute of the #dailyImg element. It looks like you should be using imagearray[i]. Also chgDailyImg() is never executed. Here's a possibly helpful fixed version:

function chgDailyImg() {

    var imagearray = new Array();
    imagearray[0] = "sundaypic.jpg";
    imagearray[1] = "mondaypic.jpg";
    imagearray[2] = "tuesdaypic.jpg";
    imagearray[3] = "wednesdaypic.jpg";
    imagearray[4] = "thursdaypic.jpg";
    imagearray[5] = "fridaypic.jpg";
    imagearray[6] = "saturdaypic.jpg";

    var d = new Date(); /*** create a date object for use ***/
    var i = d.getDay(); /*** use the date object to get the day of the week - this will be a number from 0 to 6 - sunday=0, saturday=6 -it's the way counting works in javascript it starts at 0 like in the arrays ***/

    document.getElementById("dailyImg").src = imagearray[i];
}
chgDailyImg();

At this point we're talking about vanilla JavaScript, and that's off topic for this site. You might have better luck over on Stack Overflow for JavaScript questions.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.