WP Splash Page

Version 1.2


A fast and easy way to use a splash page. Support Forums: http://wordpress.org/support/plugin/wp-splash-page

  1. Upload the "wp-splash-page" folder to your WordPress plugin directory ( /wp-content/plugins ). You can also zip the contents of this folder and use the built in WordPress plugin installer to use the zip you just created.
  2. Activate the plugin.
  3. Continue on to the settings page to set up your Splash Page.

When you install the plugin, the Splash Page is disabled, you must go to "Settings -> WP Splash Page" and activate the "Enable Splash Page" option. Though before that, you probably want to set some options.

Note: Each time you save the Splash Page options, the "counters" are reset, meaning that the Splash Page is displayed again to all users.

You can embed a YouTube video if you wish in the Splash Page, for example a teaser of your new project.

  1. Get the video ID: You can get the ID from the last part of the video url. In "http://www.youtube.com/watch?v=Q8Tiz6INF7I" the ID is "Q8Tiz6INF7I".
  2. Introduce the ID: Go to "Settings -> WP Splash Page" and introduce the YouTube Video ID in the video section.
  3. Save changes.

If you are an advanced user and you want create your own template and style for the splash page follow the next steps.

  1. Create a new folder in the "wp-splash-page/templates" directory with the name chosen for the template.
  2. Inside this folder create a file named as "splash-page.php". This is the only file loaded when the plugin generates the splash screen. So you can make your own html page and embed custom styles.
  3. Active this new template in the plugin options page.

Also you can copy & paste the default template folder and edit its content.


API - Advanced Customization.

You can use the stored information about the configuration chosen in the plugin options like the text color and title or the ID of the video. All this within a php array that you can access by typing:

<?php echo $this->settings['id_option']; ?>

Instead of "id_option" you must type one of the following indices:

ID TYPE DESCRIPTION
template_url String Absolute url to current template directory
title String The title
page_title String Title of the page, the <title> tag
title String The title
title_color Hexadecimal Title color
text String The text
text_color Hexadecimal Text color
continue_button_text String Text inside continue button
current_url String Link to current page
continue_button_text_color Hexadecimal Color text inside continue button
continue_button_bg_color Hexadecimal Continue button background color
youtube_id String The video ID from YouTube
video_width Integer Video width
video_height Integer Video height
image_url String The background-image url
center_image String Posible values: "left top" or "center center"
repeat_image String Posible values: "repeat" or "no-repeat"
enable_age_confirmation Bool Age validation: 1 = ON | 0 = OFF
min_age Integer The minimum age required (in years)
reject_text String The text shown when a user is rejected because he is underage
enable_opt_in Bool Checkbox Opt-in: 1 = ON | 0 = OFF
opt_in_text String Text for the checkbox opt-in label
opt_in_reject_text String The text shown when a user is rejected because he didn't check the checkbox
template String Name of the chosen template, the name of the current folder
show_on_mobile Bool Show on Mobile & Tablets: 1 = ON | 0 = OFF 
show_in_all Bool Show on all pages: 1 = ON | 0 = Only displayed in homepage.
expiration_time Integer Cookie expiration in days

All hex values ​​are composed of 3 or 6 numbers.

Important: You should use the $this->current_url property to generate the link of continue button.

Example of Use:

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <!-- === Page Title === -->
	<title><?php echo esc_html( $this->settings['page_title'] ); ?></title>
</head>
<body>
	<!-- === Text === -->
	<p ><?php echo $this->settings['text']; ?></p>
    <!-- == Continue Button -->
    <a href="<?php echo esc_url( $this->current_url ) ?>"><?php echo esc_html( $this->settings['continue_button_text'] ); ?></a>
</body>
</html>

Age Validation

In order that your template supports the age validation system you must follow the next steps.

<?php if( $this->settings['enable_age_confirmation'] ): ?>

     <!-- === Age Verification Form === -->
     <form method="POST">
          <input type="number" name="wpsp-month" min="1" max="12" size="2" maxlength="2" value="<?php echo esc_attr( date('m') );?>" placeholder="mm" required="required" />
          <input type="number" name="wpsp-day" min="1" max="31" size="2" maxlength="2" value="<?php echo esc_attr( date('d') );?>" placeholder="dd" required="required" />
          <input type="number" name="wpsp-year" min="1" max="9999" size="4" maxlength="4" value="<?php echo esc_attr( date('Y') );?>" placeholder="yyyy" required="required" />
          <?php wp_nonce_field( WP_SPLASH_PAGE_AGE_FORM_NONCE, 'age-nonce' ); ?>
          <input type="submit" value="<?php echo esc_attr( $this->settings['continue_button_text'] ); ?>" />
     </form>

<?php else: ?>

     <!-- === Continue Button === -->
     <a href="<?php echo esc_url( $this->current_url ); ?>" ><?php echo esc_html( $this->settings['continue_button_text'] ); ?></a>

<?php endif; ?>
<?php if( $this->minor ): ?>

     <!-- === Text when a user is underage === -->
     <p><?php echo esc_html( $this->settings['reject_text'] ); ?></p>

<?php else: ?>

     <!-- === Your code, including the age verification form  === -->

<?php endif; ?>

Checkbox Opt-In

In order that your template supports the checkbox opt-in system you must follow the next steps.

<?php if( $this->settings['enable_opt_in'] ): ?>

     <!-- === Opt-In Form === -->

     <form method="POST">
                        <input type="checkbox" id="opt-in-checkbox" name="opt-in-checkbox" value="1" />
                        <label for="opt-in-checkbox"><?php echo esc_html( $this->settings['opt_in_text'] ); ?></label>
                        <?php wp_nonce_field( WP_SPLASH_PAGE_FORM_NONCE, 'wpsp-nonce' ); ?>
                        <input type="submit" value="<?php echo esc_attr( $this->settings['continue_button_text'] ); ?>" />
            </form>

<?php else: ?>

            <!-- === Continue Button === -->
            <a href="<?php echo esc_url( $this->current_url ); ?>" ><?php echo esc_html( $this->settings['continue_button_text'] ); ?></a>

<?php endif; ?>
<?php if( $this->opt_in_rejected ): ?>

     <!-- === Text when a user didn't check the checkbox opt-in === -->
     <p><?php echo esc_html( $this->settings['opt_in_reject_text'] ); ?></p>

<?php else: ?>

     <!-- === Your code, including the checkbox opt-in form  === -->

<?php endif; ?>