Migrate a WordPress site

1. Export your database to the live server

On your local installation:

a.) Open phpMyAdmin, then click on the database that contains your WordPress installation. (Mine is dbwordpresswebsite)

b.) Click on the _options table. (Your prefix may vary. The default is wp_options.)

c.) Click on Browse.

phpmyadmin screenshot

d.) Change two rows in the table named siteurl and home. Sometimes they’re right next to each other, and sometimes not. In my case, they are.

(My URL points to http://localhost/wordpresswebsite while developing the site locally on my computer, in XAMPP. Now I need to point it to my live server, http://websitename.com.)

NOTE: If I had to install it in a subdomain, I would point it to: http://websitename.com/subdomain-folder-name

NOTE: Your local site will not work after you make this change. You can change the values back and it will work again.

e.) Go back to your database and click “Export”, then select “Custom”, “Save output to a file”, as below:

NOTE: If your server isn’t running a current version of MySQL, you may need to change “Database system or older MySQL server to maximize output compatibility with” and MYSQL40  set to NONE.

Select Go at the bottom, and your database will download (dbwordpresswebsite.sql in this example). Make note of the saved file’s location.

2. Import your database to the live server

a.) On your live server, go to MySQL and Create a new database

THESE NEXT STEPS ARE EXTREMELY IMPORTANT. READ THROUGH THEM FIRST TO MAKE SURE YOU UNDERSTAND WHAT TO DO.  DON’T SKIP ANY STEPS.

b.) Create a database user: You need a user to be able to connect to your new database.

c.) Give the new user full access to the new database you just created. 

(I always create 2 users with full access in case I have an issue logging-in with one of them.)

d.) Find the information for the username and password for MySql. It’s usually located with the FTP settings information. Make a note of this information so you can log in to the database successfully.

e.) Go to server PHPMyAdmin

Find the database you just created and import your saved database into it. (Choose the .sql file you saved in step 1.)

3. Upload your WordPress files to the server

Use Filezilla or another FTP transfer app. Copy all the WordPress files and folders to the correct server-directory, usually called “public”.

In this example, I’m going to transfer everything that’s inside of C://XAMPP/htdocs/wordpresswebsite to the “Public” folder on the web server.

4. Change your WordPress configuration wp-config.php file.

a.) Find the local copy of wp-config.php in the root of the local WordPress install, (in my case, it’s in XAMPP/htdocs/dbwordpresswebsite in the screenshot above).

b.) Open wp-config.php with a text editor. Make a copy of wp-config.php in case this first attempt doesn’t go well.

The original file looks like this:

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

define(‘DB_NAME’, ‘dbwordpresswebsite’);

/** MySQL database username */

define(‘DB_USER’, ‘root’);

/** MySQL database password */

define(‘DB_PASSWORD’, ‘root’);

c.) Change wp-config.php to match your server WordPress configuration.

Change these three options to match your live server database, user and password:

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

define(‘DB_NAME’, ‘your-new-database-on-server’);

/** MySQL database username */

define(‘DB_USER’, ‘user-you-just-created-on-server’);

/** MySQL database password */

define(‘DB_PASSWORD’, ‘password-you-created-for-user-to-log-in’);

define(‘DB_HOST’, ‘localhost’); will most likely remain the same, but some hosts create a different host.

d.) Now upload the changed wp-config.php to the server and over-write the one that’s there.  It will be where you just uploaded the WordPress files and folders.

5.  Go to the sites URL to check if it’s loading properly.

If it’s not, go back and make sure you’ve done every step. If you haven’t skipped any, then it’s most likely an issue with  wp-config.php . Make sure the 3 items you changed are correct. Correct them and re-upload wp-config.php to the root again.

6. Load the WordPress Backend

a.) Click Settings > Permalinks and update permalinks.

7. Find and replace URLs in database

*Backup your database before applying any changes.

Posts that contain links using URLs may need to be changed. There are plugins to do this: The  Better Search Replace plugin enables you to search for database “strings” of data, and replace them.

For broken links, you can use these tips, or use a SQL query to fix it.

To use SQL to do fix links, go to phpMyAdmin, click on your database and then click “SQL” in the top menu. Write this query but use your own file names and domain:

UPDATE wp_posts SET post_content = REPLACE(post_content, ‘localhost/folder/’, ‘www.yoursite.com/’);

8. Regenerate thumbnails to correct the images size

Use a thumbnail re-generator plugin to correct the display size of your images.

TA-DAAAAAA!

Now you know how to migrate a WordPress site!

Not too shabby, eh?

Questions? Contact me:

[email protected]

or

My Contact Page

Other articles you might like:

-How your personal brand makes the difference

-Using images: Tips to improve your SEO rankings

-10 Things to Do After Creating Your Website

About the author

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.

First of all, you need to know that CSS defines two kinds of gradients:

• Linear Gradients (down/up/left/right/diagonally)
• Radial Gradients (defined by their center)

I’m only focusing on linear gradients in this post.

Before you create the linear gradient, you need to decide two things:

• What colors you will use. Those are your “color stops.”
• The starting point and direction of  your gradient. (Do you want the colors to go left-right? Up-down? Angled from corner to corner?)

TYPES OF GRADIENTS

Top to Bottom (the default)

Create a div. Inside this div, your selector will be “background” and its’ property will be “linear-gradient”. The value of “linear-gradient” will be the color stops.

I use hex values for my color stops to have more control over the exact shades. Here’s a resource for finding hex codes:

Here’s the default syntax:

#mydiv {
background: linear-gradient(blue, green);
}

It’s actually pretty straightforward, huh?

Now we can try some other kinds of transitions:

Left-right, transitioning from blue to green:

#mydiv {
background: linear-gradient(to right, blue , green);
}

Diagonally:

You can make the gradient display diagonally by indicating the horizontal and vertical starting positions:

#mydiv {
background: linear-gradient(to bottom right, blue, green);
}

Angled: (to top, to bottom, to left, to right, to bottom right, etc.)

The angle is specified by degrees between the horizontal line and the gradient line:

#mydiv {
background: linear-gradient(-90deg, blue, green);
}

Top-bottom, transitioning from blue to green to orange:

#mydiv {
background: linear-gradient(blue, green, orange);
}

My own gradient background goes left to right, and I specified that I wanted the first color to take up the first 50% of the gradient space.

Here’s my code:

background: linear-gradient(to right, #57BBBF 50% , #5798bf, #577dbf, #5759bf, #6f57bf, #9457bf, #da5cdb);

You can add transparency, by using the “rgba() function” to define the color stops. To define the amount of opacity or transparency, the last value in the function is  either a 0 or 1. (0 indicates full transparency, 1 indicates no transparency (fully opaque).

This next gradient starts from the left as fully transparent, then transitions to full opaque (non-transparent) blue:

#mydiv {
background: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1));
}

I hope you try some of these yourself and get creative, and have fun with them. There’s no limit to what you can do with gradients.

Questions? Contact me:

[email protected]

or

My Contact Page

Other articles you might like:

-6 Tips to Make Your Blog Post SEO Friendly

-Using images: Tips to improve your SEO rankings

-Use a customer thank-you page to avoid missed opportunities

About the author

I developed Image and Aspect because I believe that professionals need to have an impactful web presence. One that showcases their unique talents, skills, and abilities as well as their values and style. A presence that focuses on social engagement and connection.

I’m passionate about what I do; I like helping fellow humans, I like having all kinds of social connection with others, and I want to give back, to make the world a better place.

I do much of the designing and coding myself, and I also have a wonderful network of professionals that may contribute as well; photographers, copywriters, branding experts.

I love designing and coding beautiful, elegant and responsive web creations. I ALSO teach and help others who want to learn how to do it themselves.

‘Tips and Snips’ is my blog, and it’s full of information and inspiration to help transform any online persona from “meh” to AMAZING! Sign-up HERE to get blog posts right to your in-box every Friday! I write about Design, Marketing, Search Engine Optimization, Branding, Vlogging, Color Theory, HTML5, CSS3, Bootstrap, WordPress, Social Media…anything you’d want to know to get yourself noticed online.

Visit Image and Aspect to learn more about your web presence options

Diane M. Metcalf, M.S.