Loading media on local WordPress using remote database

by

For my theme development purposes I have a local WordPress installation that I run from a VM, accessed via, let’s say, http://local.app. I also have a remote version of the site on a staging server, http://staging.example.com.

The staging site contains all the content that I design the theme around (i.e posts, pages, WooCommerce products etc).

All of this is in the MySQL database on the server as well as media (images, files etc) in wp-content/uploads.

Now, via the useful guide on the Codex entitled “Two WordPresses, One Database” I have this mostly working, with a local copy of the theme, plugins and wordpress core on my vm, getting all its data from the remote staging server.

The only problem is that all media is getting 404 as for some reason all urls to the media files are linking to my local vm rather than the staging server. E.g. If I visit the media library and go to the “edit media” page, the “file url” reads as follows:

  • On the staging server: http://staging.example.com/wp-content/uploads/2015/04/greigh.jpg
  • On my local vm: http://local.app/wp-content/uploads/2015/04/greigh.jpg

When inspecting the database all attachment post types have guids with full urls, not relative. So how is WordPress building these urls, and is there a way to solve this without having to duplicate the entire media library onto my VM?

4 s
4

Somewhere in the core, URLs get absolutely pathed when put into the database.

Why don’t you just load all your images from your staging server? Have the staging server hold the files while your local mirrors it. Add the following to your .htaccess to your local uploads folder and the contents are as follows:

# Attempt to load files from production if they're not in our local version
<IfModule mod_rewrite.c>
  RewriteEngine on
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteCond %{REQUEST_FILENAME} !-f
  # Replace http://example.com with your production site's domain name
  RewriteRule (.*) http://example.com/wp-content/uploads/$1
</IfModule>

Leave a Comment