How to preview a WordPress website in Plesk without switching DNS

| Articles |

plesk panel article header

 

It is very common, particularly when redesigning a website for a client, for a new website not to have a domain name assigned to it while it is being developed.
Particularly when the new website is being developed with WordPress in Plesk, this creates problems when previewing the website.
What is often proposed is to change the “hosts” file in one’s computer so that the ip of the new website points to the domain name used for the existing website. However, this method poses two problems:

  1. The most serious problem is that this solution works only on the device it is implemented on. This means that your client (or anyone else, for that matter) won’t be able preview the website unless they go through with changing the hosts file on their computer – or any device they want to view the website from.
  2. Once you’ve changed your hosts file, you won’t be able to view the existing website any more. This means that you can’t access the text or images, and you need to switch back and forth (by updating the hosts file) every time you need to check or obtain any type of content or information from the existing website.

 

We will discuss two ways of making the website “previewable” by anyone. For both, you will need access to the Plesk panel:

 

  1. Go to your Plesk panel, and navigate to “Add new domain name”. Add the domain name your website will eventually use (we have used “example.com” for demonstration purposes). Press OK, ignoring any warning signs from Plesk.add new domain in plesk
  2. Install WordPress, either manually or by going to the “Install Apps” option under your new website’s option list.install wordpress in plesk
  3. In the website’s options lists, press “Preview”. This will show you a basic preview of the website, which, however, doesn’t function correctly – hence all the trouble we have to go into.Preview wordpress website
  4. The only thing we need from here is the url. Copy this test url so you can use it shortly.plesk test url
    The address will look something like this:

    example.com.[ip-address].[server].com
    e.g.
    example.com.123-45-234-12.blserver234.com

 

From here on there are two ways we can proceed in:

A. Change the Database

If you feel comfortable working with databases, there is a straightforward way of going about this:

  1. In your Plesk panel, go to the website’s database.  plesk-database-menu
  2. Navigate to the options table.
  3. Paste the url you copied previously to the two fields “siteurl” and “home“:
    Change wordpress table options in database.

You – and everyone else on the internet – will now be able to view the website on that address.

When the website is ready to go live, you will need to go back to the database and change those fields back to the domain name you plan on using.

CAVEAT:
Sometimes, when switching back, there might be other fields in the database which have retained the test url. If this is the case, you’ll need to run this excellent free tool to properly rename everything:

https://interconnectit.com/products/search-and-replace-for-wordpress-databases/

B. Through the WordPress admin panel

Here, you will need to temporarily change you hosts file, so you can gain access to your WordPress admin panel.

  1. Locate the HOSTS file on your computer. It is usually located in:
     C:\windows\system32\drivers\etc\hosts
  2. Open the file using your text editor in “Run as Administrator” mode – otherwise you may be unable to save your changes.
  3. You will add two lines of code here. Each will have the ip address the website is in, followed by the domain name, once without www., and once with.
    hosts file in computer
    The two lines in the hosts file will look something like this:

     185.2.132.22 example.com
     185.2.132.22 www.example.com

    You can find the ip address inside Plesk in the website options.
    ip address in Plesk

  4. Save your file and wait for a few minutes for them to take action.
  5. Now, when you navigate to www.example.com, your new website will display in your browser.
  6. Log into the WordPress admin panel (www.example.com/wp-admin).
  7. Go to Settings > General.
  8. Change both the WordPress Address (URL) and Site Address (URL) to the test url and save.
    Change wordpress url settings
  9. Go back to the hosts file and comment out the two lines you entered earlier:
     # 185.2.132.22 example.com
     # 185.2.132.22 www.example.com


    This will make them inactive, so by going to www.example.com, you will once again be directed to the old website.

 

Your new website will be accessible through the preview url. In our example:

http://example.com.123-45-234-12.blserver234.com

When the website is ready to go live, you will need to go to Settings > General again, and switch back to the url you intend to use (in our case “http://example.com”).
You can check that everything is working correctly by once again temporarily making the two lines of code in the hosts file “active” by removing the # sign. Once you’re ready, simply remove the extra code from you hosts file and continue to make the DNS changes.


Leave a Reply