Login background slider using functions.php

  • I want to implement this login with jquery full screen slideshow, here’s the demo:

    https://azmind.com/demo/fullscreen-login/

    You can download the html and js/css assets from here.

    I only want the fullscreen background slider and will theme the login form separately, so removing the form portion, the HTML portion is:

    <!DOCTYPE html>
<html lang="en" class="no-js">

    <head>
        <link rel="stylesheet" href="assets/css/reset.css">
        <link rel="stylesheet" href="assets/css/supersized.css">
        <link rel="stylesheet" href="assets/css/style.css">
    </head>

    <body>
        <script src="assets/js/jquery-1.8.2.min.js"></script>
        <script src="assets/js/supersized.3.2.7.min.js"></script>
        <script src="assets/js/supersized-init.js"></script>
        <script src="assets/js/scripts.js"></script>
    </body>
</html>

    I’m not a programmer but from what I’m picking up is that the proper way is to use hooks with the functions.php and using login_enqueue_scripts. I’m using the Code Snippets plugin and took a stab in the dark:

    function example_enqueue_style() {
	wp_enqueue_style( 'login_reset', get_template_directory_uri() . '/login/assets/css/reset.css', false );
	wp_enqueue_style( 'login_supersized', get_template_directory_uri() . '/login/assets/css/supersized.css', false );
	wp_enqueue_style( 'login_style', get_template_directory_uri() . '/login/assets/css/style.css', false );
}

function example_change_jquery() {
wp_deregister_script('jquery');
wp_register_script( 'jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js', '1.8.2');
}

function example_enqueue_script() {
	wp_enqueue_script( 'login_supersized', get_template_directory_uri() . '/login/assets/js/supersized.3.2.7.min.js', false );
	wp_enqueue_script( 'login_supersized-init', get_template_directory_uri() . '/login/assets/js/supersized-init.js', false );
	wp_enqueue_script( 'login_scripts', get_template_directory_uri() . '/login/assets/js/scripts.js', false );
}

add_action( 'login_enqueue_scripts', 'example_enqueue_style', 10 );
add_action( 'login_enqueue_scripts', 'example_change_jquery', 5 );
add_action( 'login_enqueue_scripts', 'example_enqueue_script', 1 );

    I put the assets in the themes/login directory and it doesn’t work. Can a WordPress Jedi help this Padawan?

  • The topic ‘Login background slider using functions.php’ is closed to new replies.