How to Make Internal Links Relative in WordPress

How to Make Internal Links Relative in WordPress

If you’ve been maintaining a WordPress blog for a long time, you probably have a ton of content. One of the ways you can improve your readership, reduce bounce rates, and elucidate certain points is by heavy internal linking. When I write an article on my blog, I usually end up inserting at least two or three links to previous content that I’ve already blogged about. There are certain “evergreen” posts for example that you keep referring to over and over again.

The default method of inserting internal links in WordPress via the post editor is by clicking the link icon. This presents us with a drop-down list of searchable post titles belonging to a blog. We simply click on the one we want and insert the link that way. It’s extremely easy and convenient. However, the link that is generated is what is known as an “absolute link”. What this means is that it contains the fully qualified domain name along with the protocol HTTP or HTTPS.

You may not think much about it at the time, but consider what happens if you ever have to move your blog to another domain. All of your existing links will suddenly become invalid. And while there are ways to search your database for strings matching the old domain and change them to the newer one, you can be a little more proactive and make use of relative links instead.

In an earlier tutorial, I’d written about using relative links for images. In this article, I’m going to look at regular text links inserted via the WordPress editor.

Default Link Insertion Behavior

You can see in the screenshot below that when you make use of the link insertion dialogue in the WordPress editor, selecting one of the topics places a fully qualified link into the text box above it:

inserting a link

The same link is transferred into the editor “as is”. So when you view it in the “Text” mode as shown here, it retains its absolute nature:

fully qualified link

A relative link on the other hand assumes that the domain name is the same as the one we are currently on. As a result, it starts with a “/” – and it will work no matter which domain your site sits on. To ensure that WordPress uses relative links to your internal content instead of absolute ones, open up your functions.php file and paste the following at the bottom before the closing ?> PHP tag:

function internal_link_to_relative(  $url, $post, $leavename ) {

if ( $post->post_type == 'post' ) {
$url = wp_make_link_relative($url);
}
return $url;
}
add_filter( 'post_link', 'internal_link_to_relative', 10, 3 );

If you don’t know how to add code to WordPress, take a look at my earlier tutorial here. The above code will intercept any link that is output by the ” get_permalink” WordPress function. In this code, we first check to see whether or not the link being outputted is a post. If it is, we use the inbuilt WordPress function “wp_make_link_relative” to automatically convert it to a relative link.

After you save the changes you made above, go back to the WordPress editor and attempt to insert a link using the same process we used earlier. If all goes well, this time you should see a relative link appear in the text box that previously outputted an absolute one.

converted to relative link

And to confirm, this same link is transferred into the WordPress post editor as well:

relative link in editor

Naturally this won’t affect links that you have already inserted in the past. Rather it means that going forward, you will never again have to worry about broken links due to moving from a test environment to a production environment, or from one domain to another.

3 Comments on “How to Make Internal Links Relative in WordPress”!

  1. Thanks for this very helpful piece of code, do you however have anything that will make it work for pages as well as posts?

Leave a Reply

This Website is Hosted by

Powered by RamNode

Disclosure: We receive a compensation from some of the companies whose products or services are presented on our website.