How to create a WordPress splash and static home page

article header image

This tutorial describes how to create a splash welcome page in WordPress and have it co-exist with a regular homepage.

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, Ive 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:

Header

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.

Splash page

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):

screenshot of splash page template in wp-admin

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>

Home page

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 (Im 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.


foto Boris Hoekmeijer
My name is Boris Hoekmeijer, I'm a webdesigner and graphic designer.
I sometimes run into a problem for which I have to find my own solution because Google just won't tell me. That's when I climb behind my mechanical keyboard, and fire away until a tutorial materializes. One of the great things about the web: we can all help each other!
If this article has helped you, or if you have anything to add or ask, please leave a comment or share the post.
Cheers!

© 2015 ★ Published: July 26, 2010
68 Comments

  • dowlass says:

    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

    • Boris Hoekmeijer says:

      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
      /**
       * 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>
      

      I hope this helps, good luck!

  • Karry says:

    Thanks for the excellent manual

  • Marylin says:

    Thanks for the wonderful guide

  • Chloe says:

    This is truly helpful, thanks.

  • Kenny says:

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

  • Andrés says:

    Hi Boris. I do not know if it is the most commented entry, but looking a lot on this topic, I have not found anything so far; and I think I found it here. But….

    If the idea I want to do, I hope you can help me. I explain:

    When you enter: mydomain.com, I want that in the center or wherever there is a link “Enter” or an image, click and enter all the content of the web.

    If I do all the process that you have indicated above, when I create a page called for example “welcome” and I choose as a template “page-splash” which is the same as page-splash * php. I make the creation of this page with text or a simple image and finally Save.

    The other pages will have default template by default and are the following:
    Home, Products, Services, Contact

    Then, when I go to Appearance – customize – page setup – YOUR HOMEPAGE DISPLAYS – A static page – homepage – “welcome”

    So, you enter my web: mydomain.com, you will see that everything is blank with a link or an image and that when you click on “Enter” the following you load is: “Home”, but not as follows :

    mydomain.com com / home if not, mydomain * com /

    Can this be achieved? I hope it has been well explained and I apologize for the inconvenience.

    Thank you.

    • Boris Hoekmeijer says:

      Hi Andrés,

      I’m not sure I follow what you are trying to do. When you go to Appearance > Customize > Page setup, this is a theme-dependent setting. But I assume it is the same as Settings > Reading > Your homepage displays > Homepage.
      Beyond that, I cannot follow your explanation. Can you explain further?

  • Nam Echeverry says:

    Really appreciate you sharing this article.Really thank you!

  • Earline Totman says:

    Who would have thought of this? Nice article.

  • html email training says:

    Just wwhat I was searching for, regards for posting.

  • Marcel says:

    hey,
    first time doing this here so Im not familiar with the terms,
    3. Add class=splash to the html tag. This makes it easy to differentiate styling later on.

    to clarify, is this on the header-splash.php?

  • việc làm nhanh says:

    Everything is very open with a really clear explanation of the issues.
    It was definitely informative. Your site is useful.

    Thank you for sharing!

  • צלם חתונות says:

    you’re article is nice.

  • Jasper says:

    You are so awesome! I do not suppose I’ve truly read a single thing like that before. So nice to find another person with a few original thoughts on this issue. Really. many thanks for starting this up.
    This site is one thing that’s needed on the internet, someone with some originality!

  • Oliver Rossberg says:

    for the life of me I cannot find my theme’s ”yourtheme” directory! How can I access that directory? thank you mucho.

    • Boris Hoekmeijer says:

      I hope this is not serious, otherwise that’s pretty serious… 🙂 replace “yourtheme” with your theme folder of course.

  • Ximereds says:

    Hello Boris,

    I stumbled upon this post, which is really helpful for what I am trying to achieve.

    I am wondering if I can create a wordpress site under a subdomain example.com/work and a static html page under the main domain example.com? I would need to show my “homepage” with menu in the subdomain, so this would have to be what wp calls the front page.

    The html page for the domain is a simple html design that will link to the subdomain. So I am trying to figure out how to create this html static page in wordpress. I have heard that using the html in a wordpress template would allow me to take advantage of the SEO from yoast (like you have also stated here!). That’s why I want for that page to live in wordpress…I am confused on what to do here, since the html static page will have to show in the domain and the wordpress install is done on the sub-domain. Do you see what I mean? Do you have any idea on how I can do to achieve this?

    Thanks so much Boris!!
    X

    • Boris Hoekmeijer says:

      Hi Ximereds,
      what I would do is create a page template specifically for the homepage in the root domain.

      Using the .htaccess file in your sub-domain, you can redirect a different domain name to a specific page. You can use this .htaccess code snippet as an example:

      <IfModule mod_rewrite.c>
      RewriteEngine On
      RewriteCond %{HTTP_HOST} second-domain\.com [NC]
      RewriteRule (.*) http://first-domain.com/homepage/$1 [R=301,L] 
      </IfModule>
      

      You will have to adjust the code, as this example forwards “second-domain.com” to the “homepage” on first-domain.com, but it’s quite close. If this doesn’t work out for you, there are many sites which can help you with .htaccess specifics.

      I hope this helps, good luck!

  • http://hola.com says:

    Hello! I simply would like to give you a big thumbs up for your excellent info you’ve got right
    here on this post. I will be coming back to your blog for more soon.

  • Albert says:

    I truly treasure you piece of work, Great post.

  • Glenn says:

    Hi Boris,

    Thank you so much for this super easy guide. Unfortunately I seem to be having trouble with my set up.

    I keep getting these messages on the splash page:

    Warning: include(/home/content/09/9858809/html/wp-content/themes/base/header-splash.php) [function.include]: failed to open stream: No such file or directory in /home/content/09/9858809/html/wp-content/themes/base/splash.php on line 6

    Warning: include() [function.include]: Failed opening ‘/home/content/09/9858809/html/wp-content/themes/base/header-splash.php’ for inclusion (include_path=’.:/usr/local/php5_3/lib/php’) in /home/content/09/9858809/html/wp-content/themes/base/splash.php on line 6

    Any thoughts?

    • Glenn says:

      I also think I may have found an issue with the blog post. Is there an image underneath “2. Remove everything below.”

      Nothing is showing up for me.

      Thanks!

      • Boris Hoekmeijer says:

        Hi Glenn,
        no image, but just the closing /head tag. For some reason it was not shown. You can see it now. Perhaps that also solves the issue you mentioned earlier.

  • Sam says:

    Hi there,

    I have a question I’m hoping you can help me out with.
    I want to create a splash page that is only a series of jpeg images (ie. no header, no sidebars, nothing interactive)…. the images will cover the entire splash page and are not linked to anything. They just display a mock webpage (for example, one image is a header I created in photoshop)

    So I have created a completely blank splash.css, completely blank header-splash.php, and my splash.php reads as follows:

    I realize i am doing something wrong. i can see and select my splash page template in WordPress, however it is completely blank (which I want, no style whatsoever) BUT I can’t add any images to the page through wordpress. It always shows up blank. Can you suggest a solution?
    I don’t know how to code (obviously), so some careful explanation on how I might have to write this in .css or .php would be very helpful.

    THANK YOU!
    Sam

    • Sam says:

      Sorry, my comment above showing what my splash.php page reads did not show. The code is exactly how you have instructed though…

    • Boris Hoekmeijer says:

      A bit late Sam, sorry I hadn’t noticed the comment waiting.
      I can’t see what code you have, but it doesn’t really matter. What you need to do is:
      1) Create a home.php file in your (child) theme.
      2) Add a link to the theme’s header.php into your home.php (you always need a header, otherwise nothing works)
      3) add some code to your (child) theme’s CSS file:

      body.home {
              background: url(img/background.jpg) no-repeat center center fixed;
              -webkit-background-size: cover;
              -moz-background-size: cover;
              -o-background-size: cover;
              background-size: cover;
      	filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='.background.jpg', sizingMethod='scale');
      	-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='background.jpg', sizingMethod='scale')"; }
      

      4) You may need to change the .home class to something else. Check your source code what class is generated on your body tag specifically when opening the home page.
      5) Make sure you rename background.jpg to whatever filename you’re using everywhere i put it, and make sure the background image is actually in the (child) themes img folder.
      6) You can change ‘img’ to ‘images’ folder or whatever suits you.
      Hope this helps, good luck!

  • Tractari Auto Bucuresti says:

    I take pleasure in, result in I discovered just what I used to be having a look for. You’ve ended my four day long hunt! God Bless you man. Have a great day. Bye

  • mike says:

    We add a splash page which displays only once not a static home page check out this link
    funbird.co.uk/blog/opensource/wordpress/create-splash-page-wordpress

  • Latia Euresti says:

    Great post. You made some useful points.

  • Ute Dabadie says:

    Good article. I most certainly enjoy the website. Continue the good work!

  • Nathanial Mckeehan says:

    Wohh just what I was looking for, thank you for posting.

  • new york web design says:

    Can’t leave this site without posting my thank you comment. Very valuable info, thank you.

  • Elizabeth says:

    One more question – The end result I am seeking is a black background that fills the user’s entire screen, a flash video, and the ability to click to skip through to the home page at any time. Does all of the content have to be hard-coded into splash.php in this method, or can I insert the video and button in the standard wordpress page editor and just choose the Splash template?

    • Boris Hoekmeijer says:

      You can always retrieve content from the page (assuming you mean the ‘page’ within the WordPress Administrator). You do this by placing the loop code in the splash.php file where you want the content to appear. Try this:

      <?php if(have_posts()): ?><?php while(have_posts()): the_post(); ?>
      <h1><?php the_title(); ?></h1>
      <?php the_content(); ?>
      <?php endwhile; ?>
      <?php else: ?>
      <?php endif; ?>
      
  • Elizabeth says:

    still didn’t paste the whole line, sorry. I feel like a dummy!

  • Elizabeth says:

    Hi, thanks for posting a solution to this very common and tricky problem! I am stuck on step 3 – I don’t have a lot of experience editing PHP files so sorry if this is question is rudimentary! The site I’m working on is sultana-dance.net. I have a plugin in place to create a splash page but it’s not performing up to par some I’m looking for a more solid solution.
    I’ve created my header-splash.php file by copying header.php and deleted everything after . The full line in my file dealing with css is:
    <link rel="stylesheet" href="/?bfa_ata_file=css” type=”text/css” media=”all” />

    I understand I’m supposed to replace that with:

    $my_url = get_bloginfo('template_url') . '/css/splash.css';
    

    Which portion of the line do I replace? The whole thing? Everything between one set of tags?

    Thanks, please let me know if you need more info in order to help!

    • Elizabeth says:

      Sorry, looks like my post removed some of the code I was trying to paste for review. Here it is again, replacing php with P with hopes it won’t be treated as code:

      Current css line:

      &lt;link rel=&quot;stylesheet&quot; href=&quot;/?bfa_ata_file=css" type="text/css" media="all" /&gt;
      
      • Boris Hoekmeijer says:

        Hi Elizabeth,
        what you need to paste there is the following code:

        <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo('template_directory'); ?>/css/splash.css" />
        

        This means you need to put the splash.css file in a subdirectory of your theme, and the subdirectory must be named css. If you’re using a parent/child theme construction, make sure the css folder and the splash.css file are placed in the parent theme folder. Good luck!

  • Fernando says:

    Thank you Boris, I am currently trying it on a MAMP server (mac platform). What I´’ll do first of all is testing it on a live server to see if it’s a local server porblem. If not, then I can show you the live issue so as to try a debug with your valuable help.
    Thanks again!.

    • Boris Hoekmeijer says:

      Allright, good luck! Let me know if I can help later on!

    • Fernando says:

      I want the world to know: BORIS f******g RULES! This solution is so simple, so accurate… And furthermore: He`s the only one that came up with this during my whole month-google-search…Tried all kinds of lame tricks I found, but this is the one that did the job….

  • Fernando says:

    Wow.. searched for about a month in order to solve this… and voila! problem solved…
    Nice and clean solution! My issue now is everything works fine about the splash screen and the redirection to the page I set as home, but the links to inner pages won’t do… It keeps directing to the home page.
    What can I have done wrong?

    • Boris Hoekmeijer says:

      Hi Fernando,
      what does your code look like (links to the inner pages)? It’s hard to tell what goes wrong without an example. Without having seen it, I can only guess. It might be a permalink issue, wrong URL’s, or a number of other things.

      • Fernando says:

        Yes, you’re right…Well. I’m using wordpress 3.2 , with permalinks set to %category%%postname%. I can’t give you an URL because it is now on a local developement install.
        If this info gives you a clue, fine… if not, let me please know and I’ll deploy it on a test server so you can see it live.
        Than you so much for your prompt response!

        • Boris Hoekmeijer says:

          The problem could be the permalinks then. I’ve had trouble getting them to work properly on a WAMP test environment. I don’t know what system you’re using, but if it’s on a Windows machine, I recommend XAMPP. Still, if you post the PHP/HTML code you’re using for your internal links, that might give me a clue also…

          • Fernando says:

            Hey Boris..! Finally I got it to work seamlessly…
            I guess it was something related to MAMP or the local install, because as soon as I deployed the trick on a live server, started working with no flaws at all. At first I had a problem with the home page showing a 404, but soon I realized I had not set the page id in the “enter ” url…
            Thank you so much, I owe you one… If you happen to be in need of some illustration or icon for yourself, email me, and I will be only happy to retribute your kind help! (I am a graphic designer/illustrator)

  • Amy Newman says:

    Thank you very much for putting this info together and sharing it! Do you know if this splash page can be modified to be a pop up with a cookie set to expire after a user visits the first time? I know html but not that up on php. Any advice when you have time would be enormously helpful to the state of Arizona! Thank you – Thank you!

  • Web Design South Yorkshire says:

    Fantastic tutorial love it

  • Shalon Mumma says:

    I’d like to say thanks for the efforts you have made compiling this article. You have been enlightening for me. I’ve forwarded this to one of my friends.

  • Joetta Velardes says:

    Thank you for the article, it was nice to learn something. :))

  • Jonathan Regalado says:

    It’s great to get sites with a lot of info. I was trying to get this information for the longest time, and ran across your site. Thanks for the share that you’ve provided.

  • CSS says:

    Hey! That’s a nice post. I’m very sure I will tell about it to my co-workers.If you have posts please email them to me.

  • Brent French says:

    Great explanation helped my php web development skills alot. Can i recommend this post from my website. Thanks

  • Jana says:

    Awesome. The templates option did come up. I hadn’t finished my updates as you suggested. Still building the rest. Thank you so much for your help!! Saved me hours of trouble and a grumpy client. 🙂

  • ispacecrusader says:

    @Jana, as for your question on WP 3.0.4: My knowledge doesn’t go beyond 3.0.3, but I can’t imagine that a change like that would be made in a small update. I’m guessing you’re just overlooking it? If you open a Page in the WP manager, the option should be on the right side of the page, under Attributes/Template. If you forgot to enter the starting code to the template page, the template will not show up in the pulldown menu. Maybe that’s what’s going wrong?

  • ispacecrusader says:

    Hi Jana,
    creating links to external pages is not difficult. Instead of an internal URL like I used () use “http://yoursubdomain.com/frontpageID” instead of “index.php?page_id-15”, and fill in the text that must be shown on the page where I put “Home”. If you use an image instead of text, you can leave the text out altogether.
    This making any sense to you? If not, let me know. Good luck!

  • Jana says:

    Also, I just upgraded my wordpress to version 3.0.4 and I’m not seeing the Templates option in my page attributes choices. Is there another way to accomplish this? Again, I’m new. I just do as I’m told by wiser people like yourself. 🙂

  • Jana says:

    Very useful information! Thank you for sharing it with us. I was wondering what your suggestion would be for a splash page similar to yours but I want it to have a menu of choices you can click on that will you send you to the wordpress blogs on unique subdomains. My client has several services, including a non-profit teaching program, they want to feature separately. But they want a shiny “front page”. I’m still new to php and your article has helped me a lot already. Thanks for any further feedback!

  • Guy says:

    Hi,
    Thank you for posting this. I’m very new to all this and have a rudimentary understanding of code writing, so please forgive the simpleton questions: You recommend creating a splash.php and home.php file – which folders do you upload these to? Also, can I have a .jpg file instead of the circle? If so, how do I do it? I hope you can help me out. Thanks!

    • ispacecrusader says:

      Hi,
      no problem, we all gotta start somewhere! Both of the .php files need to be in the wordpresstheme”yourtheme” directory (same location as others such as header.php, single.php, etc. And, yes, you can use .jpg, .png (8 or 24 bit) and .gif files. Which one you use should depend on the type of image you want to display. For a photo, go with .jpg, for other files, usually gif or png are better options. If you have an image with gradual transparency in it (for instance: no background color and a shadow or glow around the image), you’re best off with 24-bit .png. But keep in mind that 24-bit .png files are not rendered properly by older IE versions.
      By the way, you can style the page any way you like using css. I just created a separate .css file only for the splash page.

      Here you can see what splash.php looks like:

      <?php
      /**
       * Template Name: Splash page
       */
      ?>
       
      <html>
          <head>
              <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
              <title>iSpace portal</title>
              <?php
              $my_url = get_bloginfo('template_url') . '/css/splash.css';
              ?>
              <link rel="stylesheet" type="text/css" href=<?php echo $my_url ?> >
          </head>
      
          <body>
              <div class="wrapper">
              	<div class="spacebox">
                      <div id="logo">
                          <img src="<?php bloginfo('template_directory'); ?>/images/ispace_splash_page_
      logo.png" width="150" height="537" alt="iSpace logo" />
                      </div>        
                      <div id="ring">
                          <img src="<?php bloginfo('template_directory'); ?>/images/ispace_ring_splash_
      page_cloud.png" alt="Enter iSpace" width="673" height="537" border="0" usemap="#Enter" />
                          <map name="Enter" id="Enter">
                            <area shape="circle" coords="234,232,231" href="<?php bloginfo('home'); ?>/
      index.php?page_id=15" />
                          </map>
                      </div>
                   </div>
                </div>
          </body>
      </html>
      

      And splash.css:

      @charset "utf-8";
      :link,:visited {text-decoration: none;}
      address,ul,ol,dl,li,dt,dd,hr,h1,h2,h3,h4,h5,h6,pre,form,body,html,p,blockquote,fieldset,input {
      margin: 0; padding: 0;}
      a img,:link img,:visited img {border: none;}
      address {font-style: normal;}
      body,td,th {color: #D6D7D6;}
      body {background-color: #000;}
      .wrapper {margin: 10% auto; text-align: center;}
      .spacebox {width: 930px; margin: 0 auto; text-align: center;}
      #logo {float: left; height: 537px; width: 150px; margin: 0 0 0 100px;}
      #ring {float: left; width: 673px; height: 537px; margin: 0;}
      

      Does this help?

  • ispacecrusader says:

    Yeah, this website is an example of it. The enter page (www.ispace.nu) is a splash page, the welcome page is the static home page. Is that what you meant?

  • Jonathan says:

    Do you have an example of this?

Leave a Reply

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

NAVI

Deze website maakt gebruik van cookies. Hoe zit dat?

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close