a da dads

How To Set Up A WordPress “Under Construction” Environment V. 2.0

Given the amount of emails I’ve gotten about my previous post; How to set up a WordPress “Under Construction” environment I’ve decided to polish the script a little bit and make it easier to install and use.

If you’d like to know how the script works check out my previous post. Then you can implement the solution in this post.

First of all, install WordPress where it will be once the site goes public. Verify that the wordpress installation is working correctly and then proceed to rename the index.php file to index_wp.php.

Then create a new file on that same root folder. Name it index.php and paste the following code in.


if (isset($_POST['uc']) && $_POST['clientKey'] == '123456'){
$_SESSION['bypass_under_construction'] = true;
$_SESSION['bypass_under_construction'] = null;

//check if current session is bypassing under construction page
if (isset($_SESSION['bypass_under_construction'])){
//pull index_wp.php. This allows normal execution of your WordPress Installation
<div style="background-color:#454545;margin:0px;padding:2px;color:#FFFFFF;font-family:trebuchet ms;font-size:12px;">
You are currently bypassing your WordPress under construction page. - 
<a href="index.php?stop=true" style="color:#FFFFFF;">Log Out</a>
<div onclick="ucShowForm();" style="background-color:#454545;margin:0px;padding:0px;color:#FFFFFF;font-family:trebuchet ms;font-size:12px;">
<a href="#" style="color:#FFFFFF;" id="ucShowFormLink" onclick="ucShowForm();" >&nbsp;&nbsp;*</a>
<form method="POST" action="index.php" id="clientLoginForm" style="display:none;margin:3px;padding:3px;">
<input type="hidden" name="uc" value="true" />
<label for="clientKey">Client Key:</label>
<input type="password" name="clientKey" id="clientKey" />
<input type="submit" value="Enter" />
<script type="text/javascript">
function ucShowForm(){
javascript:document.getElementById('ucShowFormLink').style.display = "none";
javascript:document.getElementById('clientLoginForm').style.display = "block";

Finally create a new file on that same root folder named underconstruction.html. On this file you can create your custom under construction page.

When you try to access your blog you will get your under construction page and on the bottom you will see a dark gray bar with an “*” on the left. If you click this a form shows up where you enter an access key (see below how to change the access key) which you can give your clients to check up on the design progress and keep the site hidden from the general public.

Once logged in you will see your wordpress installation. You can work on it with out having to rename paths and files and transfer installations and databases and and and and…. When you want to unleash your site to the world just rename index.php to index2.php and index_wp.php to index.php.

How to change the access key

In the source code for this script find the line that says

if (isset($_POST['uc']) && $_POST['clientKey'] == '123456'){

And set the clientKey value to whatever you want. The default value is ‘123456’.

Hope you find it useful, let me know what you think or would like to see for this script. If enough people find it useful I can turn it into a wordpress plugin.


Posted on PHP/ Tutorials/ Wordpress

By: juancamilo.estela

Tags: , ,


29 Comments to “How to set up a WordPress “Under Construction” environment v. 2.0”

  • Cemre says...

    this is the best solution for under construction for wp! thanx

    Reply - Spoken wisely on December 9, 2010 at 10:44 pm
  • Swordphish says...

    I’m wondering if this same technique can be used while updating a site. I’m looking to keep the current design functional for the current users but secretly revamp the site. Is this possible or should I revert back to using local hosting for development?

    Reply - Digitally recorded on December 17, 2010 at 5:50 pm
    • juancamilo.estela says...

      You should try to always develop on a local environment just because it is way faster. What you can do is keep a production site ( the one visitors see ) and a staging site ( a private site where you test new changes ) on your hosting server and develop on your local machine. This script can be used like that but needs a little more advanced tweaking. Instead of including the “under construction” page, you can include the index of your staging site. I am currently working on a plugin that will handle all these cases and eventually push all the changes in the staging site to the production site.
      Hope this helps!

      Reply - Proudly said on January 6, 2011 at 5:24 am
  • JimmyB says...

    Thanks for this great script!
    Unfortunately I tried it with WP latest v3.1 and I get error messages:
    Warning: session_start() [function.session-start]: Cannot send session cookie – headers already sent by (output started at /home/content/xx/xx/html/index.php:1) in /home/content/xx/xx/html/index.php on line 2
    Any idea ?


    Reply - Digitally recorded on March 24, 2011 at 1:51 am
    • juancamilo.estela says...

      Hey Jimmy,
      The index.php file should be the first file loaded when someone enters your site. Therefore, the line “session_start();” should be the first line to be executed. The only reason to get this error is if the browser has received information before executing this line. My guess is you have white space before the “<?php" in your index file. Try erasing it and let us know if it works. You could also replace the "session_start();" to "if (!session_id()){ session_start(); }" This will avoid setting the session if perhaps you have other scripts with session usage before this script.

      Reply - Digitally recorded on March 24, 2011 at 2:25 am
      • JimmyB says...

        THANK YOU very much Juan for your help and sorry for the delay.

        Well, it still does not work whatever I do but I guess I might have the answer.
        As I had already several html pages online and wanted to work in between on my WP site, I created a “index.html” page and this might be the reason why I cannot have at the same time a “index.php” page.
        I thought I could work on WP site while people had still access to a few (html) pages informing them of what’s going on…
        I even tried to replace the underconstruction.html by my index.html but it did not work. Might be a conflict between index.html and index.php (?)
        Don’t know what to do now :-(
        THANK’S for your time!

        - Proudly said on April 2, 2011 at 1:58 am
  • Gideon says...

    Thanks! I work on a lot of wordpress sites for work, and this is a great fix for the hour or so it takes to get everything working on migrations or updates.

    Reply - Digitally recorded on March 25, 2011 at 2:54 pm
  • roberto says...
    Reply - Digitally recorded on April 4, 2011 at 12:31 am
  • Steve says...

    Thanks. This is a great solution to an ongoing problem of having to keep an original website up and running and being able to deploy and work on a wordpress site. Nice job.

    Reply - Proudly said on April 6, 2011 at 3:34 pm
  • Traci says...

    Fantastic! Love this! thank you

    Reply - Screamed on May 5, 2011 at 4:10 pm
  • James says...

    Absolutely phenomenal tutorial. Worked perfectly first time round. Thank you so much!

    Reply - Digitally recorded on September 20, 2011 at 9:49 am
  • James says...

    However there is one issue- how can I view my other pages other than my wordpress home page? For example, when I click “view this page” for my contact page via the wordpress dashboard, it loads the home page instead of the contact page. I’ve also tried copy and pasting the page url into my browser and it still takes me to the home page. How can I fix this?

    Reply - Digitally recorded on September 29, 2011 at 10:18 am
  • James says...

    Never mind, I figured it out- I named the construction page index.html instead of underconsturction.html hence why I was reverting to the splash page after I clicked a link.

    Reply - Proudly said on October 1, 2011 at 12:00 am
  • Steven Brady says...

    Works great. I took this out of the previous version of the code and added it in so that the old method of sending with the URL would also work. Makes it super easy to send the URL to a client to review the site changes. I’d certainly recommend you add this back in for version 2.1.


    (isset($_GET[‘uc’]) && $_GET[‘pwd’] == ‘123456’){
    $_SESSION[‘bypass_under_construction’] = true;

    Reply - Digitally recorded on October 11, 2011 at 7:13 pm
  • Brett says...

    Awesome solution! Simple and sophisticated enough to really be useful! Used it today. Thanks for sharing!

    Reply - Whispered on December 14, 2011 at 8:01 pm
  • mire says...

    Tnx m8, u help me alot

    Reply - Whispered on December 23, 2011 at 12:42 pm
  • moneypenny says...

    Ahhhhhhhh!!!!!! To good/easy to be true. You made me act crazy in front of my screen. THX!!!!;)

    Reply - Spoken wisely on January 16, 2012 at 6:24 pm
  • bmanke says...

    Just what I needed and worked like a charm. Thanks!

    Reply - Screamed on February 14, 2012 at 3:18 am
  • Oscar says...

    Best Tutorial Ever!

    Reply - Digitally recorded on February 15, 2012 at 4:20 pm
  • Phil says...

    This is fantastic. Thank you very much, I have adapted this for a client. Good work!

    Reply - Whispered on February 23, 2012 at 1:50 pm
  • Ann-Marie Stillion says...

    Hi Juan, Your solution is elegant. Got it installed on two sites I am working on right now. I was wondering if there is a way to work on the design of the title page (which gets tied up with the under construction).

    Reply - Proudly said on February 27, 2012 at 12:48 am
  • Anna says...

    Thanks a lot!

    Reply - Proudly said on March 8, 2012 at 2:56 pm
  • Iwan says...

    Such a Great Solution! Thank you :)

    Reply - Spoken wisely on March 8, 2012 at 6:49 pm
  • Adam says...

    This is brilliant, thank you very much!

    Reply - Digitally recorded on March 29, 2012 at 1:57 pm
  • @Josh — I became looking to give back some text
    however can’t believe that it is on your own web page.
    Is it possible to make sure you get in touch?

    Reply - Proudly said on October 15, 2012 at 4:04 pm
  • Marg says...

    Thank you I got this working on my client’s site. However, I can only get it work with a blank page and client login. In order to customize the underconstruction.html page I am not sure how I can insert an image with client logo and contact details. I tried to place a jpeg file straight into the root folder but it did not work and the sites home page appeared on screen. What should I do to customize the page?

    Reply - Proudly said on October 17, 2012 at 12:27 pm
  • Marg says...

    I managed to customize the underconstruction.html page. I just checked and changed the reference to the jpeg file on the root folder!

    Reply - Screamed on October 17, 2012 at 12:42 pm
  • Remarkable issues here. I am very satisfied to see
    your article. Thanks so much and I am having a look ahead to touch you.
    Will you kindly drop me a mail?

    Reply - Digitally recorded on October 18, 2012 at 4:16 pm

Leave your Reply to Iwan

Click here to cancel reply.