How to Insert Relative Image URLs in WordPress

images using relative URL

There are certain issues that polarize web developers. Choice of technology, interpreted versus compiled code, Android versus iPhone etc. One of these relates to WordPress and whether or not we should use absolute or relative URLs. Absolute URLs include the entire URL as you see it in the address bar of your browser including the root domain name. Relative URLs on the other hand specify internal URLs only with regard to the current domain – in other words, they leave out the domain name entirely when referring to URLs belonging to the same site.

This has several advantages. Notably, it allows you to seamlessly move your WordPress installation between different domains without 404 not found errors. Also, relative URLs ease the transition between development and production environments. If you use absolute URLs, you’re going to have to perform a database search and replace them each and every time you push test code onto a live server.

This doesn’t mean that relative URLs are always superior to absolute once. Many prominent coders have raised concerns regarding relative URLs and spidering, duplicated content etc. But if these concerns are not enough to hold you back, this article will show you how to automatically insert relative URLs for WordPress images via the visual editor.

WordPress and Absolute URLs

Let’s take an example and look at the default behavior of WordPress. When you want to insert an image into the visual editor, you click the “Add Media” button where you can select an image as well as the size and insert it into your post as shown here:

inserting image

After the image has been posted onto the visual editor, you can view the source code by clicking the “Text” tab on the right-hand side. Examining the output code, you can see that WordPress includes the full absolute URL for the image source, including the domain name and the protocol.

absolute URL inserted

You can easily imagine what will happen if you migrate your blog to another website with a different domain name. These links won’t go anywhere and all the images on your site will break unless you do some specialized redirects or replace all mentions of the old domain name directly in your database. Now let’s see how to change this behavior.

Changing to Relative URLs

In order to change this behavior, we’re going to add a filter to replace the absolute URL in the HTML with a relative one. Open up your functions.php file and paste the following code before the closing ?> PHP tag:

function switch_to_relative_url($html, $id, $caption, $title, $align, $url, $size, $alt)
{
$imageurl = wp_get_attachment_image_src($id, $size);
$relativeurl = wp_make_link_relative($imageurl[0]);   
$html = str_replace($imageurl[0],$relativeurl,$html);
      
return $html;
}
add_filter('image_send_to_editor','switch_to_relative_url',10,8);

If you don’t know how to add custom code to WordPress, here’s my earlier tutorial on how to do this.

The code above hooks into the ‘image_send_to_editor” filter which converts the absolute URL using the internal function “wp_make_link_relative” and then simply replaces the original one with it. After saving your changes in functions.php, you can see that WordPress now inserts relative URLs for images into the post editor instead of absolute ones:

images using relative URL

Now when you move your WordPress site from your local development environment to the production server, you won’t be required to make any changes to the database via a find and replace function. You can also safely transfer your websites to another domain entirely and your images will still display correctly. That’s the magic of relative URLs.

Keep in mind of course that this won’t make any modifications to images that you’ve already uploaded and inserted into previous posts. You’ll need to replace them manually instead.

0938.54.84.99