Why do you need a preview for your WordPress site?

If you are a WordPress web designer, you have had surely experienced a situation where you had to keep your new site on a temporary link before making it live. You may want, for example, to send a sneak peek to the client for design validation or you can’t switch the domain DNS records as you are just prospecting for new customers. If your end-user’s old site is very active, you may also want to publish a temporary preview until everything is ready. In any case there are a plenty of solution for previewing your WordPress site.

The easiest solution: Using No DNS I/O

The NoDns I/O website preview allows you to generate a live version of any website under your chosen domain name. It requires neither Domain Name Server setting nor DNS propagation. You simply need to provide the domain you want to emulate and the IP of your development server to get your preview live.
More than a domain name emulator, the NoDns I/O platform is smart enough to deal with advanced CMS like the WordPress. Not only it fetches faithfully your source site contents but also it can handle your site resources such as images, CSS files and scripts.

Thanks to the builtin Search And Replace tool, the NoDnsio platform can also dynamically replace your source site contents with custom contents. You can for example entirely rebrand a prototype website by replacing image link and changing some text on the go.

On NoDns I/O, preview sites are published under a meaningful root domain such as clientdomain.previewmy.work or clientdomain.sneakpeek.design. Some short domain names like clientdomain.li0.xyz and clientdomain.wp0.xyz ( li stands for link and wp stands for WordPress) are also provided for the designer wishing to highlight client’s brand in the preview link. Web agencies wishing to publish clients’ websites under own domain such as clientdomain.youragencyname.com can also order the NoDns I/O white label solution.

NoDNS I/O is for website preview only, you cannot use the platform to install, edit or to administrate your WordPress site.  If you want to edit your site, you will firstly need to login directly by using the Hosts File trick as detailed below.

The NoDNS I/O tool is available for free whichever your business status: personal user, freelancer or corporate.

The hard way: editing the hosts file

The hosts file is a local file used by your operating system to custom map domain names (or hostnames)  to IP addresses. For example, if your web server IP is 123.45.678.910, you can map the domain www.example.com to your server by adding the line 199.11.131.110 www.example.com to your computer hosts file.

Editing host file on Windows.

1. Open your computer and open the folder C:\Windows\System32\drivers\etc.
2. Open the file named hosts by using the notepad or the text editor
3. Add the line 123.45.678.910 www.yourwebsite.com (replace the IP with your own server address)
4. Save the file and restart your browser
5. You can now reach your website whatever the DNS status for the domain

Editing host file on Mac

1. Open the terminal by going to Applications > Utilities > Terminal
2. Open the the hosts file by typing $ sudo nano /private/etc/hosts on the terminal
3. Go to the end of the line by using the arrow keys and append the line 123.45.678.910 www.example.com
4. Press control-o to save the file and exit.

Using a temporary domain

Assume you have installed your WordPress site on the domain example.com by using the hosts file trick and you want now to make it visible to your client. The solution is publishing the site on a temporary domain/sub-domain by changing the WordPress configuration file.

1. Go to your WordPress admin panel
2. Click on Settings > General.
3. Replace the content of the fields WordPress Address and Site Address with the temporary domain or sub-domain you want to use
4. Save changes.
5. Go to Settings > Permalinks
6. Select your chosen permalink type and save
7. Get your new homepage link and share

In case if some of your site resources are broken (eg. missing images, missing style), you can use the Search and Replace plugin to ensure that all links, including absolute paths, are properly changed.

When your are ready to publish, make you site live by reverting the domain name to the initial value (Repeat the steps above) and switch the DNS records.

Important: Playing with the  database may lead to unexpected results, especially if your themes or plugins use hard coded links or serialized data. We recommend using the Temporary Domain solution only if the No DNS I/O solution doesn’t work for you.

Using Screenshots

If your concern is about colors and layout only, you may find easier to directly use screenshots as preview tools. For that you can send your images in the old way by email or use a website screenshot presenter like webdesignpresenter.com

Summary

Last words

Use the hosts file trick to install and edit your WordPress website and use NoDns I/O to share the preview to clients.