16 Feb 2009

WordPress plugin for splash screen

Category: Wordpress

If you have an adult website, which could include a website about condoms, or drinking alcohol, or “mature” rated video games, you really need a splash screen that tells the visitor to go away if they are under age.  Of course, “adult” would also include your traditional “pr0n” website, which may contain nudity or something even “better.”

With WordPress, this can be done via their “plugin” feature, which I’ve created for your enjoyment and downloading.  This is my first “real” plugin for WordPress so I’m not really sure I’ve done it properly but it does work on my local setup using EASYPHP, as well as hosted on a real server.

How it works:
Basically, a cookie is created when the visitor clicks on “I Agree”, and as long as this cookie is there, the splash screen will no longer appear.  Once the cookie is gone, the splash screen will re-appear before the visitor is allowed to continue on to the blog.  If you don’t know what a browser cookie is, read this.

To install:
First download the ZIP file onto your computer.  Then, extract the zip file content and copy the directory “splashscreen” to the plugin directory located at “wp-content/plugins”. If you’ve never installed a plugin, you should probably read the WordPress documentation here.

To use:
First, login as an administrator.  Next, click on the “Plugins” menu item on the left side (v2.7+). If you installed the plugin properly, you should see “Splashscreen” listed. If you do not see it, there’s a problem with the installation.  Click on “Activate” on the right side of this plugin.
splashscreenmenu

Next, click on down arrow to the right of “Settings” to open up the list of options.  There should be a new item there called “SplashScreen.”

If you do not see this item, return to the “Plugins” admin menu to make sure that this plugin is activated.

Now, click on “SplashScreen” and you will get the “SplashScreen Settings” page as shown below.

On this screen, click the box to the right of “Enable Splash Screen” to enable this feature.

Below this selection, make sure to select “template” for your default template.  We’ll cover how to change this later.  Now, click on “Update.”

splashscreensetting

At this point, you can click on “Visit site” at the upper left corner of the administration page to view your website.  If you are using the default WordPress template, you will get something that looks like the image below.

splashscreen

As is, if you click on “I Do Not Agree,” you’ll be taken to google.com.  If you click on “I Agree,” you will be taken to your regular blog page.  Using the default SplashScreen template, once you have clicked on “I Agree” once, you will not see this splash screen again until you close your browser and re-launch and re-open the website.

You can see a demo of this plugin at an adult website — alexisbreeze.com. Obviously, don’t go there if you don’t want to see pr0n.  Actually, there’s just some bikini pictures there right now but if you see this post later on, there might be more.

To customize:
You can change the splash screen to your needs by copying the file “template.htm” to another name.  Do not change “template.htm” so that you can use this as your backup in case you screw something up.  The extension must be “.htm” for the plugin to be able to find your template and list it for selection. For example, you can copy it to “mysplash.htm”.

If you don’t know anything about HTML, you probably should not be touching the template, or just change the text only and nothing else.

The file will look like the code below.

<?php get_header(); ?>
<SCRIPT LANGUAGE="JavaScript">
   <!-- hide from old browsers
   function setCookie(name, value, expires, path, domain, secure) {
      document.cookie = name + "=" + escape(value) +
      ((expires) ? "; expires=" + expires.toGMTString() : "") +
      ((path) ? "; path=" + path : "") +
      ((domain) ? "; domain=" + domain : "") +
      ((secure) ? "; secure" : "");
   }
   function setsplash() {
      setCookie("splash", "1", "", "/");
   }
//-->
</SCRIPT>
<div align="center">
   <h3>To enter this website, you must agree to the terms below.<h3>
   <table border="0" align="center">
   <tr>
      <td colspan="2">
         <FORM>
         <P><TEXTAREA NAME="comments" COLS="70" ROWS="7" READONLY>The material contained
 herein is intended for mature audiences and is not suitable for persons under the age of 18. If you are under
 18 or feel you would be offended by this type of material, please exit this site.

By using this website, you agree to the Terms of Service below. Please read them carefully. This Terms of
 Service is a binding contract between you and this website. If you do not agree with any of these terms,
 please exit this website.

TERMS OF SERVICE:
Blah Blah Blah</TEXTAREA><br />
      </td>
   </tr>
   <tr>
      <td align="left"><h2><a onclick="setsplash()" href="">I Agree</a></h2></td>
      <td align="right"><h2><a href="http://google.com/">I Do Not Agree</a></h2></td>
   </tr>
</table>
</div>

<?php get_footer(); ?>

Do NOT change anything above the “div” shown in yellow.  You can pretty much change everything between the 2 yellow lines, except for the code that is in cyan (the light blue color).  Whatever link you create to go to your blog must contain the call to the “setsplash” javascript function which sets the cookie that tells the plugin that the visitor has seen the splash screen.

For example, if you want to ask the visitor if they are “18 and over”, replace the text, “I Agree” with that text.

Also, you will have to add your own text for your “terms of service” and add it where it now says, “Blah Blah Blah.”

As is, this template will cause the splash screen to appear once until the browser is closed.  Then the cookie is erased automatically and the visitor will once again see the splash screen.

However, if you want the browser to remember that the splash screen was already shown on the visitor’s computer, you can replace the “setsplash” function with the one below.  By doing this, the cookie will remain even after the browser is closed.  Replace the area in green highlights above with the following code.

function setsplash() {
   var exp = new Date();
   var expDays = 365;
   exp.setTime(exp.getTime() + (expDays * 24 * 60 * 60 * 1000));
   setCookie("splash", "1", exp, "/");
}

By the way, when you click on the “Update” button in the setup screen, it automatically clears the cookie so that you will be able to test the splash screen without having to manually delete the cookie or close your browser.

To download:
Download version 0.01 (beta) here.

Hopefully, there will be people that will find this plugin to be useful.  If you find this plugin useful, please encourage me to do more coding by making a small donation.


Updated May 14, 2009:
Version 0.20 is released.

Updated December 3, 2009:
Version 0.30 is released.

Posted Monday, February 16th, 2009 at 7:12 am
Filed Under Category: Wordpress
You can leave a response, or trackback from your own site.

128

Responses to “WordPress plugin for splash screen”



  1. By Bill Bartmann on September 13, 2009 at 9:32 pm

    This blog rocks! I gotta say, that I read a lot of blogs on a daily basis and for the most part, people lack substance but, I just wanted to make a quick comment to say I'm glad I found your blog. Thanks,

    A definite great read…

    -Bill-Bartmann

  2. By Danmiel on September 14, 2009 at 2:07 am

    Hi cochinoman. Thank you for this plugin. Extremely useful! I'm trying to implement it on my website, in a way it redirects the visitor to different languages (it's a bilingual site). The problem is that sometimes when I click on one of the languages, the plugin does not take me to the website, but reloads the splash screen again. Upon clicking the second time, the cookie is set and the plugin works as expected. Do you have any guidance for me in that sense?

    I set this like this:
    <a onclick="setsplash()" href="http://mywebsite.com/en/">Enter site »</a> | <a onclick="setsplash()" href="http://mywebsite.com/">&laquo; Entre</a>

    • By cochinoman on September 14, 2009 at 3:22 am

      I'm not sure but it's possible that you are going to www. mywebsite.com and mywebsite.com and the cookie does not recognize it as the same website. If that's what's happening (and I'm not positive that's true), the solution is in the following comment:
      http://cochinoman.com/2009/02/16/wordpress-plugin-for-splash-screen/#comment-977

      Let me know if that works or not.

    • By cochinoman on September 16, 2009 at 2:09 pm

      I accidentally deleted your comment but recovered it. Your comment below:
      —–
      Hi, thank you for your quick reply.
      Actually it's not www. I redirect to mysite.com and mysite.com/en/ (- for the english part). Now I try to narrow it down and it seems this behavior is limited to native IE7. Firefox, Safary, Chrome, IE8 and even IE8 in compatibility mode work just fine.

      What I'v tryed so far:
      1.Setting the cookie as 1 and 2 – like you suggested here: http://cochinoman.com/2009/02/16/wordpress-plugin-for-splash-screen/comment-page-2/#comment-1240

      2. calling the same cookie by different functions, ie function setsplash() and function setsplashen () for the different links.

      It did not work. But since it happens only in native IE7, maybe you'll have some kind of revelation.
      —–

      I really don't have an answer for you except that it sounds like it's a bug or incompatibility in IE7. I no longer have IE7 so I'm not able to reproduce this problem. If you figure it out, let me know.

  3. By Big Ed on November 3, 2009 at 6:16 pm

    Hi,

    Two problems: first, I'm getting a bad interaction between this and the WP Supercache plugin. Users would hit "enter" and not go anywhere. I just turned Supercache off, but at some point would like to turn it back on.

    Second, I have a user saying he's getting the same problem when trying to log in from a blackberry. He hits "enter" and nothing happens–he can't get in. Any ideas?

    • By cochinoman on November 8, 2009 at 7:06 pm

      1) The only way that I can figure out how to make this plugin work with the Cache plugin would be to combine both into one plugin. If there's another way to do this, let me know and I can add it to the plugin.

      2) Tell the Blackberry user to turn on his/her javascript and cookies for your website.

  4. By Cupidman on November 25, 2009 at 11:35 pm

    Is there a way to add images to the blank screen in the Splash1shot.htm? I have tried everything and somehow cannot get it to work. Thanks for your help

    • By cochinoman on November 26, 2009 at 4:17 am

      If you want to leave everything else as is, put your images after the <H1>…</H1> and BEFORE the <table border="0" align="center">

      Are you using some type of HTML editor or doing it by hand?

  5. By chrissabbatini on January 18, 2010 at 8:17 pm

    Hey, let me start out like everyone and say what a great plugin this is! I can really see how it will come in handy in future projects..!

    Obviously, this particular project is giving me trouble. I'm trying to make a short flash animation play as a splash page and then redirect to the wordpress homepage.

    I've managed to edit a template.htm file to show me the .swf but then it does not redirect to http://www.domain.com/index.php as pointed, but rather just loops the animation over and over.

    Any pointers? Another note: this was due last night. I hadn't accounted on it being so difficult to add a flash intro to a wordpress site! help!

  6. By jon moore on January 19, 2010 at 9:27 pm

    hey man this is a great plugin, it was exactly what i was looking for thanks so much. but i was wondering, how do i get the splash screen to reset after the browser is closed and opened? i'm sure the code to do so is so simple sorry

  7. By jon moore on January 20, 2010 at 4:54 pm

    nvm i got it lol

  8. By jon moore on January 21, 2010 at 2:35 pm

    i'm having problems in firefox browser with the cookie not expiring so the splash page never shows up again even if i restart the browser. but it works in opera, safari, IE, and chrome. any suggestions?

    • By cochinoman on January 21, 2010 at 3:42 pm

      I assume you're using the latest version (see link above). Are you testing with the default plugin template or did you make your own? If you made your own template, try using the default.

      I've tested the default template code with Firefox 3.5.7 on Windows and it seems to work.

  9. By jon moore on January 21, 2010 at 4:01 pm

    Yeah, I've tried all of the templates and the splash page still doesn't appear every time the browser is restarted. (Yes, I have the latest version)

    • By cochinoman on January 21, 2010 at 4:28 pm

      Okay, sounds like you have some type of caching going on in Firefox. Did you install a caching plugin for Firefox? If so, disable it.

      You can test out this theory by closing Firefox, then open to your website. If no splash page, go to a page on your website that you have never been to before. If the splash page appears, then you were looking at a cached version of your website.

      Also, see if the cookie "splash" in still there after re-launching Firefox by going to Tools => Options => Privacy => Remove Individual Cookies. If it's NOT there but you see no splash page, you are looking at a cached version of your website.

  10. By Maor on January 31, 2010 at 6:36 pm

    Hi,
    This is a very good plugin, thank you.
    I have one question about using it:
    What if the end user has js disabled? So he could never run the setsplash function to set the cookie and move into the site.
    Meaning, anyone with JS disabled won't be able to get to the site.
    More than that, what the Google's crawler will see, since as I know the cralwer is also not JS enabled.

    BTW: Add a subscribe to comments, it will be much helpful.

    Thanks,
    Maor

  12. By Waldfee on February 25, 2010 at 2:07 pm

    Hello cochinoman,

    i need your help. How can i include a .swf-data? i'm to glad ;). i've create my own template. create a new folder "splash", insert the index.swf and required javascript. the path i think ist also

    <embed src="/wp-content/splash/index.swf"
    <script src="/wp-content/splash/AC_RunActiveContent.js"

    the javascript are be found, BUT the swf aren't be play? i don't know what's wrong? the path?

    After that if the flash is ok, how could i get a countdown? when the flash is over, its automatically go to the main page without a click on a button? button?

    • By cochinoman on February 25, 2010 at 4:05 pm

      Is your template located in the same directory? If so, you don't need the full path. You should be able to just use "index.swf".

      To have a timeout, use the Javascript setTimeout() function.

  13. By Waldfee on February 27, 2010 at 2:15 pm

    Ah ok. I've found my trouble. in the HTML data i've written all what Flash genetate. Correct is all between the object Tag and the correct path /wp-content/your folder/your swf

    What do you meen with setTimeout()? Where mus this stand? Need i a javascriptflash .jsfl data? or…? have you an example? In javascript i'm a little newbie. i'm still learning. I just can't seem them. Let me guess. It's easier as i think ;)

  14. By Daniel Green on March 2, 2010 at 3:52 am

    Is it possible to make it, so that the script auto re-directs? I mean like a "auto-refresh"? Without the user having to click the link?

    • By cochinoman on March 2, 2010 at 5:39 am

      I haven't actually tried it but it should work. Put the auto-refresh code in the template but make sure that it sets the cookie.

  15. By Waldfee on March 3, 2010 at 3:50 pm

    I' try and try and try again and just i found all. OMFG ist's sooooo easy^^ wayne.

    That's all you need

    window.setTimeout("setsplash()", 13000);

    13000 = 13sec, 10000 = 10sec
    and than, if you want to refresh your site put this code at the beginning
    @Daniel here the autorefresh. i'm search and search…

    <META HTTP-EQUIV="Refresh" CONTENT="15">

    15 = 15sek, 300 = 300sek

    That's all! Thank you cochinoman

  16. By Iain on March 23, 2010 at 9:27 pm

    Hi.
    I would like to know if there is a way to automatically simulate someone clicking on "I Agree".
    What I am trying to achieve is a splashscreen that appears for around 10 seconds, then automatically goes to the Home Page.
    I tried this code:
    <meta http-equiv="refresh" content="5;url=http://www.domain.com">
    But when it refreshes it just goes back to the splashscreen.
    I see in the code that it has the "onclick="setsplash()" and can't figure out how to automate that.
    Any suggestions would be greatly appreciated.

    • By cochinoman on March 31, 2010 at 12:06 am

      You need to do exactly the same thing as the guy who posted right before your post. Use:
      window.setTimeout("setsplash()", 5000);
      to set the cookie AFTER the splash page has been shown. This delay is needed because if you set the cookie too soon, the splash page will not appear at all.
      Then your META html code in your comment will wait a few seconds, then refresh the screen. Since the cookie is now set, the splash screen will NOT appear.

      Make sure that the time in the META is LONGER than the time in the setTimeout. 5000 = 5 seconds, so the META code should be "6" or to be safe, more like "10".

  17. By fabio on March 30, 2010 at 5:14 pm

    does not work with IE?

  18. By Yazid on May 18, 2010 at 8:02 pm

    How to make the web display the always splashscreen when opening the same web in a new tab or re-visit the site after closing the tab?

  19. By ryne on July 5, 2010 at 4:47 pm

    I like this plug-in but wanted to remove it for personal reasons. I had deactivated this plug in but it is still showing to viewers on my site. Any tips how to remove this? I have already deleted this out of the plugin folder.

    • By admin on July 6, 2010 at 3:07 am

      It's either another plugin that is caching the page or the user's local browser cache. My guess is the former.

  20. By magnus on July 13, 2010 at 6:34 am

    thanks would be great if you could ad a list of ip and urls that i aint showing (like search engings) i have a (i think) complete list of that ip and stuff if you want it for a future version just send me a mail.

    i also would like to have the centerthing like 400×400 solid but rest of it 75% transparant black so i still can see "a faded" version of the site in background..

    thanks
    i dont even know if you see this on this inactive(?) addon, but i hope u do :)

  21. By magnus on July 13, 2010 at 6:45 am

    I guess i should put in here somewhere?

    function display_splash() {
    global $splash;

    $splash->getSettings();

    if (($splash->allSettings['splashscreen_enable']) && (!is_admin()) && (!$splash->is_excluded_url()) && (!isset($_COOKIE["splash"]))) {
    // display the splash screen
    $dir = dirname(__FILE__) . '/';
    @include_once($dir . $splash->allSettings['splashscreen_type']);
    exit();
    }
    }

    I have a function to call like

    if (in_array($_SERVER["HTTP_USER_AGENT"], $bot)
    no splash screen
    else
    show splashscreen

    and no i havent figure out how to code addons to WP yet…

  22. By Nat on September 12, 2010 at 8:42 am

    Hi There,

    First thank you so very much for this, I have been trying to create a splash page for a week now and came upon your amazing plugin.

    I am actually using your plugin to create a splash page to direct attention to a crowd funding campaign. I've altered the code a bit and dressed it up with graphics etc. One thing I am struggling with is that I have an image that I have put a hotspot on that says "Click here to Enter" and I entered in the URL I want people to enter on, but it does not work when I actually activate your plugin.

    I noticed this code you have in the template.htm file "<td align="left"><h2><a onclick="setsplash()" href="">I Agree</a></h2></td>"
    But I want my people to click on an image, and not text. Is this possible? I am using Dreamweaver and image hotspots to control click points. The actual HTM page that I created you can find here:
    http://natalie-brown.com/splashnat.htm
    How do I take your onclick language and put that into a hotspot so that when the hotspot is clicked it goes to the main page of the site which is a WP Static page? I hope this makes sense, if not let me know what doesn't and I'll clarify.

    • By cochinoman on September 12, 2010 at 3:06 pm

      I'm not sure I understand your question but if you want an image instead of the text "I Agree", just replace the text with the HTML code to display the image.

      If you need more help, go to my Contact page and email me.

  23. By Nat on September 12, 2010 at 1:48 pm

    Hi.. Just an update.

    I started all over again with a second version. This time instead of it being an image the user needs to click on to enter site, I left your text link code in at the bottom <h2> <a onclick="setsplash()" href="">Click here to enter the web site</a></h2>

    This does note work. For some reason when the link is clicked, it just stays on the splash screen and does not move to inside the site.
    See coded .htm page here: http://www.natalie-brown.com/splashnat2.htm

    Not sure why this is happening? I did add in some CSS and another DIV for the video. Could this be causing it?

    I am in a bit of a bind to get this done, so not sure if you have any time to look at it as my campagin lasts only 20 more days and I wanted to use this as part of the countdown.

    Thanks so much!

  24. By Natalie on September 15, 2010 at 12:14 pm

    Hi there! I am going to send you an email today as .41 does not work for me either. I have done a screen video with me taking you through what I have done and you can see my screen and hear me speak about the issue. I really appreciate your reply.

    Thanks :)

  25. By Nolan Tarantino on September 27, 2010 at 6:20 am

    You posted a comment above. Can you give the coding for setting a cookie with lang for french? If I can see it, I think I can then copy it more.

    You can set the cookie name by changing the setcookie call. The first parameter is the name of the cookie (e..g.):
    setCookie("splash1", "1", exp, "/");
    setCookie("splash2", "1", exp, "/");

    But doing this will not work with the plugin because you will have to change the plugin PHP code to check for 2 different cookies instead of just one.

    Instead of doing it that way, I suggest you set an entirely different cookie for the language selection (e.g. "lang"). This way, you can keep the splashscreen plugin code unchanged and when you need to find out what language you are using, check your "lang" cookie instead.

  26. By michael on November 16, 2010 at 1:42 pm

    I tried this last year on my wordpress adult site – and there was some kind of conflict, it would work right….has any other newer version been released? or is it the same version as 10 months ago?

  27. By Isaak Wells on November 20, 2010 at 1:32 am

    Is there a way to show the splash screen every time the a person comes to the site. Basically reject the cookie.

    • By cochinoman on November 20, 2010 at 2:26 pm

      If you don't set the cookie, the splash screen will never go away. I'm not sure what you want to happen. The way it's setup currently, when they return to the site in another session, the splash screen will be there again.

  28. By Doug on November 28, 2010 at 4:21 pm

    Is development on this plugin continuing? I hope so as it is pretty neat.

    I had it running pretty well and customized and everything and when I installed a new theme on the site, it went haywire. Could this be a conflict with the CSS in the theme?

  29. By smartwebsusa on December 30, 2010 at 6:56 pm

    Please see my site invertigosolutions.com.

    I used SplashScreen on it and I want the splashscreen I made to show each time a user visits the homepage.

    You said: I think what you want is just a “homepage” which can be done via: Administration > Settings > Reading > Front Page Displays > Static Page
    Then select the “homepage” that you want displayed.

    But this only allows me to pick a WordPress page to be selected which has the full template and theme I am using. I want the full black background, etc.

    Can the cookie be disabled but the Splash Screen is not disabled..?

    • By cochinoman on December 31, 2010 at 1:05 am

      The splash screen is designed to appear on ANY page when the user first enters your website. If you only want it to appear on your homepage, you will have to figure out a way to set the cookie automatically on all pages except for the homepage. This can be done but the plugin does not support this feature at this time.

      Just for your information, the new version of the plugin is available at:
      http://cochinoman.com/2009/12/04/splashscreen-wordpress-plugin-version-030/

      This new version does not support what you are trying to do but it has other features that is better than the old version.

  30. By Heather on January 27, 2011 at 10:38 am

    Is it possible to use this plugin to show a video before entering the site?



Leave a Reply