In this tutorial, I will teach you how to create a landing page. custom preload in wordpress without the need for plugins. The preloading 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 this, I'll explain it here. This is essential to not lose any customizations.
Duplicate the Parent Theme's "head.php" File
To create the preload page, we will duplicate the parent theme’s “head.php” file into the child theme. You can do this via FTP or from your cPanel’s file manager. I will explain it from the dashboard.
Access the file manager and locate your parent theme folder under “public_html/wp-content/themes”.
Find the “head.php” file and download it.
Then upload it to your child theme folder.
Insert the Preload Code
At this point, you need the preload code. You can find it on the page I’ll link in the tutorial description. This code will be added to the child theme’s “head.php” file, just before the closing PHP tag.
Select a Preload Image
Find an image to display as a preload. Make sure to set a background color on 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 edit the image URL in the code you added earlier. Make sure the URL points to the image you uploaded to the media library.
Customize Background Color (Optional)
If you want the preload image to have a colored background, modify the code to define the background color.
Ready!
You now have a custom preload page in WordPress. If you liked this tutorial, don’t forget to give it a thumbs up, subscribe to the channel, and turn on 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>
