Setting Up A Wordpress Dev Site

Details
Written by: J Grant Forrest
Category: Guides
Hits: 5318
Tweet
Share

 

A recurring bugbear of mine is the challenge of doing a new Wordpress installation or developing a new Wordpress site without having it 'Live' from the start.

"Easy!" you say, "just install it in a sub-folder or sub-domain" e.g. https://somesite.com/wp_dev

This is perfectly acceptable. You have a small index.php holding page in the root, and your dev WP site in the sub-folder for your client to peruse while you're building it.

The trouble  starts when you decide to "go live". If you decide to keep your dev site where it is, and just point/link or redirect to it from the root, fine - no problem.

Even if you decide to rename your WP folder "wp" as opposed to "wp_dev", that's easy too.

But what if you want to move your WP site up to the root and make it live? Well you can do that easily enough, but you need to take care not to break any links in your carefully-crafted WP templates. The more complex your site, the more likely it is to have hard-coded links to the /wp_dev folder that you need to find and change.

Normally, you'd also need to update your .htaccess file and your user.ini (if you have one), especially if you have the Wordfence Firewall plugin. You may also find that your Permalinks break and have to be re-saved.

So in summary, a bit of a faff. Surely there's an easier way?

I read a couple of articles with advice on how to rename your Wordpress index.php file. Assuming you can do this, it opens the door for you to build your WP site in the root folder whilst temporarily holding traffic to https://somesite.com at index.php. When you're ready to go live, just change everything back to the normal WP settings.

Here's my cheat-sheet for doing this:

  1. Install WP in the normal fashion including plugins etc

  2. In the site root, rename index.php to dev.php

  3. In the WP Dashboard > Settings, change the Site Address (URL) to https://somesite.com/dev.php

  4. Add this to the top of .htaccess:


<IfModule mod_dir.c>

DirectoryIndex index.php dev.php

</IfModule>

 

  1. In .htaccess, change all the references to index.php to dev.php:

 # BEGIN WordPress

# The directives (lines) between "BEGIN WordPress" and "END WordPress" are

# dynamically generated, and should only be modified via WordPress filters.

# Any changes to the directives between these markers will be overwritten.

<IfModule mod_rewrite.c>

RewriteEngine On

RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

RewriteBase /

RewriteRule ^dev\.php$ - [L]

RewriteCond %{REQUEST_FILENAME} !-f

RewriteCond %{REQUEST_FILENAME} !-d

RewriteRule . /dev.php [L]

</IfModule>

 

6. Replace index.php with this:

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

    </head>

    <body>

        <h1>Dev Site</h1>

        <p>This is the <strong>index.php</strong> landing page</p>

        <p><a href="https://somesite.com/dev.php">Go to the WP Dev site</a></p>

    </body>

</html>

 7.  Change the permission of .htaccess to 0444 (read-only) to prevent it from being over-written by WP updates. The best way to do this is using the cPanel File Manager tool, assuming you use cPanel.

 

How to make a dev site live

 

  1. Rename dev.php to index.php

  2. Change the file permissions of .htaccess to 0644 (owner read/write)

  3. Remove the DirectoryIndex lines from .htaccess

  4. Change dev.php to index.php in .htaccess

  5. Delete dev.php

  6. Change the Site Address (URL) in the WP dashboard to remove the /dev.php

It's arguable whether this is more or less complicated than the problem it's trying to solve, but it seems intuitively 'cleaner' than having to change a load of URLs that you didn't realise were hard-coded in your template.