Home > Tech > Coding > Splashscreen WordPress Plugin Version 0.30

Splashscreen WordPress Plugin Version 0.30

Since the last release of my WordPress plugin Splashscreen version 0.20, there’s been many requests for new features. You may also want to read the original post for version 0.10 for completeness.  One of the most requested feature was to allow search engine bots to get the blog content so they can traverse the website properly.

Ask and ye shall receive… version 0.30 of the plugin, that is.

To control the new feature, I’ve added some new options in the settings as shown below:

splashscreen1

Click on image for large version

Enable Overlay:
When this option is enabled, the splash screen will be an overlay on top of the content of your blog page. In other words, your blog will still be there, but the splash screen will be on top of your page. This way, the search engine bot can still “see” your blog, even though your visitors cannot while the splash screen covers the contents.

If you turn this option off, you will get the non-overlay version of the splash screen which will NOT have your blog contents “under” the splash screen.  I kept this feature in the plugin for backward compatibility for people who are using it right now.

Overlay Opaque:
The new overlay splash screen is made up of a background and a dialog-type box with links, as shown below.

splashscreen2

Click on image for large version

Normally, you would want the background to be opaque (cannot see-through) so this option should be enabled. However, for some bloggers, you may want to have the background transparent so that you can see a little of what is on your blog. Of course, this would not be a good idea for “adult” websites, but for people using this plugin for non-adult websites and wanting to force the users to agree to your “terms of service,” you might want to tease them with a preview of your blog.

Overlay Background Color:
This is the color of the background using normal CSS specifications (e.g. #000000, rgb(0,0,0), black). If you don’t know what CSS colors are, see this article.
The rest of the options are the same as in version 0.20. However, if you are using the new “overlay” feature, you must use a new template. The default overlay template is called “splash-overlay.htm” as shown below:


<script type='text/javascript'>
function setsplash() {
   setCookie("splash", "1", "", "/");
}
</script>

<div style="left: 50%; top: 50%; position: relative; background-color: #F5F5F5; margin-top: -150px; margin-left: -300px;
 width: 600px; height: 300px; padding: 30px;">
 <center>
    <table border="0">
       <tr>
          <td colspan="2" align="center">
             <img src="<?php echo plugins_url('splashscreen/images/wordpress-logo.png'); ?>">
          </td>
       </tr>
   <tr>
      <td colspan="2" align="center">
         <script type="text/javascript">checkcookies();</SCRIPT>
            <h3>
               To enter this website, you must agree to the terms below.
            </h3>
         </td>
      </tr>
   <tr>
      <td colspan="2" width=100%>
         <FORM>
            <P><TEXTAREA style="font-size: 14px;" NAME="comments" COLS="70" ROWS="7" READONLY>By
 using this website, you agree to the Terms of Service below. 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:
[enter terms of service here]
With more text here, there will be a scroll bar on the right to allow the user to scrool to read the terms of service.

If he/she does not wish to read the entire contents, they may simply agree without reading. Even if they do
 so, they are agreeing to the terms of service by clicking on "Agree".</TEXTAREA><br />
            </td>
         </tr>
         <tr>
            <td align="left"><h2><a onclick="setsplash();showcontent();return false;" href="#"><font color="green"><b>I Agree</b></font></a></h2></td>
            <td align="right"><h2><a href="http://google.com/"><font color="red"><b>I Do Not Agre</b></font></a></h2></td>
         </tr>
      </table>
   </center>
</div>

Changing the template:
Be very careful about what you change in the template. My recommendation is to copy it to a new filename (e.g. mytemplate.htm) then start editing it. Do NOT change the original template because if you break it, you may not be able to get back to a working version.

    • The first item of interest in the template is near the top and is highlighted in green. If your website re-directs www.mywebsite.com to mywebsite.com, you will want to change the line to:
setCookie("splash", "1", "", "/", ".yourdomainname.com");

Notice that you must have the dot (“.”) before your domain name.

  • Next, the blue  highlighted item is the WordPress logo that appears in the overlay dialog box.  You can replace it with your own logo and enter the name there. Place your logo file inside the subdirectory “images” inside the splashscreen directory. If you don’t want any image, remove the entire “img” HTML.
  • Finally, replace the yellow highlighted area with your own terms of service or whatever you want to display in the dialog box.

That’s it.

If you want to get fancy, you could change the size and look of the dialog box itself. This is left as an exercise for the student. One thing to keep in mind is that you need to center the dialog box properly.

Free Cool Feature:
While working on the new version of this plugin, I realized that if the underlining website is vertically long, the user could scroll down the page and not be able to see the dialog box. This can also happen if the URL is using a bookmark down the page (e.g. pointing to a comment near the bottom of the page).  At first, I tried forcing the page to automatically scroll up to the top. After a lot of work, I got this to work but when the overlay goes away, you are looking at the top of the page instead of what you wanted to see.

The solution was to copy the technique that terrible SPAM boxes use to follow you when you scroll. Basically, when you scroll, the javascript code will automatically move the dialog box so that it’s ALWAYS centered on the screen.  This also works for bookmarks in the URL.  Nice feature if I do say so myself.

You can see the new version of the plugin in action at alexisbreeze.com. This website is “adult” so don’t say I didn’t warn you.

Until I get this up on the WordPress plugin page, you can download version 0.30 here. [See below for new updated version]

Hopefully, there will be people that will find this new version of the plugin to be useful. If you do, please encourage me to do more coding by making a small donation. Even just $1 will help.

Update December 5, 2009:
I took some code out of the template and created version 0.31. This should make modification of the template a little easier.
Update July 12, 2010:
A helpful commenter told me that the templates were missing a closing /FORM, which have been added in version 0.40.
Update August 24, 2010:
Yet another commenter has found that the adult template was not updated for this new version. This has been corrected and can be downloaded in version 0.41.
Update November 14, 2010:
If you are trying to get this plugin with work with WP -SuperCache, checkout this fix at technicalnotebook.com.

Basically, all you have to do is add this code before the </body> tag: <?php define ("DONOTCACHEPAGE",1); ?>

73 comments

  1. Hi cochinoman,
    great plugin!!!

    I use this plugin in combination with Buddypress! Do you know Buddypress? Buddypress is a plugin that expand the WPMU into a social network. Try out, it's fantastic.

    Ok, splashscreen is a great plugin, but with buddypress there is one problem, at first access, the admin bar (adminbar of buddypress) don't appear.
    Can you solve this issue?

    Thanks for your great work…

    Andrea

    • Are you using WP MU? If so, I don't know if this plugin will work with that. I don't know what it takes to be compatible with Buddypress but I'll take a look at it when time permits. It looks very interesting.

  2. Hi cochinoman,

    buddypress works only with WPMU installation,
    so, I hope that you'll try BP as soon as possible.
    Great work, and thanks…
    Best wishes for the new year

    Andrea

  3. Hello,

    I really like this plugin and would love to know if you have any idea on how to get a flash actionscript 3.0 button to work with it? Any help is appreciated!

    Thanks,

    Matt

    • I'm not familiar with flash so I don't think I can be much help. To get the plugin to work properly with flash, you would have to set the cookie "splash" inside the flash somehow. I don't know if this is possible in flash.

  4. Is there a simple cookie variable setting that will always display the splash page when hitting the index page, even in the same session?

    • All you have to do is clear the cookie "splash" to see the splash page again. So if you want the splash page to start re-appearing again after they read a specific page, you would clear the cookie on that page. After that, they would see the splash page again.

      However, if you only want the splash page to show up ONLY on the index page, this will not work. You might consider setting your WordPress to show a special index page.

      Hope I understood your question correctly. If not, post here again.

  5. Now I see there is a newer version to handle the SE spiders while splash screen is there.

    Last thing is what if the user has JS disabled? How can he actually get to the homepage from the splash screen?

  6. Hi,

    I have a little error with the plugin. On first browsing to the site the splash is being showed, but when trying to navigate the site, the site breaks and there's a blank screen with only this error:

    Fatal error: Call to a member function getSettings() on a non-object in /data/15/1/116/83/1768735/user/1912227/htdocs/wp-content/plugins/splashscreen/splashscreen.php on line 347

    What can it be?

    Thanks,
    Maor

  7. @cochinoman thanks for your quick answers.

    About the error message I've got, it because I tried to set a $_SESSION cookie named splash.
    I finaaly set a regular setcookie () with expiration time. This is for the case that js is disabled ..

    It's a bit problematic that plugin don't work if js is disabled, since there are 10-15% of users that disables the JS.

    Is there a way to deal with it?
    What I did is, as I wrote, add in my WP template header the setcookie of splash. That ensures that a user without js will be shown my splash and on next refresh he will get into the site. I don't need the user to confirm something, just to show him a nice small flash before entering the site.

    If you think of something, I'll be happpy to know…
    You may see it in work, even with js disabled, in the link –
    http://www.saadifoundation.org

    • Since the new version of the splash screen does not request anything from the server, there is no way to run any code. It is possible to make a splash page without using JS but not the way it's being done right now. The older version is closer to what you want but it would have to be modified.

  8. Thanks for the new version! (And sorry for getting back to you so late.) The overlay feature is great and works like a charm. Thanks!

  9. I have to say, awesome plugin, I actually did not realise there was a new version so ended up writing my own fix for the search engine optimisation.

    Not sure if it will actually help anymore but good for reference I have posted the details on my blog ( http://www.technicalnotebook.com/software-development/wordpress-plugin-splashscreen-seo-fix/ ). The difference is this particular fix still uses a completely separate page and just checks the HTTP User Agent and does not display the splashscreen if certain criteria are met.

    But as I said, AWESOME work and I really am a fan.
    Stuart

  10. I just came upon this plugin and it is exactly what I was looking for. I am not using the splash page in the same sense as you have here (using it to warn of adult content), but I plan to use the splash overlay to play a small introduction .flv instead.

    Thank you, I am very excited for my client!

  11. I see you have been putting a lot of effort into this plugin and appreciate that. Many of the requests that others are making can be found in another plugin called WP-Announcements. You could get some great ideas from that and incorporate your version of them into yours.

  12. i got this error plz help

    Fatal error: Call to a member function isAuthorized() on a non-object in /home/chitown/public_html/wp-content/plugins/splashscreen/splashscreen.php on line 92

  13. I would like to use the overlay without it centering. I have a longer page and need to show other content below the box.

    • Are you saying that your splash page is larger than the screen? If so, you can take out the code that tries to center itself or just put it at the top of the page.

  14. Yeah this i was looking for! TY for a good job!

    (in splash.htm u r missing a </form>)

  15. found one problem. when i use share in facebook i get this info text "Splash Screen for WordPress." and not a part of the post as i use too. any way to work around this problem?

    • Sorry to be dense but I didn't understand your question. I'm not super familiar with Facebook but how does the WP plugin come into play with it? Am I missing something here?

  16. sry i fixed it just removed some lines from splash.htm some header things.

  17. its when u use one of thoes "share on facebook" buttons it happend.. i will redo it later and post some screenshots for ya.

    • I think I get it. After the splash screen goes away, are you saying that it re-appears when you click on your "share on facebook" link on your website?

  18. nah it wasnt that, its like this:
    http://img31.imageshack.us/img31/3603/splashbp.gif

    OK i have only posted one post after the installations (and no i dint fix it yesterday it only worked 1 time on that post). I will try to do a new post later today and see if its still like this even after i edited the splash.htm

    • I'm not sure what is causing this to happen. Are you using a plugin to do the "share" button? Or is this inline code in your WP theme? Either way, if you could direct me to the code that is being used, I can take a look.

  19. Hey I love the way this plugin works when it does but I'm having an issue editing the template.

    I am 100 percent sure I'm only editing the text, but for some reason the moment I pull up the adult-template.htm in notepad it breaks it so that clicking "I Agree" just keeps reloading the splash page.

    Using the default template works fine but any changes to the template and I can't get around the splash page.

    Any advice?

  20. I'm working on a site that has a banner with mildly adult pictures. is there a way to remove the banner from the splash page, but keep the banner on the rest of the pages?

    thanks!

  21. When I setup Wp Super Cache with Splash Screen Plugin, I've a problem. It's seem splash screen not work. Please advise.

  22. GREAT plugin! I have a question… I used it on this website….

    http://www.aidtohaititoday.org/aidHaiti/

    Do you (or anyone) know how to make the text come up 5 seconds later? Because I have a video playing on my splash page, I want to delay the option of skipping the intro.

    Thanks!

    • To do that properly, you would need to write some Javascript code. Alternatively, you could use a small flash area where you text would go but that will not work with all platforms and browsers.

  23. i'd like to show splash screen every times when i click home (htt://www.mydomaian.net)

    what should i do sir?

    or do u have the method to set cookies expire such 30 min, 1 hr. somethings like that. Thank in advance

    • If you just want a static page, you can set that at Settings > Reading > Front Page Displays > Static Page, and set to the page you want. You can play around with the cookie but that won't do what you want to do.

  24. Thank you cochinoman, I got an idea.

  25. Hi!
    First, please excuse my poor english level, I'm not a native english speaker.

    I'm searching for a WordPress plugin that should display a disclaimer that the visitor has to accept before entering in my website.
    Splashscreen is exactly what I'm looking for.

    It seems to work fine (with overlay enabled) except for the indexing on Google. Google seems to have indexed some of my pages but the little description contains the text of the disclaimer and not the actual text of the pages.

    Is this a normal behaviour of the plugin or google bot?

    • I'm not sure exactly how google bot handles the scan of the overlay and content under the overlay. The site that I use it on does have the content but the picture that comes up when you click on the magnifying glass does not look like the overlay or content.

  26. thanks for great plugin.
    I am not a programmer but asking can use a php cookie code instead of js to avoid the block js problem?

  27. Hi! Great Plugin. 😀

    One question, like excluded SplashScreen from index page? Only want to show some pots, can be done?

    Thanks!

    • I'm not sure what you are asking. You want to show the splash screen on your website except the index page? This could be done but it would require a change to the code.

  28. This is great, however how can we accomplish 2 things:

    1) Display a Video (that will play automatically or stream immediately after load) instead of text/graphics?

    2) Once the video finishes playing exit/continue/hide the splash-screen altogether and go to the site (as if "Enter" was pressed)?

    Much appreciated!

    • Part 1 is not very difficult to do. All you have to do is replace the text/graphics with the HTML/javascript needed to display the video (e.g. from Youtube).

      However, part 2 is not easy to do. If you knew ahead of time exactly how long the video would take to play, you might be able to fake it with a timer that would automatically remove the splash video screen. However, this method may not work for people with very slow connections.

      The only way to properly do this would be to create a flash file that would display the video then automatically trigger something. I'm not a flash expert so I really don't know if this is even possible.

      I think the timer method is more reasonable to do.

  29. Thanks cochinoman!

    On Point 1, I would use a locally hosted .MP4 video file

    On Point 2, The advantage of MP4 is that unlike some other formats it can play for ALL devices (including iPhone/iPad) and the video "ends" once it completes playing, unlike an animated GIF for example which is equally compatible but loops forever. The trick will be to play the video till it ends and then do "something" like load the main page of the site…

    I really need a way to get this done….

    Anyone can help?

    Steve.

  30. Hi,
    I used this plug-in to display a "non interactive" splash screen on the website I'm setting up..

    I basically needed an image and some text, to show up before the site itself, and then an auto-redirect after 3-4 seconds or something to the site itself and this helped me out well.
    The only problem, is that I was unable to set the autoredirect to the site itself implementing the function that lets the plugin understand that the splash screen has already been showed, and lets the user access the site.

    I don't really know if you understand what I mean, but I'm sure it would pretty easy to modify the code to do so..

    I guess it would take less than a minute for anyone skilled out there.. but I am a sort of beginner into these kind of things… so…

    Since I need this thing for a work site I'm getting paid for, I will be more than happy to give you a 10/20$ donation if you can help me out..

    It would be fantastic if you could email me at sales (at) vaiarelloenterprises.com or at the email I left in the mail comment section.. or even here.

    Thanks in advance,
    Giulio Carlo

  31. Well, never mind.

    thank you anyway for the help I imagine you would have provided, but I resolved without the plugin simply moving wordpress to another directory , and creating a index with the splash screen/images I wanted+ a redirect

    Have a nice day

  32. Love the plugin!!!

    The problem…

    When I use the adult template and hit the agree button it never loads the site. I'm using the version 4.1 of your plugin. The only edit I made was putting in my disclaimer in the text area.

    Please help

  33. here is what I've done.

    1) Removed all Caching programs.
    2) Uninstalled Splashscreen 4.1
    3) Installed Splashscreen 3.1
    4) Activated plugin
    5) tried multiple templates (Adult, splash,splash1) and all just reload the splashscreen screen.

    Shawn

    • Go back to version 4.1 because 3.1 does have some minor bugs. You must have Javascript and cookies turned on in your browser. What platform and version of browser are you using? (e.g. Windows Vista/Firefox 3.5). If you are not using the latest version of your browser, please try updating.

  34. Okay…

    I'm using Chrome & Firefox and both give me the same results after I…

    1) Uninstall Splashscreen 3.1
    2) Install Splashscreen 4.1
    3) Activate plugin
    4) Tried all templates and he same result as before.

    Here is an odd behavior…the settings that are left in the configuration panel when I uninstall the plugin are the exact same settings when I reinstall the plugin. It's almost as if the plugin is not really uninstalling and deleting..weird?

    Anyway I just can't get it to get past the Splashscreen…oh' and there are no caching programs installed anymore…

    Shawn

    • Something is weird. What platform are you using? (e.g. Mac OSX, Win Vista)

      Try going to my adult site at:
      alexisbreeze.com
      (Fair warning: No hardcore images there but there is some nudity.)

      If the splashscreen works there, then it's not your browser settings, which is what I suspect but we have to start narrowing down the possibilities.

  35. Works perfectly as suspected when I go to alexisbreeze.com so it's not a browser setting. If you can give me a direct email I can give you backend access so you can help debug.

    Shawn

  36. is this splashscreen plugin still works if I already have a wordpress site that use static page as my front page and split blogpost in other page ?

    I've tried in my local host and the splashscreen are not loaded …

    thanks

    • I've never tried that so it's possible it doesn't work. Did you try it with the static page turned off to see if it works at all?

      Remember to turn off any caches and other plugins that might interfere.

  37. Do you know if there is a limit to the number of exclude pages the plugin allows? I have lots of pages that I want to exclude and that only seems to work for some, but not all, of the URLs I have listed.

    • There is no limit in the code. However, if you look at it again after you save, and the URL's get shorter, the ones missing did not get saved into the database because of a string limit. How long approximately is the list?

  38. This plugin is great! I'm using it for an optional signup box: is there a way to add a "Close" button, or to give users the option to click off to get where they were originally going?

    Thanks!
    Alex

    • The adult template has a "Enter" link to go to the page. You can change that to "Close".

      More specifically, the code you would use is:
      <a onclick="setsplash();showcontent();return false;" href="#">Close</a>

  39. Question about databases and upgrading. We recently upgraded from an older version of splash screen to the current version. The issue we are having is that users can no longer hit "I agree" on the splash screen. We do customize the template, and everything worked before. We simply upgraded to allow for a more opaque splash screen. I'm hoping for your thoughts or help on that. I look forward to hearing from you!
    -Drew

    • Are you using the old template from the old version? If so, you will have to upgrade the template. Start with the default template that comes with the new version and modify it for your needs. If that doesn't work, contact me via the "Contact" link above.

  40. One of our clients has requested we evaluate your plugin for use on a major multi-site setup. The users would need to modify the templates/terms/css etc themselves. Unfortunately, we can't allow write access to the (shared) plugins directory, as that would create chaos. Instead, could your plugin be made to optionally read templates from the themes directory?

    Also, any plans to put this back in the WordPress repository, as it adds some small level of assurance?

    • I stopped updating the plugin about 2 years ago. I still help people with using the plugin if I can, but I don't plan on any new versions or modifications at this time.

  41. How to change the position of the “Enter Here” button and/or how to just use the picture to click on to go to website