Prevent Broken Links in WordPress Posts by Using Root-Relative Links

WordPress does many magical things behind the scenes. HTML tags needed to display a blog post are added for us. Posts tagged with keywords are automatically connected to other posts with the same tag. Side bar widgets generate lists of recent posts, most used tags, etc. with no intervention from us. We just need to write the posts, add the tags, activate the widgets and WordPress does the rest. With all these automation features, I have overlooked a potential flaw in the system—they use absolute links.

Background

Okay, using absolute links isn't world ending; it may actually be good in some cases. If we copy our database to a WordPress install on a development server, for example, images with absolute links will work without needing to upload the files. The development server pulls the images directly from the live website.

However, absolute links may give a false sense of security if the website is being moved to a new domain name. When the database is copied to the new WordPress install, things may appear correctly…until the old domain is closed down. Images that are still linked to the old website will be broken. That's where root-relative links prove useful.

Root-relative links act pretty much the same as absolute links, but they're not locked to the domain name. The database information can be copied to a development server (or new WordPress install) and our links will actually point to the correct location.

Note: before going any further, it should be noted that this post is based on the self-hosted version of WordPress.

Fixing Links

When writing posts within WordPress, we may want to point visitors to other entries within the blog. This can be accomplished with the built-in link creator (see Figure 1).

Figure 1. Link Creation Feature

As shown in Figure 1, an absolute link was added to the URL field when the "Disconnect Forms from Google Docs…" post is selected. To convert this to a root-relative link, we just need to remove the "https://www.cyberscorpion.com" portion (see Figure 2).

Figure 2. Root-Relative Link

Note that the leading slash has been left in the URL. The slash is what makes the link root relative versus document relative.

Fixing Images

Images within blog posts are slightly more complicated. The built-in WordPress feature for adding media doesn't provide a field for the "src" attribute. Instead, we'll add our image as normal and switch to code view by clicking the Text tab (see Figure 3).

Figure 3. Text Tab

Within the code, locate the <img> tag similar to the one shown in Figure 4. Remove the domain portion like we did for internal website links.

Figure 4. Sample <img> Tag

Conclusion

Absolute links being carried over to the development server (or new domain), only seems to be a problem within content like blog posts. Other WordPress features such as Recent Posts and the Tag Cloud adapt themselves to the domain they are hosted under.

Note: options are available in the WordPress plug-in directory claiming to convert absolute links to root-relative links. Typing "absolute links" into the box to search for plug-ins should provide a list.