How to Add a Preloader Animation to WordPress (Step by Step)

Understanding Preloaders and Their Benefits

A preloader is a visual indicator, typically an animation, displayed while a webpage’s content is loading. It serves as a temporary substitute, informing users that the page is in the process of loading and preventing them from perceiving the site as unresponsive. In essence, it’s a user experience (UX) enhancer that significantly contributes to a more positive perception of your website’s performance.

Here’s why implementing a preloader is beneficial:

• Improved User Experience: A preloader assures users that the site is working, even if the loading time is slightly longer.
• Reduced Bounce Rate: Users are less likely to leave a page if they see a loading animation, as they know the content is on its way.
• Enhanced Brand Perception: A well-designed preloader can add a touch of professionalism and sophistication to your website.
• Control over First Impression: You can use a preloader to showcase your brand logo or a relevant graphic while the site loads.
• Better Perceived Performance: Even if the actual loading time remains the same, a preloader can make the site feel faster to users.

Methods for Adding a Preloader to WordPress

There are several ways to implement a preloader in WordPress, each with its own advantages and disadvantages. These methods primarily involve either using a plugin, manually adding code to your theme’s files, or leveraging a page builder’s capabilities.

• Using a WordPress Plugin: This is generally the easiest and most user-friendly method. Numerous plugins are available that offer a variety of preloader styles and customization options.
• Manually Adding Code (HTML, CSS, and JavaScript): This method provides the greatest level of control and customization but requires some coding knowledge. It involves adding code snippets to your theme’s header.php and functions.php files.
• Utilizing a Page Builder: Some page builders offer built-in preloader options or allow you to easily add custom code. This method is suitable if you already use a page builder.

Step-by-Step Guide: Using a WordPress Preloader Plugin

This is the most recommended method for beginners as it requires no coding knowledge and simplifies the process significantly. For this example, we’ll use the “Preloader Plus” plugin, but the general steps apply to most preloader plugins.

Step 1: Install and Activate the Plugin

1. Log in to your WordPress dashboard.
2. Navigate to “Plugins” -> “Add New”.
3. In the search bar, type “Preloader Plus”.
4. Locate the “Preloader Plus” plugin and click “Install Now”.
5. Once installed, click “Activate”.

Step 2: Configure the Plugin Settings

1. After activation, you should see a “Preloader Plus” option in your WordPress menu. Click on it.
2. The plugin settings page will display various options for customizing your preloader.

Step 3: Choose a Preloader Style

1. The plugin offers a selection of pre-designed preloaders. Browse through the available options and choose one that best suits your website’s design.
2. Most plugins allow you to preview the preloader before applying it.

Step 4: Customize the Preloader (Optional)

1. Many preloader plugins offer customization options, such as:

• Changing the preloader color
• Modifying the preloader size
• Adding your own image or logo
• Adjusting the loading speed
• Setting the preloader background color
• Choosing which pages to display the preloader on

2. Experiment with these settings to create a preloader that perfectly complements your brand.

Step 5: Enable the Preloader

1. Ensure that the “Enable Preloader” option is checked.
2. Save the changes you’ve made to the plugin settings.

Step 6: Test the Preloader

1. Visit your website in a new browser window or incognito mode to see the preloader in action.
2. If you’re not satisfied with the appearance or performance, go back to the plugin settings and make further adjustments.

Step-by-Step Guide: Manually Adding a Preloader with Code

This method provides greater control but requires some familiarity with HTML, CSS, and JavaScript. We’ll create a simple preloader animation using CSS and JavaScript to fade it out once the page has loaded. **Important:** Before making changes to your theme files, it’s crucial to create a backup of your theme. This will allow you to restore your site if anything goes wrong. A child theme is also highly recommended to avoid losing your changes when the parent theme is updated.

Step 1: Create a Child Theme (Recommended)

1. If you don’t already have a child theme, create one. This prevents your changes from being overwritten when your theme is updated.
2. You can create a child theme manually or use a plugin like “Child Theme Configurator”.

Step 2: Add the HTML Markup to header.php

1. Access your theme’s files using an FTP client or the WordPress theme editor (Appearance -> Theme Editor).
2. Locate the `header.php` file.
3. Add the following HTML code inside the `` tag, preferably as the first element:

“`html

“`

This code creates a `div` element with the ID “preloader” which will contain the loading animation. Inside the “preloader” div, we have another `div` with the ID “loader” that will hold our animated element.

Step 3: Add the CSS Styling to style.css

1. Locate the `style.css` file in your theme or child theme.
2. Add the following CSS code to style the preloader:

“`css
#preloader {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #fff; /* Adjust background color as needed */
z-index: 9999; /* Ensure it’s on top of everything */
}

#loader {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: 16px solid #f3f3f3; /* Light grey */
border-top: 16px solid #3498db; /* Blue */
border-radius: 50%;
width: 120px;
height: 120px;
animation: spin 2s linear infinite;
}

@keyframes spin {
0% { transform: translate(-50%, -50%) rotate(0deg); }
100% { transform: translate(-50%, -50%) rotate(360deg); }
}
“`

This CSS code styles the preloader to cover the entire screen, centers the loading animation, and creates a spinning animation. You can customize the colors, size, and animation to your liking.

Step 4: Add the JavaScript Code to functions.php

1. Locate the `functions.php` file in your theme or child theme.
2. Add the following JavaScript code to fade out the preloader after the page has loaded:

“`php
function my_custom_scripts() {
wp_enqueue_script( ‘custom-script’, get_stylesheet_directory_uri() . ‘/js/custom.js’, array( ‘jquery’ ), ‘1.0’, true );
}
add_action( ‘wp_enqueue_scripts’, ‘my_custom_scripts’ );
“`

This PHP code enqueues a JavaScript file named `custom.js`. We’ll create this file in the next step.

3. Create a new file named `custom.js` in your theme’s or child theme’s directory (or create a “js” folder if one doesn’t exist).
4. Add the following JavaScript code to `custom.js`:

“`javascript
jQuery(window).on(‘load’, function() {
jQuery(‘#preloader’).fadeOut(‘slow’, function() {
jQuery(this).remove();
});
});
“`

This JavaScript code uses jQuery to fade out the preloader and remove it from the DOM once the page has fully loaded. Ensure that jQuery is loaded on your site. WordPress includes jQuery by default, but it’s a good practice to verify that it’s properly enqueued.

**Important Notes for Code Implementation:**

* File Locations: Make sure you are editing the correct theme files, preferably in your child theme.
* CSS Customization: Adjust the CSS code to match your website’s design. You can change the colors, size, and animation of the preloader.
* JavaScript Placement: Place the JavaScript code within the `` or `` section of your `header.php` file, or enqueue it properly using `functions.php` as shown above.
* jQuery Dependency: The JavaScript code relies on jQuery. Ensure that jQuery is properly loaded on your website. Most WordPress themes include jQuery by default.
* Caching: After making changes to your theme files, clear your browser cache and any website caching plugins to see the updated preloader.
* Error Handling: If you encounter any errors, double-check your code for typos or syntax errors. Use your browser’s developer tools to identify and fix any issues.

Step-by-Step Guide: Using a Page Builder

Many popular page builders, such as Elementor, Beaver Builder, and Divi, offer options for adding custom code or have built-in preloader functionalities. The steps will vary depending on the page builder you are using. This section will outline the general process using Elementor as an example.

Step 1: Access Theme Settings (Elementor)

1. In your WordPress dashboard, navigate to “Elementor” -> “Settings”.
2. Click on the “Advanced” tab.
3. Ensure that “Load Font Awesome 4 Support” is set to “Yes” if you plan to use Font Awesome icons in your preloader.

Step 2: Add Custom CSS (Elementor)

1. Navigate to “Appearance” -> “Customize” in your WordPress dashboard.
2. Look for a section called “Additional CSS” or similar.
3. Add the CSS code from Step 3 of the manual code implementation method to style the preloader.

Step 3: Add Custom JavaScript (Elementor)

1. You can add the JavaScript code from Step 4 of the manual code implementation method using a plugin like “Insert Headers and Footers” or directly within an Elementor HTML widget.

Alternative Method (Elementor Pro): Using Elementor’s Custom Code Feature

1. If you have Elementor Pro, you can use the “Custom Code” feature to add the necessary HTML, CSS, and JavaScript.
2. Navigate to “Elementor” -> “Custom Code”.
3. Click “Add New”.
4. In the “Title” field, enter a descriptive name for your code snippet (e.g., “Preloader”).
5. In the “Location” dropdown, select “wp_head” or “wp_body_open” for the HTML code. Paste the HTML from Step 2 of the manual method here.
6. Repeat this process to add the CSS and JavaScript code, choosing appropriate locations (CSS should ideally be in `wp_head` within `