Adding a loading screen to your website can be a pretty cool idea if you have a lot of things to show your visitor but still haven’t quite managed to get everything on screen in the blink of an eye. We already showed you how to accomplish this for Genesis, so let’s see how it’s done for Headway Themes.

You should note that you’ll want to use a child theme, functionality plugin, or copy of Headway Helper for the PHP part.

(PHP) Add the Action to “headway_body_open”

First, let’s go ahead and add our html call for the loading screen to appear automatically for the body. In your child theme’s functions.php, functionality plugin, or Headway Helper PHP section, add the following code…

add_action('headway_body_open', 'add_preloader');
function add_preloader() { ?>
<div class="preloader"></div>
<?php }

Alternatively, you could simply place the “<div class=”preloader”></div>” part into a custom code block somewhere on your layout.

(Script) Add Jquery to Headway’s Header Scripts

Navigate to the WordPress administrative dashboard and open headway’s options. In scripts/analytics under “header scripts”, paste the following lines of code…

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">
jQuery(window).load(function() {
 jQuery(".preloader").fadeOut("slow");
})
</script>

(CSS) Add Some Style and an Image

Finally, add the following CSS to a child theme’s style.css, Headway Helper’s CSS window, or the visual editor’s live CSS window…

.preloader {
 position: fixed;
 left: 0px;
 top: 0px;
 width: 100%;
 height: 100%;
 z-index: 9999;
 background: url('[path-to-gif-file]') 50% 50% no-repeat rgb(249,249,249);
 }

Don’t forget to replace [path-to-gif-file] with the URL or relative path to your loading image. You can download one from Preloaders.net if you don’t have one already. Just upload it to the WordPress media library and use that URL in your CSS code!