Restore WordPress from localhost to an online web server

Restore WordPress from localhost to an online web serverWe already explained how to manually backup a live WordPress website to your localhost environment.

However, there might be situations where you want to do the exact opposite thing.

 

 

 

 

1. What do we want to achieve?

You have been working very hard on your local WordPress website, and now the time has come you finally want to migrate your entire website to an online environment. Although being a bit trickier, we try to guide you step by step through the entire process.

So these are the things we’d like to do:

  • First we install WordPress on our local development machine and get this to work in only three steps. (You can use WampServer or XAMPP for this.)
  • We now have a working website that has been developed on our own computer.
  • This local website has to be restored to an online server, so people can visit our website through our own domain name like for instance https://cool-tricks.net

 

2. Create a local database

  • Create a database through your local phpMyAdmin
  • In this guide, we’ll use wordpress as the name for our database

 

3. Download WordPress

 

4. Install WordPress to your local environment

In case you want to know, we used WampServer as our local development environment. But of course you can also use XAAMP, Zend Server, or something else.

  • Unzip the file wordpress-latest-verson.zip in your WampServer www folder. We now have a folder wordpress in our root web folder
  • Navigate to this website through http://localhost/wordpress
  • Click Create a Configuration File
  • Click Let’s go!
  • Adapt the form you now see, so we can make a connection to our local MySQL database server
    • Database Name: wordpress (see step 1)
    • User Name: local_MySQL_username
    • Password: local_MySQL_password
    • Database Host: localhost
    • Table Prefix: wp_
  • Click Submit
  • Now, the file wp-config.php will be generated in your local web server folder wordpress
  • Click Run the install
    • Site Title: name_of_your_website
    • Username: name_to_login_to_the_backend_of_your_wordpress_website
    • Password: password_to_login_to_the_backend_of_your_wordpress_website
    • Your E-mail: info@somemail.com
    • Privacy: only uncheck if you don’t want your future website to show up in the search engines
  • Click Install WordPress
  • Now, your local database wordpress will be populated with the necessary tables

 

5. Install BackUpWordPress

The easiest way to backup both your database and files, is to use a plugin called BackUpWordPress. (As of this writing, the version is 2.0.1).

  • Log in to your WordPress website at http://localhost/wordpress/wp-admin
  • Navigate to Plugins > Add New
  • In the Search box, type backupwordpress and click Search Plugins
  • Click Install Now
  • Click Activate Plugin

 

6. Backup your local database and files

  • Navigate to Tools > Backups > Run Now. (Just stick with the default settings.) After about a minute (for a website around 20 MB) a new record will appear on your page.
  • Click Download.
  • In a live environment, you normally get a download window. However, this is not the case in a default WampServer installation. Therefore, to get the zip file you have to navigate to C:\wamp\www\wordpress\wp-content\backups and there you’ll find your backup file like this: wordpress-backup-complete-yyyy-mm-dd-hh-mm-ss.
  • Save this file to your desktop.

 

7. Unzip the file

  • On your own computer, unzip the file wordpress-backup-complete-yyyy-mm-dd-hh-mm-ss to a folder called mywebsite
    • use only small letters
    • don’t use any spaces or other special symbols into the name of this folder
  • You should now have the following file structure
    • mywebsite
      • wp-admin
      • wp-content
      • wp-includes

 

8. Upload to web server

  • You can use an ftp program like FileZilla to log in to your server
  • Navigate to the root web folder of your online hosting
  • Upload the entire folder mywebsite to the root of your server
  • You should now have the following directory structure:
    • webfolder_root\mywebsite\wp-admin
    • webfolder_root\mywebsite\wp-content

 

9. Install David Coveney’s ‘search replace db’ PHP script

We need to change some values in our database. Since WordPress uses something called serialized PHP strings, we have to be very careful.

WordPress uses the PHP function serialize, to store certain values to the database. By doing this, the database will become non-portable. This is a big issue for us, since we need to make some changes in our database. If we manually change some values, there might be a chance that we’re corrupting our data. That’s not exactly something we want to happen…

 

To overcome the data-integrity damage that may be caused by the PHP serialization, we need a safe way to edit our database. Luckily, we can use David Coveney’s search replace db PHP script.

  • Download search replace db v 2.1.0 (You can always check David’s website to see if there’s a newer version of the script available.)
  • Put the unzipped file searchreplacedb2.php in your online webfolder mywebsite

 

10. Create a new online database

  • Create a database through your online phpMyAdmin or cPanel and give this a name like for instance wordpress

 

 

11. Populate the online database

  • On the left hand side of phpMyAdmin, click on the name of the database you just created
  • Click Import > Choose file
  • In the popup that appears navigate to the local file that should be still on your desktop in the unzipped folder mywebsite\database_yourwordpressfolder.sql
  • Click Open
  • Click Start to populate your new database

 

No data was received to import

Do you receive the above error message in your phpMyAdmin panel? If so, it’s possible that your database sql file is above the default php settings of 2 MB. In order to get this to work, you have to change a PHP setting on your server. (If you don’t own your own server, ask your hosting provider to check this setting for you, or ask them to manually import the sql file. If they don’t want to help you, it might be time for you to look out for a decent hosting partner ;))

  • Navigate to the php.ini file that is on your web server. (You’ll probably gonna find a shortcut to this file, somewhere in your cPanel area.)
  • Search for:
upload_max_filesize = 2M
  • Change this to something bigger. At least, it should be a higher value than the size of you sql file.
upload_max_filesize = 8M
  • Restart your web server

 

12. Update the online database

Be aware that your online database is a one-to-one copy of your original localhost database. As a result, the online database is still referencing the original instance of your localhost website. We now have to update the online database to make sure everything is pointing to the new location. Therefore, we’ll use the ‘search replace db’ PHP script from David Coveney that we installed in step 8.

 

Step 1 of 2. Update the Uniform Resource Locator (url)

  • Navigate in your browser to the location of your website http://localhost/wordpress /searchreplacedb2.php
  • Click Submit to populate the form with the old connection values to the database
  • Adapt this form so we can make a connection to the online MySQL database server
    • Server Name: localhost (A bit tricky, but most online servers also have localhost as their server name :))
    • Database Name: wordpress (see step 9)
    • Username: online_MySQL_username
    • Password: online_MySQL_password
  • Click Submit DB details
  • Click Continue
  • Click OK
  • Search for: http://localhost/wordpress (Be aware not to use a / on the end of your url!)
  • Replace with: http://yourlivewebsite.com
  • Click Submit Search string
  • Click OK

 

Step 2 of 2. Update the physical path of the server

  • Don’t close the script yet, but click the Go Back button of your browser
  • Search for (case sensitive string): C:/wamp/www/wordpress (Notice that we used Wampserver for our localhost installation. Also, be aware not to use a / on the end of your url!)
  • Replace with: /var/www/wordpress (Check whether you’re using the correct root path for your webfolder.)
  • Click Submit Search string
  • Click OK

 

13. Adapt wp-config.php

In your online webfolder, there is a file webfolder_root\mywebsite\wp-config.php. We have to change this file, since it still has the old configuration values from our localhost WordPress.

  • Download this file to your desktop.
  • Then delete the file on your online server, since we don’t need it anymore.
  • In the the file wp-config.php that is now on your desktop, look for the following lines and change the bold values with your own.
/** The name of the database for WordPress */
define('DB_NAME', 'online_database_name_here');
/** MySQL database username */
define('DB_USER', 'online_username_here');
/** MySQL database password */
define('DB_PASSWORD', 'online_password_here');
/** MySQL hostname */
define('DB_HOST', 'localhost');
/** Database Charset to use in creating database tables. */
define('DB_CHARSET', 'utf8');
/** The Database Collate type. Don't change this if in doubt. */
define('DB_COLLATE', '');

...

define('WP_TEMP_DIR', '/path/to/webfolder/wp-content/uploads');
  • (It’s possible that the last line is not in your file. In that case, you can ignore that last line :))
  • Now save your file and use FileZilla to upload it back to your online webfolder_root\wordpress folder

 

14. Disable cache mechanisms

This might be a tricky step! If you’ve followed our guidelines so far, you should already have a working website. However, it’s possible that you’re stell getting forwarded to the original website when clicking some links. This is also the case when trying to get access to your new website backend. The culprit in this case might be some cache mechanism that is still active on your migrated site. As a result, your new WordPress instance will load the cached resources.

  • Navigate to the folder wp-content and temporary disable the file object-cache.php by renaming it
  • Also, in your /wp-content/plugins/ folder, disable any caching plugin that might interfere with our WordPress instance
  • Try refreshing your website again and check whether the urls are now displaying correctly

 

15. Cleanup

This step is very important since we are restoring a localhost to our live hosting. In a live environment, you should always delete both the database sql file we imported in step 10, and the script file we used in step 8. They will become a major security threat if you leave them on your server! Therefore, use FileZilla to delete the following files:

  • webfolder_root\yourwordpressfolder\searchreplacedb2.php
  • webfolder_root\yourwordpressfolder\database_yourwordpressfolder.sql

 

16. Web server configuration

After doing the above steps, you should be able to navigate to the homepage of your online website via http://yourdomain.com. However, as soon as you navigate to something like http://yourdomain.com/about/ you may encounter the following error:

The requested URL /yourdomain.com/about/ was not found on this server.

 

If this is the case, you probably need to activate the rewrite_module of your Apache webserver. By doing this, you’ll able to follow the permalinks that your WordPress website is generating. Normally, this should be already active in a live environment. Ask your hosting provider to have a look at this if you do get the error.

  • If you have your own server, go and have a look in the Apache settings/modules from your Apache web server. Look for something that says rewrite_module and be sure that this is activated.
  • Restart your Apache web server.

 

17. Set the correct user rights

To add a basic layer of security to our website, we’ll use FileZilla to set the correct user rights on both our web folders and files. User rights determine read, write & execute permissions and can be expressed by a three-digit number (supported by FileZilla) or a symbolic value. As a general rule, we’ll use 644 for our files and 755 for our folders.

  • Using FileZilla, log in to the root web folder of your hosting
  • Right click on the web folder you made throughout this tutorial and click File permissions…
    • Numeric value: 755
    • Recurse into subdirectories: check
    • Apply to directories only
  • Click OK
  • Now do the same once more for the file rights
    • Numeric value: 644
    • Recurse into subdirectories: check
    • Apply to files only

 

18. Activate the permalinks

  • Navigate to http://yourdomain.com/wp-admin
  • Go to Settings > Permalinks
  • Don’t do anything, just click Save Changes
  • This will activate the permalinks

 

19. Are there any missing images?

In case there are some images not showing on your online website, check and see whether special characters are used in the filename. A good tip for dealing with these problems is to always use lower case for every file you put on a server. As an example.

  • Some servers change belgië.png to belgi├½.png
  • Simply change the filename to overcome these issues

 

20. Any remaining steps?

Did I forget any steps here? If so, I’d love to hear from you!

 

 

21. Conclusion

It has become an even longer list than the previous tutorial Backup WordPress to localhost. Since most of the time, you have less freedom in a live environment, the above steps might be a bit trickier.

There are also other things you have to take into account such as proper dns settings and so on. If any doubt about this, don’t hesitate to contact your hosting provider to ask them for the correct settings. Hopefully by now, you have a working online WordPress website that you restored from your local development area.

It's only fair to share...Share on Facebook
Facebook
0Share on Google+
Google+
0Tweet about this on Twitter
Twitter
Share on LinkedIn
Linkedin

5 Comments

  1. Liton Arefin · April 26, 2013 Reply

    How to upload wordpress from localhost to online server. It’s very important to know every WordPress Developer. This is a very helpful article.

  2. Justin · July 3, 2013 Reply

    Very helpful for both posts moving to localhost and then back. One question I have is for the setting of user rights: Why 755 and 644 for numeric codes? Is that simply a quick code for selection of various permission boxes?

    • Imre · July 16, 2013 Reply

      Hi Justin

      The numeric codes 755 and 644 are shortcuts for the user rights that are being used in UNIX systems like Ubuntu. There’s also a symbolic representation. However, we used the numerical representation since that’s supported in FileZilla – the FTP client we’ve used in the tutorial.

  3. Mark Dave · August 18, 2013 Reply

    I’m having a problem in my site, when i finished uploaded my site everything was ok, and then i found out whenever i clicked in the navigation links i got redirect to my localhost and when i see it in my domain ex:(example.com/wp-admin) in PAGES section my pages has a permalinks that connected to localhost. How can i change it ?

  4. Imre · August 29, 2013 Reply

    Hi Mark

    Did you go through all the steps in the tutorial? It’s normal to get localhost redirections if you’re still in the middle of the migration. A full WordPress migration can be narrowed down to:
    1. transfer the entire web directory
    2. transfer the database
    3. restore the match between the new web directory and the new database

    It seems you’re having problems with the third bullet, as your WordPress database is still referencing the original website. You should focus on how to update the new database, which is explained in step 12. Once, I noticed I had to trigger / activate the permalinks as is explained in step 17 in order for the permalinks to become active to the new domain.

    Also, make sure to disable any caching plugin that’s installed in your WordPress website.

Leave a Reply