How to Insert Relative Image URLs in WordPress
Posted onThere 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:
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.
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:
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.
This is great! Does it work with PDF and other non-image files as well?
I just tried this on WP 4.7.3 and a child-theme under Twenty Seventeen and it doesn’t work. What could be wrong?
I tried with WP 4.9.4 and it doesn’t work
Seems that the hook has been removed from the latest versions of WordPress (> 4.7 or so).
I achieved the same thing with another hook:
*******
add_filter(‘wp_get_attachment_url’, ‘make_url_relative’);
function make_url_relative($url) {
$relativeurl = wp_make_link_relative($url);
return ‘my_wp_root’.$relativeurl;
};
*******
I had to insert ‘my_wp_root’ because for some reason $relativeurl gives /wp_content/etc…, and I need /my_wp_root/wp_content/etc… No idea why this is.
Please note that I am a ROOKIE. It seems to work for me, but I don’t guarantee anything!
E.
I just tested it, and it’s still working…
Just found this gem and got it working precisely as stated. Crazy relative paths are such a tricky bit of work. I put the code in the article in my child theme’s function.php file. Thank you so much!
I am running WP 4.9.5 and the euxino child/theme
I really appreciate it!
– Craig Coffman
Hey,
thanks for the tutorial. Works with charm.
But I wondering why this isn’t default. I tried to find the correct place in source code without success. Would like to try a patch.
The thing I really hate at absolute urls is the fact if you change something the images aren’t found any more.
For instance you change from http to https and everything is broken then or you move to another domain.
This is amazing. It works with my latest wordpress.
You can do this on the Settings / Media page without code. Set “Full URL path to files” to the URL of your images and other content relative to the root of your site e.g. “/wp-content/uploads”