How to add a preloader to your WordPress homepage - full tutorial with code

💻 Want to make your WordPress site look more professional? Add a preloader that will display your logo and animation before loading your content. In our tutorial, you'll find complete code and step-by-step instructions on how to add a preloader. 🔧 What do you find in the article? ✔️ PHP code to add a preloader on the homepage only ✔️ Styling the preloader with CSS ✔️ JavaScript to automatically hide the preloader when the page loads ✔️ Additional Lottie animation for an attractive effect
Zdjęcie profilowe autora

Bartosz Swinitsky

@swinicki.w.net

In this article we will show, how to add a preloader to your WordPress home page Using simple PHP, CSS and JavaScript code. Preloader is an animation that displays before the site content loads. This allows you to create an attractive first impression for the user. Read our tutorial carefully to learn how to add step-by-step preloader with your own logo, and how to customize the timing of the animation.

Why add a preloader to your WordPress homepage?

A preloader helps keep the user's attention as the page loads. This can be especially important if your site contains large graphics or many plugins that slow it down. With a preloader, users see an animation or logo before the page fully loads, making the user experience smoother.

If you're wondering, how to add a preloader to your WordPress home page, carefully follow the steps below. We will discuss in detail not only PHP code, but also CSS and JavaScript, which will allow you to create a preloader tailored to your needs.

PHP code to display the preloader

The first step is to add PHP code that will display the preloader Only on the main page of the site. The following code should be placed in the file header.php:

<?php if (is_front_page()) : ?>
<div id="preloader" class="fade-in">
    <div id="loader-content">
        <img src="//* LINK DO TWOJEGO LOGO *//" alt="Logo Preloader">
    </div>
</div>
<?php endif; ?>

This code makes preloader appears only on the home page, which is important for site optimization. This ensures that users visiting other subpages will not see the preloader.

Styling the preloader with CSS

The next step is to add CSS styles that define the appearance of the preloader. In the file styles.css add the following code:

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #ffffff;
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity: 1s ease-in-out, visibility: 1s;
}

#loader-content img {
    max-width: 300px;
    height: auto;
}

#preloader.fade-in {
    opacity: 1;
    visibility: visible;
}

body.loaded #preloader {
    opacity: 0;
    visibility: hidden;
    transition: opacity 1s ease-in-out, visibility 1s;
}

The styling ensures that the logo will be displayed in the center of the screen and the preloader background will be white. In addition, we used smooth effects for the appearance and disappearance of animations, which makes the site look more professional.

Adding JavaScript to hide preloader when page loads

The final element is to add JavaScript code that will hide the preloader after a certain time or after loading the entire site. Add the following code to the file functions.php (or plugins Code Snippets - Which I personally recommend more):

function add_preloader_script() {
    if (is_front_page()) {
        echo "
        
        ";
    }
}
add_action('wp_footer', 'add_preloader_script');

This script makes the preloader disappear automatically after 3 seconds. You can customize the display time by changing the value of 3000 to another number, expressed in milliseconds.

Summary - how to add a preloader to the WordPress homepage?

Now you know exactly how to add a preloader to your WordPress homepage. Just add PHP, CSS and JavaScript code to create an attractive animation before your site loads. This will make your site look more professional and give users a better first impression.

Adding preloader is not only a matter of aesthetics, but also a practical solution to improve the user experience. If you want your homepage to look better, implementing a preloader is one of the easiest ways to achieve this.

Scroll to Top