Message:

I've searched the internet for information on how to make the image of the login page to the admin panel in wordpress change depending on the time, but nothing works in my functions.php file. I am showing you the code I used. My guess is that I have done the wrong combination of java script and css in the php file. I ask you guys how I could make the code to make it work.

Additionally, I am wondering how to make the page use the local time of the person who is browsing the page, so that, for example, when someone is in New York, he can see the day background when it is daytime there, and someone from Moscow can have the day background and the night background in his own time.

When everything works, I will of course apply it to the main page.

Thank you for any help ;)

    <script type="text/JavaScript">

    var date = new Date();

    var hours = date.getHours();



    var sunset_img= "/images/2.png";



    var night_img = "/images/1.png";





    if((hours > 18)&&(hours < 6)){

    document.getElementById('feature_img').setAttribute('src', night_img);

    }

    else{

    document.getElementById('feature_img').setAttribute('src', sunset_img);

    }

    </script>

    <?php



    function my_login_logo() { ?>

    <style type="text/css">

        body.login

        {

        background-image: url(<?php echo get_stylesheet_directory_uri(); ?>feature_img);

        background-repeat: no-repeat;

        background-attachment: fixed;

        background-position: center;

        background-size:cover;

        }

}

    

<?php }

add_action( 'login_enqueue_scripts', 'my_login_logo' );

My Answer:
To make the code work, you need to make a few adjustments. First, you need to include the correct path to the images in the JavaScript code. Also, you need to add an id to the body tag in the login page so that you can target it in the JavaScript code. Here's an updated version of your code:

javascript

In your PHP code, you need to add an id to the body tag in the login page:

php

function my_login_logo() { ?>




add_action( 'login_enqueue_scripts', 'my_login_logo' );

Make sure to add the id "login-body" to the body tag in your login page template:

html

With these changes, the background image of the login page should change based on the time of day. Additionally, to make the page use the local time of the person browsing the page, you can use JavaScript to get the user's timezone offset and adjust the time accordingly.

Rate this post

Comments