This theme gives you a custom Splash Page template to give a more visual presence when people come to your website. For this tutorial, we are going to create one, but we also have to add an extra step of what WordPress calls a “Static Front Page“.

Static Front Page

By default, WordPress shows your most recent posts on your site’s front page. However, many WordPress users want a static front page or splash page as the front page instead. This means we now have to move our blog further into our website.

The concept is that we need to make two pages, one for our front splash page and another for displaying our blog posts. This is what we are going to be making:

Natured Splash page

Let’s Make Our Pages

We are going to make two pages.

  1. Create a front page by going to Pages and click Add New Page.
    • Title it Front Page, or whatever you decide.
    • While your page is open in the editor, find the Page Attributes panel box and select the Splash Page template
    • Type in a small welcoming message to your site visitors.
    • Publish the Page.
  2. Create a blog page by going to Pages and click Add New Page.
    • Title it Blog, or whatever you decide.
    • DO NOT add content. Leave it blank because WordPress will ignore any content you put into this page. Only the title is used.
    • Publish the Page.
  3. Go to Administration > Settings > Reading
    • Set Front page displays to a static page
    • In the drop-down menu for Front Page select “Front Page.”
    • In the drop-down menu for Posts page select “Blog” or the name you created, or leave it blank if you will not feature posts on the site.
    • Click Save Changes.

Add an Entry Button

Technically, this is not a button, but an actual menu we will have to make. To get the button style, we will be adding a special class to our menu link.

  1. Log in to your WordPress Administration area.
  2. Go to Appearance > Menus
  3. At the top, click the text link Create a new menu
  4. Title your new menu as Splash Menu, and then in the Menu Settings area, check the box next to Splash Menu and then click Create Menu
  5. Now we need to drag a page into our new menu. This will be the page that the site visitor will be redirected once they click on the Splash page entry button. When you drag a page into the menu, you can rename the label to be what you want. For example, the demo site button links to the blog, but I renamed the label to “Welcome“. One more step while we have this menu item open, we need to add the splash-button class to the class field.
    Natured Splash Button Class
  6. Click the Save Menu button.

Customize Your Splash Page

As beautiful as it shows, the splash page can be personalized by changing the photo and colours.

The Natured theme uses the WordPress Header Image feature in our splash page. If you are familiar with the Header Image feature of WordPress, you can take advantage of its Randomize function which means every time the page is refreshed, the image will change.

The splash page template will load the default maple leaf photo, but we can change that.

Specifics About this Feature

  1. WordPress Header — The splash page uses the core WordPress Header Image feature
  2. Renamed — We renamed the admin menu link from Header to Splash Page
  3. Randomize — You can still upload multiple images and set it to randomize when the splash page is refreshed
  4. Image Size — We recommend 1920x1200 for your images. This ensures better quality on much larger screens, but we also strongly recommend that you optimize your image(s) to keep page load times reasonable.

Changing or Uploading Photos

The default image is the green maple leaf photo, but you can change this to your own. Make sure you have your splash page already created and the Reading settings are set to have this as your front page. We want to be able to see a live preview as we make our changes.

  1. Log in to your WordPress Administration area.
  2. Go to the Appearance > Splash Page
  3. Click on the Add New Image button to upload a new photo
  4. If you add more photos, you can click on the Randomize button which allows each photo to change every time your front page is refreshed.
  5. Click the Publish button at the top of the options column.

Customize Your Splash Page

Once you have your image(s) set, you can continue with customizing your splash page with colours and also adjust the blackout transparency level.

  1. Log in to your WordPress Administration area.
  2. Go to the Appearance > Splash Page
  3. Make any colour changes to the splash page elements using the colour selectors
  4. Use the Splash Blackout Overlay setting to adjust the transparency.
    Natured splash blackout ssetting
  5. Click the Publish button at the top of the options column.