Uploading a WordPress Site (Home/Office)

Topics covered in this WordPress tutorial:

Exporting a database, Modifying the SQL to use appropriate absolute URLs, Uploading WordPress, Importing a database

Exercise Preview

Exercise Overview

Once you are satisfied with the way the site looks and functions, it’s time to upload it to the remote web server. This exercise was written for use at your home or office, and is similar to Exercise 4D. In this exercise, you will sign up for a free test hosting account with 000webhost.com and upload the WordPress site to their server.

Signing Up for a Free Hosting Account

1. Open a web browser and go to 000webhost.com (those are zeros at the beginning of the URL).

2. Click the Free Sign Up button on the right.

3. Under Start Free Sign Up, enter your Email, Password, and Website Name (subdomain). So you don’t forget them, write them down (you’ll need them later).

4. Click Get Free Hosting.

5. If you see it, fill out the CAPTCHA.

6. Once your site is finished being created, you’ll receive an email (it may be in your Junk folder). Click the link in the email to confirm your registration and return to the 000webhost site.

7. In the dialog that appears, click It’s ok, I want to learn.

8. Click the Manage website “Website Name” button.

9. Under Build website take note of your full domain (you’ll need this later).

10. In the top-right corner, go into the Settings menu and choose General.

11. You will need the FTP details to upload your site. So you don’t forget them, take note of the following (you’ll need them later):

    • Host Name (should be files.000webhost.com)
    • Username
    • Password (same as website login password)

12. Let’s see how the website looks. Under Website Settings, click the link to your website, This is just a default page—you will be replacing it shortly.

Exporting the Database

WordPress stores all the posts, page content, and comments in a MySQL database. We can easily transfer all our site content from the local version to the remote server by transferring the database.

1. Start your server and open phpMyAdmin, as shown below:

   Mac

   1. Open the MAMP application.
   2. Servers should start automatically; if not, click Start Servers.
   3. Click Open WebStart page if the MAMP start page doesn’t automatically open in your default browser.
   4. On the start page, in the nav menu, go to Tools > phpMyAdmin.

   Windows

   1. Open XAMPP.
   2. In the control panel, ensure the Apache and MySQL services are running.
   3. Open your browser and go to localhost
   4. On the start page, on the left sidebar, under Tools, click phpMyAdmin.

2. Click the mrp database from the list of databases on the left. This is the WordPress database that stores everything.

   

3. On the following page, click the Export tab:

   

4. To finish exporting your WordPress database, follow the appropriate directions for your operating system:

   Mac

   1. Under Export Method, choose Custom.
   2. Under Table(s), click Select All to make sure all the tables are selected.
   3. Under Output, choose Save output to a file.
   4. Under Object creation options, check on Add DROP TABLE / VIEW / PROCEDURE / FUNCTION / EVENT / TRIGGER statement.
   5. At the bottom of the page, click Go.

   Windows

   1. Under Export Method, choose Custom.
   2. Under Object creation options, check on Add DROP TABLE / VIEW / PROCEDURE / FUNCTION / EVENT / TRIGGER statement.
   3. At the bottom of the page, click Go.

5. If a pop-up window appears, Save the file into your Downloads folder. (If you are using Chrome on any platform or Safari on a Mac, it won’t open a pop-up window; it will just download the file.)

   NOTE: By default, most web browsers will download files into the Downloads folder on your machine. Depending on whether you have changed your preferences, the file may download into another location other than the Downloads folder.

   The mrp.sql file will now be downloaded and placed in your Downloads folder.

Replacing the Local URLs

WordPress uses absolute links for almost everything in the database, so we need to change all the local paths to the new remote path. Currently all the links stored in the database are linking to localhost:8888/mrp (Mac) or localhost/mrp (Windows). This would cause linking issues if you were to import the database directly to your remote server now. The easiest way to fix this is to do a Find and Replace in your code editor.

1. Open your code editor.

2. Choose File > Open.

3. Navigate to your Downloads folder (or the folder that mrp.sql was downloaded to):
   • Mac: [username] > Downloads
   • Windows: C: > Users > [username] > Downloads

4. Open mrp.sql.

5. Go to the following to do a Find and Replace:

   • If you are using Sublime Text, go to Find > Replace.
   • If you are using Dreamweaver, go to Edit > Find and Replace.

6. Enter the following (the Find and Replace labels may be named differently in your code editor):

   Find:	http://localhost:8888/mrp (Mac) or http://localhost/mrp (Windows)
   Replace:	Enter the full URL of the site you wrote down earlier in this exercise (including http://).

7. Click the Replace All button.

8. Save the file.

Importing the Database

1. Go to 000webhost.com/members

2. Enter your email and password and click Log In (if you’re not logged in already).

3. Along the top menu, click Manage database.

4. Near the bottom right, click New Database.

5. Create a new database, user, and password:

   Database name:	mrp
   Database username:	user
   Password:	passw0rd (the letter o is a zero)

6. When complete, click Create.

7. On the following page, it will display important information regarding the database. Write it down because you’ll need it later.
   • DB Name
   • DB User
   • DB Host

   NOTE: Your database username (DB User) and database name (DB Name) have been prefixed with a series of numbers. Your password has not been changed.

8. On the right of the database table, click Manage > PhpMyAdmin.

9. This should take you to the phpMyAdmin page. Enter your new database Username and Password.

10. Click on your database name from the list of databases on the left.

11. Click on the Import tab.

    

12. Click the Choose File button (in some browsers it is Browse).

13. Go to the Downloads folder where the mrp.sql file was saved.

14. Double–click mrp.sql

15. At the bottom of the page, click the Go button. It should import your database. You’ll know it worked if you see a message at the top that says something like: Import has been successfully finished, 69 queries executed.

FTP Clients

While there are many great FTP Clients you can use for uploading your website to a remote server, we choose to use Cyberduck in this workbook because it is free and cross-platform. Rest assured: if you choose to use a different FTP client, it will involve the same simple steps we outline in the exercise.

Uploading Your WordPress Site

1. Launch Cyberduck.

2. Click the Open Connection button at the top left of the main window.

3. Next to the following fields, enter the information about your website (NOT the database you just created) you wrote down earlier in the exercise. If you forgot, this info is accessible by going to 000webhost.com/members and going into the Settings > General.

   Server:	Enter the FTP host name (should be files.000webhost.com)
   Username:	Enter your FTP user name
   Password:	Enter your FTP password (same as website login password)

4. To connect to the server, click Connect. If you get a warning that you have an Unsecured FTP connection, just hit Continue.

   NOTE: If Cyberduck cannot make a connection, double-check your username and password as well as making sure there are no extra spaces.

5. Double–click on the public_html folder.

6. Once connected, you will see the window that lists the files for your site.

   TIP: Once connected, you can choose Bookmark > New Bookmark to save all this information for future use.

7. You are now ready to upload your files. In order to do this, move the Cyberduck window to one side so you’ll be able to see your local file folder next to it.

8. Open a Finder (Mac) or Explorer (Windows) window and navigate to:
   • Mac: Hard Drive > Applications > MAMP > htdocs > mrp
   • Windows: C: > xampp > htdocs > mrp

9. Arrange this window and the Cyberduck window so they are side-by-side.

10. In the mrp window, select all of your local files by clicking on any file and pressing Cmd–A (Mac) or Ctrl–A (Windows).

11. To put your files on the live site, simply drag the selected files and folders from your computer’s window onto the Cyberduck window. TIP: Be careful not to drop the files into any existing folders.

    If you get another warning that you have an Unsecured FTP connection, just hit Continue once more.

12. A Transfers window will appear, showing the progress of the upload (it will take a while).

    If you get an Overwrite window or a warning about overwriting the pre-existing files and folders, just hit Continue to overwrite those files with your own.

13. Once it has finished uploading, you can go ahead and close the Transfers window.

Editing the wp-config.php File

When the site is finished uploading, you need to connect it to the database you uploaded to the remote server.

1. Switch to your code editor.

2. Open wp-config.php from the mrp folder located at:
   • Mac: Hard Drive > Applications > MAMP > htdocs > mrp
   • Windows: C: > xampp > htdocs > mrp

3. Save the file as wp-config-remote.php into the mrp folder. This will be the config file that we upload to the live server.

   NOTE: You may be wondering why we don’t just edit the wp-config file instead of making a copy. By making a copy of the file, we will still be able to work on the site locally if we wanted to.

4. Update your MySQL settings around line 18 with the information you wrote down earlier in the exercise:

   /** The name of the database for WordPress */
   

   define('DB_NAME', 'XXXXXXXX_mrp');

   /** MySQL database username */
   

   define('DB_USER', 'XXXXXXXX_user');
   

   /** MySQL database password */
   

   define('DB_PASSWORD', 'passw0rd');
   

   /** MySQL hostname */
   

   define('DB_HOST', 'mysqlXXX.000webhost.com');
   

5. Save the file.

6. Switch back to Cyberduck and the Finder (Mac) or Explorer (Windows) window.

7. Drag the wp-config-remote.php from your computer’s window onto the Cyberduck window. If you get another warning that you have an Unsecured FTP connection, just hit Continue once more.

8. A Transfers window will appear, showing the progress of the upload.

   If you get an Overwrite window or a warning about overwriting the pre-existing files and folders, just hit Continue to overwrite those files with your own.

9. When the file has finished uploading, you can go ahead and close the Transfers window.

10. In the Cyberduck window, Ctrl–click (Mac) or Right–click (Windows) the wp-config.php file and choose Delete. (If a dialog appears, click Delete.)

11. Still in the Cyberduck window, Ctrl–click (Mac) or Right–click (Windows) wp-config-remote.php and choose Rename.

12. Rename the file wp-config.php

13. Go to the domain you were assigned to check out your live site! The MRP website should load. Awesome!

14. If you get a database connection error, double-check that you entered the correct information in the wp-config-remote.php file. Correct any mistakes you may have made, then repeat the previous steps to upload the file again.