WordPress/Thesis Tutorial: Custom ‘Coming Soon’ Page

WordPress-Thesis Image

One of my frustrations when developing WordPress websites (separate from Thesis) is trying to have a “coming soon/under construction/under development” page so that the public gets the message that things are coming while I and the client can work away in the background. Why would you need this? Well in most cases you have a domain name purchased and parked somewhere. Many times you get a lovely, unsightly, generic ‘coming soon’ page that looks very unprofessional.

This tutorial is for people who use Thesis, however you can use this technique for any WordPress website under development where having a custom design is needed right out of the gate.

What are the benefits?

  • Design and develop website with a single install of WordPress
  • No need for an index.html page to hide your WordPress site under construction (this creates preview hell with clients)
  • No need to move any files when you are ready to “turn on” the website
  • Allows authorized people to add/edit/delete content in the WordPress admin interface while the design is underway
  • Allows authorized people to see the progress of the website overall without the public seeing anything

I can hear some of the purists already set to put me on the stake and burn me for suggesting the use of an “under development/construction” page citing that “one should not publish a website until it is ready for public consumption.” However, when dealing with WordPress, or any database driven website, moving databases, encoded URL’s and all the supporting files around to different directories can be laborious and create the opportunity for errors when you are ready to launch—at that stage of the process who needs more work! Not me.

What if you want to allow others (clients, etc.) access to the WordPress install so that they can start entering content while you are busy getting customizations (GUI, plugins, etc.) dialed in for prime-time? What can you do?

I have an answer that I came across today while working on a friends website and I am sharing the process in this tutorial.

What we needed on this website project was:

  1. A “coming soon/under construction/under development” page for public consumption
  2. Access to the wp-admin area for me and my friend (client[s])
  3. Ability to preview the custom design online that looks entirely different from the “coming soon” page with both viewable
  4. Ability to navigate the entire “in-development” website without having to go to another web-server
  5. Ability to install everything (WordPress, Thesis, Database) initially and leave it there when the website goes live
  6. Ability to make the website go live in less than 3 minutes when we are ready to “turn it on”

We’ve done all of the above and it is relatively simple to do.

What you will need to complete this tutorial?

  1. WordPress already installed
  2. Thesis already installed (optional)
  3. WordPress admin access
  4. FTP access
  5. WordPress plugin called Theme Test Drive
  6. A “coming soon/under construction/under development” page for public consumption that you can upload via FTP

First Step—Creating your “coming soon” page

You should first open your coming soon/under construction/under development page in an editing program. You want to add the following to the top of this file before any html:

<?php
/*
Template Name: Placeholder Page
*/
?>

  • The rest of the file should contain whatever message/graphics you want for public consumption.
  • Be sure that all css/styling is within your file
  • Be sure to save the file [name].php, for me its placeholder.php, or temphome.php
  • Upload this file via FTP to: ~/wp-content/themes/default
    • This is the default theme folder that comes with WordPress when you install, if you don’t have it, get it.

Second Step—Install theme plug-in

Download and install the Theme Test Drive plugin from Vladimir Prelovac to your WordPress plugins directory. If you need help with downloading, installing and activating plugins go to the source at WordPress.

Third Step—Creating the placeholder page in WordPress

Create a new page within WordPress. Give it a title–I called mine “Placeholder” and in the content area I entered, “This is a placeholder page. If you want to go to the actual homepage click here.”

placholder

I make the text “click here” a hyperlink but only give it the “#” sign for now (to link nowhere) until we deal with the homepage redirect which we will do in the next step.

Before you save the page go to the right side of the page, the right sidebar, to the Attributes to change the Template from the “Default Template” to “Placeholder Template” and then click Publish. This will ensure that the correct page is showing.

Fourth Step—Making the placeholder page the ‘homepage’

In this step you will make the page you created in the previous step the homepage. This is so it will be viewed to the public as the “coming soon/under construction/under development” page.  Go to the Settings/Reading in admin. Under the Reading settings you want to select the radio button next to “A static page (select below).” Then from the pull-down menu next to “Front Page” select Placeholder page.

placeholder_selection

Fifth Step—Setting up the development theme prefs

Check the theme setting and set Theme Test Drive preferences. Navigate to the Appearance sidebar options, and select Themes. Now select WordPress Default as your theme option. You are doing this so that the public at large sees the placeholder page.

Next navigate to Appearance/Theme Test Drive in the sidebar.

Picture 16

You want to select the theme you are developing or customizing. In my case this is Thesis. If you are not using Thesis then select the theme you are working with, or customizing.

Sixth Step—Setup the ‘real’ homepage

Create a new page in WordPress. This new page should be the real homepage that you are going to use in your design and development process. This page will be the homepage once the website is “live.” Be sure to take note of the permalink you give the page so that you can go back to you placeholder page and insert the link to this page from your placeholder page. This will allow you to easily get to the real homepage when you are developing the new website.

homepage-permalink

Why can’t the public get to your real homepage?

People may only be able to access the placeholder page with the homepage link if you are signed into WordPress in the admin role (which you can setup when you setup the Theme Test Drive setup). You may set whatever level of access that you desire. The key is being logged into WordPress admin area. If you are not logged in, cookies are not set, and you get the “coming soon/under construction/under development” page. If you are logged in you get the placeholder page with the link set to the real homepage (remember that permalink I mentioned previously).

Seventh Step—Edit your placeholder page

Return to edit your placeholder page you created in the Third step. When the content of this page is editable you want to change the target link of the “click here” text to the permalink you have from the previous step. Highlight the link and click the link icon from the toolbar to then paste in your permalink. Be sure to click the “Update Page” blue button on the right.

Eighth Step—Taking a peek to see what you got

You should now be able to look at the homepage of your website and ‘see’ if you are looking at your “coming soon/under construction/under development” page. And you should be able to see the placeholder page as well. You need to know the following distinction:

  • If you are signed into the admin area of WordPress and use that browser to look at the site you will see placeholder page.
  • If you use a browser that is free and clear of the WordPress admin area then you will see the “coming soon/under construction/under development” page

The trick is this.

  1. In a separate web browser tab, while logged into WordPress, go to the URL of the website in development.
  2. You will see the ‘placeholder’ page.
  3. Then return to the WordPress admin area and click ‘logout’ in the upper right corner.
  4. Now return to the tab containing the development website and click refresh.
  5. Voila! you now see the “under development/construction/coming soon” page.

Ninth Step—(When the time comes) Switching to the live website

At some point your website is going to be ready for primetime and you will want to make it “live.” To achieve that do the following

  • Go to the Settings/Reading in admin
  • Then from the pull-down menu next to “Front Page” change it from placeholder page to your home page
  • Go to Plugins and deactivate Theme Test Drive
  • Go to Appearance/Themes and make sure the proper theme is selected
  • You should now visit http://www.yourwebsite.com and see your finished work

Wrap Up

This should do the trick.  As always I hope this tutorial is of benefit and let me know if you have any questions or comments. Always know that others may not understand what I believe to have explained clearly. Also, if you have an alternative take on a step or process I welcome your input.

Hope this helps.

UPDATE: July 7, 2009

Laurie recently posted a comment below about a plugin called Maintenance Mode. For those of you developing inside the Thesis world using this plugin is the way to go. In particular the ability to select “custom template” from the page template menu is key. With my tutorial outlined above it is a workable solution in Thesis but requires some additional hoop-jumping if you are using custom page templates and custom sidebars (as I typically do). See Laurie’s comment below to get Maintenance Mode going. Hope this helps.

Do you need help with your website?

If you are a web designer or web developer needing help, or a 'do-it-yourselfer' looking for a professional Internet presence I can help. If you need help with a specific WordPress issue or a complete website, I offer consultation, complete web design, and web development services. Get in touch and we can talk about your needs and start the process.

, , , , , , , ,

Do you need a WordPress consultant? Someone with experience?

I specialize in making WordPress work for people.

If you need help with a specific WordPress issue, I offer consultation, complete web design, and web development services.

Get in touch and we can talk about your needs and start the process.