As any developers that have used WordPress for a website rebuild know, switching the domain name for the WordPress website and then updating the domains DNS to point to the new site is a clunky process but there is simple solution (jump to it here) to test the live domain name against a WordPress installation without actually updating its DNS (actually it works for any website).
Image Path Issues
Often, despite your best efforts, themes use the full path including domain name (FQDN) to reference images in the HTML, for example: http://dev.acme.com/wp-content/uploads/logo.gif Instead of /wp-content/uploads/logo.gif Obviously this means if your hosting doesn’t support multiple domains or domain aliases, as soon as you switch in the new domain name some images break.
Timing
If your web host only supports one domain name then you need to change the domain name to your ‘live’ one then make the changes to the domain names DNS and wait, effectively being locked out until the changes complete.
The Solution: Your Hosts File
The hosts file is a simple text file on Windows computers that overrides DNS lookups (the process of turning a domain name in to an IP address) – we use that to trick our laptop and the remote server effectively.
How Does it Work?
When you type in a web address, a DNS lookup takes place and it gets translated in to an IP address – this IP address is unique and so enables our browser to find the server.
When the browser connects, it doesn’t just say “I’m here for a website”, rather it says “I’m here for the website for acme.com”.
Typically the only way to get acme.com pointing at a server to test a website on it properly using that domain is to reconfigure the domain – the problem is if there is a problem with the site, you’ve got to wait for the domain to switch back, DNS propegation, etc.
Instead we override the DNS lookup, convincing our laptop that the domain name acme.com should actually point to a different IP address to the one being given to the rest of the world.
Our laptop rocks up at our dev server and says “I’m here for the website for acme.com” and is given the appropriate data, despite the acme.com live website and domain name remaining untouched for the rest of the world.
How Do I Do It?
The path to the Hosts file in Windows 7 & Windows 8 is c:\windows\system32\drivers\etc\ but you will only be able to see it if you have set Windows to Show Hidden Files and Folders, if you have you can jump straight to the Editing the Host file.
To show hidden folders on Windows 7
Press the ALT key while in Windows Explorer (‘My Computer’ is a Windows Explorer window) to bring up the File menu- Click on Tools and then Folder Options
- Click the View tab
- Scroll down to the Hidden Files and folders option and ensure that Show hidden files, folders and drives is selected
- I also recommend disabling Hide extensions for known file types (by ensuring that option is unticked) as this makes it clear exactly what you’re dealing with when it comes to filenames.
To show hidden folders on Windows 8
- If you need to see system and hidden files in Windows 8, then please follow these steps:
- From the Windows 8 Start Screen, click the search icon and search for ‘Control Panel’ and click the result.
- When the Control Panel opens you will see a screen similar to Figure 1 below.
- Click on Appearance and Personalisation:
- Click on Show hidden files and folders
- I also recommend disabling Hide extensions for known file types (by ensuring that option is unticked) as this makes it clear exactly what you’re dealing with when it comes to filenames.
Editing the Host File
- Browse to the folder containing the hosts file (c:\windows\system32\drivers\etc\)
- Right click the file hosts, right click and select Send To > Documents (this sends a copy of the hosts file to your My Documents folder so we can edit it)
- Browse to your my documents and double click the file hosts
- When you’re asked, open it with Notepad (or a text editor of your choice)
You will probably be presented with something like this:
# Copyright (c) 1993-2009 Microsoft Corp. # # This is a sample HOSTS file used by Microsoft TCP/IP for Windows. # # This file contains the mappings of IP addresses to host names. Each # entry should be kept on an individual line. The IP address should # be placed in the first column followed by the corresponding host name. # The IP address and the host name should be separated by at least one # space. # # Additionally, comments (such as these) may be inserted on individual # lines or following the machine name denoted by a '#' symbol. # # For example: # # 102.54.94.97 rhino.acme.com # source server # 38.25.63.10 x.acme.com # x client host # localhost name resolution is handled within DNS itself. # 127.0.0.1 localhost # ::1 localhost
Now to ‘trick’ the remote webserver, we first need to trick our computer, we do this by determining the IP address of the webserver where our WordPress site is in development – if you don’t know, open a Command Prompt and type:
ping dev.yourDomain.com
The result will contain the IP address of the web server.
Now add the IP address to a new line in your hosts file followed by the domain name that you want to be able to view the website using (before you make any changes to the domains DNS – the whole idea of this), for example:
98.123.34.176 www.northumberlandwebdesign.com
Save the new hosts file and copy it to the location of your original hosts file (c:\windows\system32\drivers\etc\) overwriting the original one.
That’s it! No need to reboot – if you type in ‘www.northumberlandwebdesign.com’ in to a browser, that request will be sent to 98.123.34.176 and the web server there will respond appropriately if its configured for that domain, all the while the actual domain name is still pointing at its original host.
