WordPress Multisite Domain Mapping Guide using WPML, NGINX and AWS Route 53

I recently worked on a WordPress Multisite Project that has multiple markets. Each market is also translated into two languages. One of the requirements is to point a custom domain to a single subsite. But there is a catch, the original path should still be accessible.

For this example, let's assume we are working on a Taiwan Website.

Objective:

To map the two domains to taiwan subsite.
www.example.com.tw to www.example.com/tw/
www.example.tw to www.example.com/tw/.
Original path must be accessible - If a user visits www.example.com/tw/, final url should be www.example.com/tw/
Language code must be accessible within the domains - If a user visits www.example.com.tw, final url should be www.example.com.tw/zh. If user visits www.example.tw, final url should be www.example.tw/zh.

Domains

AWS Route 53

We added the two domains to Route 53. These domains are pointed to the AWS EC2 Instance same as the primary domain.

WordPress WPML Plugin

WPML is used for content translation. For the Taiwan website, we added two languages: English (EN) and Traditional Chinese (ZH). Traditional Chinese (ZH) is set as the default language.

NGINX Configuration

The configuration below is for www.example.com.tw.

What happens here

The server block. Each domain will have its own server block and it is pointed to the WordPress installation root folder.

server {
    listen 80;
    listen [::]:80;

    server_name www.example.com.tw;

    root /var/www/example.com/public_html;

    ....

The location block. With the sub_filter directive, it replaces the original path string with another string from the domain. This is where we map the custom domains to Taiwan subsite URL.

    location / {

      sub_filter_once off;
      sub_filter_last_modified on;
      sub_filter 'https:\/\/example.com/tw' '$scheme:\/\/www.ucc-apac.tw';
      sub_filter 'redirect_to=https%3A%2F%2Fexample.com/tw%2F' 'redirect_to=$scheme%3A%2F%2Fwww.ucc-apac.tw';
      sub_filter 'https://example.com/tw' 'https://www.ucc-apac.tw';

      proxy_pass https://example.com/tw/;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header Accept-Encoding "";
      proxy_set_header X-Forwarded-Host $host;

    }

NGINX Full Configuration


server {
    listen 80;
    listen [::]:80;

    server_name www.example.com.tw;

    root /var/www/example.com/public_html;

    location / {

      # substitute URL rendered to our location
      # plain URL:
      sub_filter 'https://example.com/tw' 'https://www.example.com.tw';

      # replace many times instead of once
      sub_filter_once off;

      # keep the last modified header
      sub_filter_last_modified on;

      # escaped in JS:
      sub_filter 'https:\/\/example.com/tw' '$scheme:\/\/www.example.com.tw';

      # redirect in JS in URL parameters:
      sub_filter 'redirect_to=https%3A%2F%2Fexample.com/tw%2F' 'redirect_to=$scheme%3A%2F%2Fwww.example.com.tw';

      # request get proxied to this site 
      proxy_pass https://example.com/tw/;
      proxy_set_header X-Forwarded-Proto $scheme;
      proxy_set_header X-Forwarded-Host $host;

      # disable compression to make substitution work
      proxy_set_header Accept-Encoding "";

    }

}

Reference: https://gist.github.com/bzamecnik/f5b6e8bf57c808edd244cd6e743c4a3c

Additional Notes!

Browser language Redirect

If you are using WPML plugin, you might experience an issue where if you visit a non-default language, it will redirect you to the default language. And to fix it, you will need to disable browser language redirect.

WordPress MU Domain Mapping

I have tried using the WordPress MU Domain Mapping plugin. The only problem with the plugin is that the original path was not preserved and you can only map one domain.

DEV Community