Sharing is caring!

Do you need to add a preloader to your WordPress web site? A preloader is an animation indicating the progress of a web page load within the background.

Preloaders guarantee customers that the web site is engaged in loading the web page. This may help enhance person expertise and reduce the total bounce rate.

In this article, we’ll present to you how you can simply add a preloader to WordPress website.

What’s a Preloader and When You Ought to Use it?

A preloader is an animation or standing message indicating the progress of the web page load within the background.

Usually, once you go to a web site, your browser begins downloading totally different components of the content material. Some components of the web site load sooner (i.e. textual content, HTML code, CSS) whereas others load method slower (i.e pictures and videos).

If most of your content material is textual content with only a few pictures and videos, then you definitely don’t really want so as to add a preloader to your web site. As a substitute, you need to give attention to improving website speed and performance for sooner web page loads.

Alternatively, if most of your content material is images, photographs, and video embeds, then your customers want to attend some time earlier than they will truly see all of the content material.

Throughout these partial downloads, your web site could really feel slow. Typically customers could even assume that it’s broken. Including a preloader, fills this hole and exhibits the person a progress indicator in the course of the web page load.

You possibly can see a live instance of a preloader by clicking on the Preview button whereas writing a blog post in WordPress.

WordPress will open a live preview of your weblog put up in a brand new window, and it’ll show a preloader earlier than it truly exhibits the live preview.

wppostpreview

That being stated, let’s check out how one can simply add a preloader to your WordPress web site.

Technique 1. Including a Preloader in WordPress utilizing WP Smart Preloader

This technique is beneficial as a result of it’s simpler to implement and doesn’t require any adjustments to your WordPress theme.

The very first thing you’ll want to do is set up and activate the WP Smart Preloader plugin.

Upon activation, you’ll want to go to Settings » WP Smart Preloader page to configure plugin settings.

wpsmartloader-settings

First, you’ll want to select a preloader type or web page load animation. The plugin comes with six built-in animations to select from. You may as well add your individual custom HTML and CSS to create a custom preloader.

After that, you can also make the preloader seem solely on the homepage by checking the ‘Show only on Home Page’ possibility.

Subsequent, you’ll want to scroll all the way down to the ‘Duration to show Loader’ part. You could specify the length for the preloader. The default possibility is 1500 milliseconds (1.5 seconds) which ought to work for many websites, however, you’ll be able to change that if you would like.

duration

You may as well set the time loader takes to utterly fade out. The default possibility is 2500 seconds or 2.5 seconds.

Lastly, don’t neglect to click on the ‘Save changes’ button to save your settings.

Now you can go to your web site to see the preloader in motion.

Technique 2. Including a Preloader in WordPress utilizing Preloader Plugin

This technique is versatile however requires further steps to correctly implement it in your WordPress site.

The very first thing you’ll want to do is set up and activate the Preloader plugin.

Upon activation, you’ll want to go to the Plugins » Preloader page to configure plugin settings.

preloader-settings

First, you’ll want to enter the Hex code for the background color you need to use for the loading display. The default possibility is #FFFFFF (white). You should utilize a web-based color picker device to seek out the HEX code for the color you need to use.

Subsequent, you’ll want to present the URL of the preloader image you need to use. The plugin comes with a default animation image.

If you wish to use different animation, then you definitely’ll discover a link to obtain an animated preloader image from a third-party web site. You possibly can then add that picture to your wp-content folder and paste the URL right here.

Subsequent, you’ll want to select the place you need to show the preloader.

wheretodisplaypreloader

You possibly can select to show it on all pages of your web site, or you’ll be able to choose a selected part.

Lastly, you will note the instruction so as to add the next code to your WordPress theme’s header.php file.

<div id="wptime-plugin-preloader"></div>

Earlier than you allow the web page, don’t neglect to click on the ‘Save changes’ button to save your settings.

We don’t suggest including code to your WordPress theme as a result of it’ll get wiped off once you replace the theme.

If you’re utilizing a child theme, then it’s okay so as to add the code to your child theme’s header.php file.

A fair higher answer could be so as to add this code utilizing a separate Code Snippets plugin or in a site-specific plugin.

Right here’s the code you’d want so as to add:

1
2
3
4
function wpb_add_preloader() {
echo '<div id="wptime-plugin-preloader"></div>';
}
add_action( 'wp_body_open', 'wpb_add_preloader' );

Be aware: this technique of including code will solely work on WordPress themes which are suitable with the wp_body_open() function added in WordPress 5.2.

This technique of including the code makes certain that your code stays there even should you replace the theme.

After getting added the code, you’ll be able to go to your web site to see the preloader in motion.

 

We hope this text helped you learn to simply add a Preloader to your WordPress web site.

 

0
0 CommentsClose Comments

Leave a comment

shares