How to Move WordPress Media Folder to Subdomain?

Each image on a web page sends a separate HTTP request to server thus reducing the speed of response if all images and media files are stored in the same domain. Hence it is a good practice to host images on a separate subdomain so that they will be loaded in parallel requests when the page is loaded. In this article we explain the step by step process on how to host images from subdomain in WordPress.

Move WordPress Media Folder to Subdomain

The entire process consists of the following eight steps and the last step is optional. If you are looking for moving “Uploads” folder outside /wp-content/ folder then check out this article.

1. Creating a Subdomain

Login to your hosting account and create a subdomain with the name you want. Below are the steps in cPanel hosting and you should have a similar process with other hosting companies as well. For example, you can follow the similar process in SiteGround which uses custom Site Tools instead of cPanel.

Navigate to “domains > subdomains” in your cPanel. Enter the subdomain name for the main domain and click on create button. For example, we have created a subdomain img.webnots.com; you can use any names like media.yourdomain.com.

2. Check DNS Settings

Once the subdomain is created ensure the corresponding A records are created in your DNS. In Bluehost you can check this under “domains > zone editor”.

3. Migrating Images to Subdomain

This step is required only for those who already have images on the site stored on different directory like “/wp-content/uploads/”. If you have new site not having any existing images then this step is not required. Launch your FTP client and download the entire folder where the images are stored to your local computer. Then upload all the images into the newly created subdomain folder.

Now that you have duplicated all images to the subdomain and the next step is to configure your WordPress installation on main domain to use the subdomain as an upload folder for media files.

Warning: Uploading images through FTP will not visible in the media folder. Check our article on how to fix FTP uploaded images not appearing in media library.

4. Changing Upload Folder to Subdomain

Login to your hosting account and launch “phpMyAdmin” section under cPanel. Open the database of your main domain. Select “wp-options” table and replace the following two parameters and save your settings.

upload_path	directory root for your subdomain
upload_url_path	actual URL path for your subdomain

For example:

upload_path	/home/server_root/public_html/img
upload_url_path	https://img.yourdomain.com

Server_root is the root directory of your server, it is the hosting account name in case of Bluehost. If you can’t find the server root then add the below code in any of your WordPress PHP template and copy the output.

<?php echo $_SERVER["DOCUMENT_ROOT"]; ?>

Until this step there will be no impact on your live site since the existing media upload folder is not changed. Any new image you upload henceforth will be stored in a new subdomain path you have entered in the “wp-options” table. You can cross check this by uploading a test image and check the URL.

Once you modified the upload path in “wp-options” table you can see the upload path options are enabled in WordPress admin frontend under “Settings > Media“. Henceforth you can update the uploads file path directly here.

Warning: It is recommended to back up your database before doing this step. Plugins and themes will use this uploads path. Hence, all cached folders, minified files and other files will also be saved in the new subdomain instead of “/wp-content/uploads/” folder.

As mentioned above, SiteGround and many other companies use custom hosting panel. In most custom cases, the subdomain is located outside the main domain’s root path and contains separate “/public_html/” path. In this case, you can’t leave “Store uploads in this folder” as blank. Make sure to enter the correct URL path for your subdomain on the server.

As we are using SiteGround Cloud hosting, below is how it will look on the settings page. You can add the following path as uploads folder for SiteGround or else confirm with your host and get the correct URL.

/home/customer/www/img.webnots.com/public_html

5. Changing Live Image URLs

This step is not required if you don’t have any existing images on the site. For those have already images on the site you need to change the pointer from current folder to the newly created subdomain path. In order to do this open “phpMyAdmin” and select the database of your main domain. Under SQL tab run the below query:

UPDATE wp_posts SET post_content = REPLACE(post_content,'URL of current media folder','URL of new media folder')

• URL of current media folder – https://www.domain.com/wp-content/uploads
• URL of new media folder – https://img.domain.com

This will change all existing image URLs to point to new subdomain. That’s it!!! You are done and check your site is loading with the images from subdomain by checking the URL of an image on live site.

6. Delete or Change Old Media Folder

Once the images are loading from subdomain then you can delete all images in old media folder (/wp-content/uploads/). You can also change the folder name (like /uploads_old/) to retain the images for some more time on the main domain for safer side.

7. Redirecting Already Indexed Images

All existing images might have been indexed by the search engines with old URLs which will now result in 404 error since you have changed/deleted the old folder and moved your images to new subdomain. Here you need to setup a permanent 301 redirect as below in .htaccess file of your main domain.

RewriteCond %{HTTP_HOST} ^yourdomain\.com$ [OR]
RewriteCond %{HTTP_HOST} ^www\.yourdomain\.com$
RewriteRule ^wp\-content\/uploads\/?(.*)$ "https\:\/\/subdomain\.yourdomain\.com\/$1" [R=301,L]

Replace subdomain and yourdomain with your own values.

This will ensure all image URLs are redirected to the new subdomain and you are not loosing any traffic from search engine’s image search.

8. Creating Home Page for Subdomain

There is one last step we would recommend – adding a home page for your subdomain. At this point of time when you try to reach your subdomain (like img.webnots.com) it will show 403 access forbidden error which may not look professional. Refer our separate article on how to setup a home page for your subdomain to provide some useful details to those viewing your subdomain URL directly on the browser.

Note:

1. You also can use additional folders inside subdomains like “img.webnots.com/files/”.
2. If you want your images classified under monthly folders then check the box under “Settings > Media > Organize my uploads into month- and year-based folders”. Then the image URL will look something like “img.webnots.com/2015/06/image-name.jpg”. Remember, all previously uploaded images will still work with old URL structure and the change will be effective only for the new uploads.