Will the links on my WordPress site work if I change domains?
A staging site is an exact copy of your live site, except for one crucial detail: the URL. When you’re working on a staging site, it is important to keep in mind that if you copy your changes from your staging site to your live site, you need to account for the change in URL.
I’m going to show you how to make sure that all of the links on your site will work, even if your site URL changes. This information is useful when you are working on a staging site, but you should actually follow these best practices on every WordPress site, so that all of your sites will still work even if you change domain names.
Database vs. Files
Before digging into the nitty-gritty of writing URLs in WordPress, it is important to understand where your content is stored. There are two possible places where you content could be stored: the database, and files.
Database: Any information that you enter into your WordPress dashboard gets saved in the database (with one exception, which I will discuss later). Posts, pages, plugin settings, theme settings, and any other information you save in the WordPress dashboard will be stored in the database.
Files: Other information is stored in files on your WordPress site. Many WordPress users never actually touch their site’s files. To edit a file, you have to connect to your site with FTP, SFTP, or your web host’s file browser. In other words, you probably won’t edit a file without knowing it – you have to access your files outside of WordPress. Your WordPress files will have extensions of .php, .js, and .css (you might also see .txt).
The Exception: There is one exception to this rule of thumb: WordPress does have a built-in file editor, which lets you edit WordPress files directly in the WordPress dashboard. You can access this by going to Appearance –> Editor or to Plugins –> Editor. However, you should never use this! Using WordPress’s built-in file editor is a great way to break your site. There are two major problems with the file editor. One: it is very simplistic, which means that it doesn’t give you basic tools like syntax highlighting that make it much easier to code correctly. The bigger problem, though, is that if you have an error in a PHP file, your site will break and you will not be able to access the file editor to fix it. Any time there is a fatal error in a PHP file (which can be a result of something as simple as a missing semicolon), your site will just show a blank white screen and you will not be able to access the front end of the site or the dashboard. So even though you can edit files in the WordPress dashboard, you should never use the file editor.
URLs in the database
When you create links in your WordPress dashboard, you don’t have to worry about what will happen if the URL changes. Any time you move a site from one URL to another, you will need to go through the entire database and change all references to the site URL. In other words, if your old URL is http://myoldsite.com and you move the site to http://mynewsite.com, at some point in the migration process you will need to go through the entire database and change all references of myoldsite.com to mynewsite.com. Most WordPress migration tools will handle this for you. If you are using a WP Stagecoach staging site, the import tool will do this.
That means that any time you enter a URL anywhere in your WordPress dashboard – linking to a page on your site, linking to a media file, putting links in your menus – you don’t have to worry about whether the link will still work after your site moves to a different domain name.
URLs in files
Files will not go through any magic changes when you move from one URL to another. This means that you should never type the URL of your site into a file. Fortunately, WordPress provides lots of useful functions for putting links in files that will work on any domain name.
URLs in PHP files
Let’s look at some examples of links that you might want to put in a PHP file, and how to do it so that those links will work on any domain name.
Link to the home page: Let’s say you want to put a link to the home page in the footer of your site. You might be tempted to do this:
<a href="https://myoldsite.com"> My Site </a>
This is a problem, because when your domain name changes to “http://mynewsite.com”, this link won’t work any more. Instead, we can use WordPress’s home_url() function. It’s as easy as this:
<a href="<?php echo esc_url( home_url() ); ?>">My Site</a>
This will retrieve the URL from the database, and create a link to the site’s homepage. No matter what domain name this site has, this link will go to the homepage.
Link to an inner page: Maybe you want to link to the contact page on your site. You can still use home_url() to get to the home page, and then add the slug of the contact page after that:
<a href="<?php echo esc_url( home_url() ); ?>/contact">Contact Me</a>
This will link to the contact page.
Link to images: If you want to embed an image in a PHP file, the first step is to put the image in you’re theme’s images directory. The URL of your image will probably look something like this: http://myoldsite.com/wp-content/themes/mytheme/images/logo.jpg.
You could use home_url() here, but there’s an even better function: get_stylesheet_directory_uri(). This function gives you the URL of your theme’s directory. So to link to that logo, you can do this:
<img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo.jpg">
This will display the logo.jpg image in the images directory of your theme.
URLs in CSS files
You might need to use URLs in CSS files as well. For instance, if you want a background image, you might be tempted to do this:
body {
background: url( 'http://myoldsite.com/wp-content/themes/mytheme/images/background.jpg' );
}
But of course, the problem with this is that it will only work on myoldsite.com.
In CSS files, you should always use relative paths instead of absolute paths. An absolute path is a complete URL. The example above uses the absolute path. However, absolute paths won’t work if the site URL changes. Instead, you can use the relative URL. The relative URL is the file’s location in relation to the current CSS file. So, in this case, your CSS file is in the root directory of your theme (http://myoldsite.com/wp-content/themes/mytheme). To get the relative URL, you can leave out the root directory, and just put the subdirectory and file path. In this case, that would be:
body {
background: url( 'images/background.jpg' );
}
If that doesn’t work, you might need to do some more reading about relative URLs to find the right link.
Summary
There are a lot of good reasons to make sure that your site will work, no matter what the domain name is. Even if you are absolutely certain that your domain name will never change, you still might want the ability to create a staging site with a different URL, or use your theme on a second site. WordPress best practices call for making sure that your website will work on any domain name. Fortunately, WordPress provides the tools to make it easy to do this with a few simple functions.
