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.

  • Pingback: Posts about plugins as of July 1, 2009 | All About WordPress()

  • Huge help. Looking for this exact solution. Thanks!

  • Joseph France

    Huge help. Looking for this exact solution. Thanks!

  • Pingback: links for 2009-07-02()

  • Jp

    Awesome. And might I add, it’s completely ridiculous that you just posted this days before I needed to find it. OK, I get that’s the nature of chance, but still, it’s ridiculous. Thank you!

  • Jp

    Awesome. And might I add, it’s completely ridiculous that you just posted this days before I needed to find it. OK, I get that’s the nature of chance, but still, it’s ridiculous. Thank you!

  • I use the Maintenance Mode Plugin, which is a simple activate/deactivate on the plugin page in your settings… no other steps required. It will automatically put up a generic – down for maintenance – page, or you can do a 503 redirect to a custom page of your choice. Anyone who is logged in will still have full access to all of your other pages for theme testing, which I agree is a huge help when you’re not ready to go live but your client still needs to see things.

    The plugin is available here:
    http://wordpress.org/extend/plugins/maintenance-mode/

    • Hi Laurie,
      Brilliant! What a great suggestion. This helps with regard to developing custom page templates in Thesis.
      When using custom templates in Thesis its necessary to have “custom template” selected in the page settings dialogue. Well if you are using the default theme this is not an option and for Thesis developers (like me) a slight headache. I have been trying to dev custom sidebars for a client project right now and the solution I present here, while it DOES work, still requires some hoop jumping not for the faint of heart.
      The maintenance mode plugin is a great addition to the toolkit.
      Thanks for sharing!
      Cheers,
      Berchman

  • I use the Maintenance Mode Plugin, which is a simple activate/deactivate on the plugin page in your settings… no other steps required. It will automatically put up a generic – down for maintenance – page, or you can do a 503 redirect to a custom page of your choice. Anyone who is logged in will still have full access to all of your other pages for theme testing, which I agree is a huge help when you’re not ready to go live but your client still needs to see things.

    The plugin is available here:
    http://wordpress.org/extend/plugins/maintenance-mode/

    • Hi Laurie,
      Brilliant! What a great suggestion. This helps with regard to developing custom page templates in Thesis.
      When using custom templates in Thesis its necessary to have “custom template” selected in the page settings dialogue. Well if you are using the default theme this is not an option and for Thesis developers (like me) a slight headache. I have been trying to dev custom sidebars for a client project right now and the solution I present here, while it DOES work, still requires some hoop jumping not for the faint of heart.
      The maintenance mode plugin is a great addition to the toolkit.
      Thanks for sharing!
      Cheers,
      Berchman

  • Hey Berchman, nice tutorial, very useful, and couldnt agree more. I particularly like “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.” ME TOO!

  • Hey Berchman, nice tutorial, very useful, and couldnt agree more. I particularly like “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.” ME TOO!

  • Pingback: WordPress/Thesis Tutorial: Custom ‘Coming Soon’ Page — berchman.com()

  • Bo

    This rocks! Job well done, sir, job well done.

  • Bo

    This rocks! Job well done, sir, job well done.

  • Opal

    Great tutorial! Duh question: What is your recommended way of including CSS within an HTML file to later convert to a PHP?

  • Opal

    Great tutorial! Duh question: What is your recommended way of including CSS within an HTML file to later convert to a PHP?

  • I would include it inline inside the HTML file. Hope this helps.

  • I would include it inline inside the HTML file. Hope this helps.

  • lisa

    Laurie's solution/plugin seems as if it should/would be the easier solution for me, as I'm still very much in “learning mode.”

    But it seems I'm even more of a novice than I realized, because I can't figure out how to make the 503 page work, or maybe I'm just not putting it in the right place. I've been googling all night, but googling “503 error page” is an exercise in frustration, lol.

  • lisa

    Laurie's solution/plugin seems as if it should/would be the easier solution for me, as I'm still very much in “learning mode.”

    But it seems I'm even more of a novice than I realized, because I can't figure out how to make the 503 page work, or maybe I'm just not putting it in the right place. I've been googling all night, but googling “503 error page” is an exercise in frustration, lol.

  • lisa

    Laurie's solution/plugin seems as if it should/would be the easier solution for me, as I'm still very much in “learning mode.”

    But it seems I'm even more of a novice than I realized, because I can't figure out how to make the 503 page work, or maybe I'm just not putting it in the right place. I've been googling all night, but googling “503 error page” is an exercise in frustration, lol.

  • I upgraded to Thesis 1.6 on my test site and I no longer have the option to select a custom template under the attributes section – anyone else having this problem?

  • I upgraded to Thesis 1.6 on my test site and I no longer have the option to select a custom template under the attributes section – anyone else having this problem?

  • In case anyone else has this problem the solution was to enable a different theme and then re-enable Thesis.

  • In case anyone else has this problem the solution was to enable a different theme and then re-enable Thesis.

  • Hello Berchman 🙂
    I would like to tell about one more wordpress plugin from which you can create and customize the coming soon page on the homepage of your blog.
    Have a look
    http://tech18.com/how-to-create-customized-comi

  • Hello Berchman 🙂
    I would like to tell about one more wordpress plugin from which you can create and customize the coming soon page on the homepage of your blog.
    Have a look
    http://tech18.com/how-to-create-customized-comi

  • Pingback: 250+ Thesis Theme Resources | Sahil Kotak dot Com()

  • I use the Maintenance Mode Plugin, which is a simple activate/deactivate on the plugin page in your settings… no other steps required. It will automatically put up a generic – down for maintenance – page, or you can do a 503 redirect to a custom page of your choice. Anyone who is logged in will still have full access to all of your other pages for theme testing, which I agree is a huge help when you're not ready to go live but your client still needs to see things.

  • 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,

  • 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,

  • Pingback: 47 Customizations for the Thesis Theme()

  • Sam

    Hello berchman, thanks for this solution. Really practical and useful!

    One thing I'm still worried about: would the pages of the site that is being developed show up in Google searches?

    I'm a little hesitant to use it until then 🙂

    Thanks in advance,
    Sam

    • jp

      I am also concerned about google/bing indexes of pages under construction that are already out there.  Is there anything you can do for these issues. is there a simply way to password protect the site until it is ready!

  • Thank you so much for this info! Will help quite a bit in the upcoming future.

  • Pingback: Wordpress Coding?()

  • Pingback: How To Customize Thesis Theme for WordPress – A List Of Complete Guide | Bridging IT Gaps()

  • Anonymous

    Good tutorial for folks that want to stick with wordpress. However, if someone wants an on demand solution they could also try outhttp://www.kickofflabs.com/. We make it really easy for someone to have a viral launch landing page up in 60 seconds. We also allow for custom colors and 100% customizable CSS if someone does want a more unique design than our OOTB themes offer. Check it out! Thanks, Josh LedgardFounder KickoffLabs

  • Pingback: WordPress/Thesis Tutorial: Custom ‘Coming Soon’ Page — berchman.com » Web Design()

  • Pingback: The Huge Thesis Compilation| Skins , Resources , Tutorials()