Local Development and WordPress Uploads

One common issue with local development is how to handle uploaded files.

You could copy the entire wp-content/uploads/ directory but that can use up a lot of disk space for little benefit.

Another option is to rewrite all HTTP requests for missing local images to the appropriate URLs on the live site.

Here’s how to do it:

Nginx

Find your nginx config file1 and add this line above the location / { block:

location /wp-content/uploads/ {
    try_files $uri $uri/;

    rewrite ^/wp-content/uploads/(.*)$ https://{live site domain}/wp-content/uploads/$1;
}

Or if for some reason you need to rewrite all files to the live site instead of just those that are missing, add this in the location / { block, ideally as the first line:

rewrite ^/wp-content/uploads/(.*)$ https://{live site domain}/wp-content/uploads/$1;

Apache

Add this line to the .htaccess file:

RewriteRule ^wp-content/uploads/(.*)$ http://{live site domain}/wp-content/uploads/$1 [NC,L]

Notes

  1. If you’re using Laravel Valet: look in ~/.config/valet/Nginx/ for a file with the same name as your site’s domain.
    If you’re using Laravel Herd: look in ~/Library/Application Support/Herd/config/valet/Nginx/ for a file with the same name as your site’s domain.

Using Laravel artisan tinker and psysh with Xdebug

I often use Xdebug for troubleshooting and interactively debugging local code as I write it.

Laravel’s artisan command is extremely useful for running code interactively during development. (It’s based on another utility named psysh.)

It can be very useful to set some debug breakpoints and then run code interactively using artisan, but occasionally when I run php artisan tinker, the PHP shell just sits there and doesn’t accept any input until I kill my xdebug listener.

Thanks to this issue, I finally have a solution.

Add this to the psysh config file (~/.config/psysh/config.php on macOS):

<?php
return [
  'usePcntl' => false,
];

Visual Studio Code Workspaces and PHP Intelephense

When developing WordPress plugins for general use, I like to open the plugin directory itself in VS Code.

This allows me to use the git integration and terminal without wading through the wp-content/plugins/{plugin name} directory structure.

However, this results in the WordPress functions appearing as “undefined function” and the inability to jump to their definition or hover to see parameters and other details.

Here’s how I fix that annoyance:

  1. Save the open project as a workspace (File > Save As Workspace…)
  2. Add a fresh WordPress installation to the workspace, making it a multi-root workspace
    • Note: this step is not strictly necessary as noted below.
  3. Go to Settings (Code > Preferences > Settings), click on the “Workspace” tab, and search for intelephense.environment.includePaths
  4. In the “Include Paths” section, add an entry for the fresh WordPress installation so Intelephense will index it