How to create a WordPress splash and static home page
Note, april 10, 2015: Since this page is still being read quite often, and both WordPress and my technique have evolved since first writing it, I’ve made some changes. The whole process has become a lot easier and straightforward.
The idea was to create a website with a splash welcome page, which when clicked, would open to the homepage. After the first welcome, the visitor should not be bothered with the splash page again. Since the first article, Ive created many similar constructions, and its easy, youll see!
Requirements for the splash page:
- no header
- no footer
- styling completely different from the rest of the site
- after the initial welcome, the regular homepage should be just that: the homepage
Okay, here are the steps:
1. Copy the header.php file and rename it to header-splash.php file. You can name it anything you want, as long as it starts with header-.
2. Remove everything below the body tag. You can also remove any unneeded (for this page) scripts triggered in the head section.
3. Add class=splash to the html tag. This makes it easy to differentiate styling later on.
4. You can use the same stylesheet as for the rest of the site, no need to bother with a separate one.
5. Copy page.php and name it page-splash.php file in the /wp-content/themes/yourtheme folder.
6. At the top, add the following code:
<?php /** * Template Name: Splash page */ ?> <?php get_header('splash'); ?>
– The first php part ensures that WordPress sees the splash.php file as a page template.
– The second php part includes the header information from the header-splash.php file.
This ensures WordPress will see page-splash.php as a page template, and show it among the page templates in the WP-admin page editor, and that the proper header
file is called.
7. Open footer.php and copy the content into page-splash.php.
8. Make sure you remove the get_footer(); line from the original page-splash.php file.
9. From the footer, all you will need is the closing of the divs and tags (like main, wrapper, body and html), and any Google Analytics or other scripts you will need on the page.
10. Create a page in WordPress called Splash (or Welcome, or whateveryouthinkisagoodname, and link it to the Splash page template in the page editor. See the screenshot below to see what the page-template selector looks like (default in right sidebar):
11. Now you can put your content inside the page via the page editor.
12. You can also enter the content straight into the page-splash.php file. In that case, you can remove everything within the wrapper div (in this example. How much you should delete depends on the layout of the page you are creating), and then add your new stuff. Dont forget to add a link to the homepage somewhere! For example:
<div class="wrapper"> <div id="logo"> <img src="<?php bloginfo('template_directory');?>/images/splash.png" alt="logo" width="55" height="56"/> </div> <div id="ring"> <img usemap="#Enter" src="<?php bloginfo('template_directory'); ?>;/images/enter.png" border="0" alt="Enter" width="470" height="467" /> <map id="Enter" name="Enter"> <area shape="circle" coords="234,232,231" href="<?php bloginfo('home');?>/page_id=5" /> </map> </div> </div>
How you create up your homepage is not relevant for this article. You could create another template file (my homepages tend to be quite different from the rest of the site) same as you did for the splash page, but you could also stick with the default page template. Dont forget to add this page as Home to your main menu!
10. Set the splash page as starting page in the WordPress administrator under Settings → Reading.
11. There, you did it! It’s also SEO-proof, as you can configure SEO (I’m a fan of the SEO for WordPress by Yoast) for the splash page in WordPress just like any other page, and you’ve even included the header metadata in the splash page.