In this tutorial, I will teach you how to create a page custom preload in WordPress without the need to use plugins. The preload page is that screen that visitors see before the main content of your website loads. Let's customize it to your liking!
Preparation
Before you start, make sure you have a child theme set up. If you don't know how to do it, I'll explain it to you here. This is essential so as not to lose any customization.
Duplicate the "head.php" File of the Parent Theme
To create the preload page, we will duplicate the “head.php” file of the parent theme in the child theme. You can do this via FTP or from your cPanel file manager. I will explain it from the control panel.
Access the file manager and look for your parent theme folder in “public_html/wp-content/themes”.
Find the “head.php” file and download it.
Then, upload it to your child theme's folder.
Insert the Preload Code
At this point, you need the preload code. You can find it on the page I will link in the tutorial description. This code will be added to the “head.php” file of the child theme, just before the closing of the PHP tag.
Select a Preload Image
Search for an image to be displayed as a preload. Be sure to set a background color in the GIF file if you want.
Download the image and rename it if necessary.
Upload the image to the WordPress media library.
Copy the image URL.
Step 5: Modify the Image URL
Go back to the theme editor and modify the image URL in the code you added previously. Make sure the URL points to the image you uploaded to the media library.
Customize the Background Color (Optional)
If you want the preload image to have a colored background, modify the code to set the background color.
Ready!
You now have a custom preload page in WordPress. If you liked this tutorial, don't forget to like it, subscribe to the channel and activate notifications for future videos. If you have any questions, leave them in the comments, I'll be happy to help! See you in future videos. See you later!
<div class="loader" ></div>
<script>
document.addEventListener('DOMContentLoaded', function() {
jQuery(function($){
$('.loader').fadeOut(3000);
}); });
</script>
<style>
.loader {
position: fixed;
left: 0px;
top: 0px;
width: 100%;
height: 100%;
z-index: 9999;
background: url('/wp-content/uploads/2021/05/34115-rocket-lunch.gif') 50% 50% no-repeat #fff; /* Change the #fff here to your background color of choice for the preloader fullscreen section */
}
</style>
