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.
<?php
session_start();
if (isset($_POST['uc']) && $_POST['clientKey'] == '123456'){
$_SESSION['bypass_under_construction'] = true;
}elseif(isset($_GET['stop'])){
$_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
include('index_wp.php');
?>
<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>
<?php
}else{
include('underconstruction.html');
?>
<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();" > *</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" />
</form>
<script type="text/javascript">
function ucShowForm(){
javascript:document.getElementById('ucShowFormLink').style.display = "none";
javascript:document.getElementById('clientLoginForm').style.display = "block";
}
</script>
</div>
<?php
}
?>
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: PHP, Web Design & Programming, Wordpress
this is the best solution for under construction for wp! thanx
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?
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!
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 ?
THANKS!!!
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.
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!
Jimmy
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.
Your answer might be here: https://stackoverflow.com/questions/4729513/how-to-develop-a-wordpress-site-in-the-root-while-a-static-site-exists
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.
Fantastic! Love this! thank you
Absolutely phenomenal tutorial. Worked perfectly first time round. Thank you so much!
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?
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.
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.
Thanks!
(isset($_GET[‘uc’]) && $_GET[‘pwd’] == ‘123456’){
$_SESSION[‘bypass_under_construction’] = true;
}
Awesome solution! Simple and sophisticated enough to really be useful! Used it today. Thanks for sharing!
Tnx m8, u help me alot
Ahhhhhhhh!!!!!! To good/easy to be true. You made me act crazy in front of my screen. THX!!!!;)
Just what I needed and worked like a charm. Thanks!
Best Tutorial Ever!
This is fantastic. Thank you very much, I have adapted this for a client. Good work!
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).
Thanks a lot!
Such a Great Solution! Thank you
This is brilliant, thank you very much!
@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?
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?
I managed to customize the underconstruction.html page. I just checked and changed the reference to the jpeg file on the root folder!
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?