How to Create a Welcome Page (Splash Page) for WordPress

We are not talking about a pop-up or setting a page as the homepage of your WordPress site here. A real solid page that is shown to visitors when they enter your site from another site, or search engine (which again is another site) or by directly typing in your address.

Have you ever seen this sign “If you are below 18 leave now, else Enter here” (yeah, the smile on your face explains it)? You see that sign when you enter first and that’s that. Lets make one such page.

Making a “Enter Site” Page

Welcome Page for WordPress

Depending on your theme, your theme folder will have home.php or index.php or sometimes both in your theme folder. If you have home.php open it up, else go for index.php. Refer the template hierarchy if that interests you. I am assuming my theme has index.php only.

Add the following code snippet at the start of  index.php. Start as in, the very first line, before everything and everything. On line 1:

<?php if( (strpos($_SERVER['HTTP_REFERER'], get_bloginfo('home')) === false) && !$_SERVER['QUERY_STRING']) : ?>
<?php include ('http://yourdomain.com/wp-content/themes/yourtheme/page-splash.php'); ?>
<?php else : ?>

Now you opened close the if else by adding the following to the end of index.php. End as in the last line:

<?php endif; ?>

That makes index.php in between those two codes.

What this does is, if the user is entering from anything but your own site, it will show: http://yourdomain.com/wp-content/themes/yourtheme/page-splash.php

Go ahead and make a copy of page.php in your theme folder and name it page-splash.php . If hope you have figured that you have to replace http://yourdomain.com/wp-content/themes/yourtheme/page-splash.php in the above snippet with the direct link to your page-splash.php .

You will have to hard-code your page-splash.php. The best way to do this is to look at the source code of a page on your site and imitate them into your page-splash.php. Well, I am thinking, if you just copy paste the code, that should also work.

Here is a little page-splash.php that I made for Twenty Ten default WordPress theme:

<?php
/**
* The Splash Page
*/

get_header(); ?>

<div id="container">
<div id="content" role="main" style="width: 900px;">

<div id="post-<?php the_ID(); ?>" <?php post_class(); ?>>

<h2 class="entry-title">Welcome to my awesome site!</h2>

<div class="entry-content">
<p>Welcome to my site. You can read my instructions here and then enter the site <a href="<?php echo home_url( '/' ); ?>">here</a></p>
</div>
</div><!-- #post-## -->

</div><!-- #content -->
</div><!-- #container -->
<?php get_footer(); ?>

To test the welcome page, open up a new tab and enter your site into the browser. Lo!

Hope you have fun creating the Welcome Page. Do let me know what you think.

Hello, I am Arun Basil Lal. Thank you for reading!

I am a WordPress product developer and creator of Image Attributes Pro. I am passionate about solving problems and travelling the world.

Divi WordPress Theme - My Review

Divi WordPress Theme
Divi is a WordPress theme that web designers do not want you to know. It comes with a drag-and-drop theme builder. You can build beautiful looking unique websites without touching a line of code. Just choose from one of the many pre-made layouts, or pick elements and arrange them any way you like.

Divi is every WordPress developer's wet dream. Surprise your clients with neat responsive websites and have fun building them.

Divi comes from Elegant Themes. If you enjoy building websites, you *need* an Elegant Themes membership. 87 beautiful themes and 5 plugins for the cost of less than a candy-bar each!


Note: I am an avid user of Divi myself and this is a honest review. I wouldn't recommend something that I do not personally find amazing.

9 Comments.

  1. Ken says:

    Thank you very much for this code….this was exactly what I was looking for. The only thing that didn’t work for me…was to put my direct URL in the code like you suggested. Instead, I had to replace it with the following to make it work.

    You’ll notice that I had to add (TEMPLATE.”/splash-page.php”);?> below….notice that I had to add the double quotes too.

  2. Nitin says:

    Working very fine….

    Thanks For this code

  3. Shannon Cox says:

    Hi, I’m just wondering if there is a way to hide your menu on this splash page? So they just click enter here as such…..

  4. Wojtek says:

    It’s not working on twenty eleven theme 🙁

    But I don’t do page-splash from page.php a do my own enter site witm my css file.

  5. silvano says:

    Hy Arun,

    this feature is exactly what I’m looking for, but it did not work on my site.
    do you have a update version of this code?

    can you help me?

    • Hello Silvano,

      What is the error that you get?

      • silvano says:

        Hello Arun,
        I did exactly how you said, but my site did not load anything.

        With a little more research I found something similar to what you did but applied in the index page of wordpress instead the index page of theme like you said

        I had to use the url of my website and instead of using page-splash.php I used an html page.
        It works but my knowledge in php is very basic and I am afraid to change the index.php of wordpress. Do you have any recommendations ??

        • Hey Silvano,

          Editing WordPress core is not recommended, you will lose the edits when you update WordPress. Your theme might be using a different template for the homepage, like home.php or maybe even a page.

          Find the template (add some text at the top see if it shows up) and then add the code into it.

          I hope that helps.

Leave a Reply to Arun Basil Lal Cancel reply

Your email address will not be published. Required fields are marked *

*