How to create a WordPress splash and static home page

View Comments

• I was looking for a way to make a splash screen for my website similar to Netflix. Bravo for writing something that is still referred 11 years later.

  I have Tumult Hype 4 to make HTML5 animations but I am not sure how to implement the splash screen logic. None of the splash screen plugins available seemed to support such OAM Widget. So I followed all the steps but I don’t see the Splash template in the page attributes of the block editor. I only see Parent page and Order there. So maybe your code is not actually registering a template in the child theme properly? I don’t know PHP and could really use your guidance.

  • Hi Devansh,
    if you followed the steps closely, the template should be there. I've never tested it with the Gutenberg interface though (I couldn't anymore, the website on which I created this has been offline for a long time). You could try switching to classical editor if you see the page template option in the sidebar then.
    However, I create page templates all the time, and they work just as well with Gutenberg. So I think it's most likely that you made a mistake somewhere.
    All it takes to create a page template, is copy page.php, give it a name like page-splash.php and start with the commment section proclaiming the template (as in the article above). And upload it of course.
    Have you uploaded your template to the active theme? If you uploaded it to the folder of an inactive theme, you will not see the template in the page editor.
    Hope this helps!

• Note: get_header(splash); in article is wrong, should say get_header('splash'); with quotes.

  • You're right, I corrected it right away. Thanks for pointing it out!

• Hi Boris, thanks for the tutorial. I don't understand how to keep the visitor ending on the splash page when coming back.

• Hi Boris, thanks for the tutorial. What I don't quite understand is how the visitor doesn't end up on the splash page when doing a second visit. I'd actually like to make something like this to choose the language for the first visit (afterwards the language is set into a cookie). Thanks!

  • Hi,
    I kept it simple. All I did was add a link to the actual home page to the navigation menu, instead of a link to the splash page.
    If a visitor bookmarks the actual homepage, the splash page is bypassed. If the domain name is simply entered in the URL bar, the splash page is opened.
    Hope that clarifies it for you.

    • Hi, thanks OK now it's quite clear!

• Great post.

• Brilliant!

  Unfortunately I'm a very technically-challenged individual, and I'm still struggling to know exactly what to copy from e.g. footer.php..... you say "copy the content", but then in step 9 you say "all you will need is the closing of the divs and tags..." so that's not copying the content, it's copying SOME OF the content?

  I'm getting a bit lost and think it would be really good to show or supply full example files...just so we know EXACTLY what is required in the new header and page files.

  But my goodness, this could be just the solution I'm looking for - if I can understand it ;)

  thanks

  • Hi,
    I will try to help you in the right direction. But honestly, I advise you to dig into the buildup of WordPress pages using the PHP template files a little more. Using headers and footers is not very complicated. What I basically tried to say is:

    • Creating a separate header-splash.php file is necessary because in this splash page, you do not want to see regular header stuff such as a navigation menu. So you take the basic header and strip everything after .
    • The same applies to the footer. Only here, I chose not to use a separate footer-splash.php file and call that from the splash.php template, but instead pasted the required code from footer.php into the splash.php template file directly.
    • Given all that, your splash.php would look something like you see in the example below:

    [php]
    <?php
    /**
    * Template Name: Splash page
    */
    ?>

    <?php get_header('splash'); ?>

    <body>

    <div class="wrapper">
    <div class="inner_wrapper">

    <div id="logo">
    <img src="<?php bloginfo('template_directory'); ?>/images/splash.png" width="55" height="56" alt="logo" />
    </div>

    <div id="ring">
    <img usemap="#Enter" src="<?php bloginfo('template_directory'); ?>/images/enter.png" alt="Enter" width="470" height="467" border="0" />

    <map id="Enter" name="Enter">
    <area shape="circle" coords="234,232,231" href="<?php bloginfo('home'); ?>/index.php?page_id=5" />
    </map>
    </div>

    </div> <!-- end .inner_wrapper -->
    <!-- Everything below is what was pasted from the original footer.php template -->
    </div>

    </body>
    </html>
    [/php]

    I hope this helps, good luck!

• Thanks for the excellent manual

• Thanks for the wonderful guide

• This is truly helpful, thanks.

• Excellent write-up. I definitely appreciate this website.
  Stick with it!