Quick Fix for Working with Absolute Path on Temporary URL

Can’t think of a better title, here is the scenario: After creating a new account at hosting service provider, we are normally assigned a temporary URL before link this hosting account to domain of final production site, for example: http://hostingserver.com/~username. Sometimes, we have to work on the temporary URL through development stage before site goes live for various reasons. The temporary URL creates temporary trouble to some not well-written code in case “absolute path” is used in either themes, plugins, or existing site. The trouble can be either broken links, or missing images.

Why the Trouble?

In a temporary URL configuration, the root path is http://hostingserver.com/, not expected http://hostingserver.com/~username. If any code uses absolute path, for example:

<a href=”/contact”>Contact</a>

It means “http://hostingserver.com/~username/contact/. But the actual path it gets in a temporary URL configuration is: “http://hostingserver.com/contact”, which is “404 Page not found”.

For the same reason, images with absolute path won’t get us the image but “file not found”, for example:

<img src=”/wp-content/uploads/2014/01/image.jpg” />

 

The Fix

Because this is a temporary problem introduced by temporary URL, fixing this problem should take minimum amount of time, as the problem will go away once site goes live. In some cases, there are just too many absolute paths to replace, changing source code may not the best solution.

I, hereby, wrote a simple jQuery code attache to the bottom of each page, normally, footer.php. It will take care of the problem on the fly. Or you can add it to your custom js file that can be included in every page.

jQuery(document).ready( function( $ ){
	// Tempporary URL fix. Remove on final production site
	$( "a[href]" ).each( function( index ) {
		if ( this.href.indexOf( '~username' ) == -1 && this.href.indexOf( 'hostingserver.com' ) > 0) {
			this.href = this.href.replace( 'hostingserver.com', 'hostingserver.com/~username' );
		}
	});

	$("img").each(function(index){
		if ( this.src.indexOf( '~username' ) == -1 && this.src.indexOf( 'hostingserver.com' ) > 0) {
			this.src = this.src.replace( 'hostingserver.com', 'hostingserver.com/~username' );
		}
	});
});

Replace the “username” & “hostingserver.com” to match your configuration, it should work as long as jQuery is loaded.

When site goes live, just remove it, although leaving it there won’t hurt anything.