How to move WordPress media files to CloudFlare

Tips and Guides/ 14th Dec 2017/Will Cook-Martin

We’ve already discussed integrating CloudFlare with WordPress, in a previous article. This detailed how to serve all content over CloudFlare’s network – but what if you wanted to specify what content is passed to CloudFlare and what isn’t?

For example if you are using a lot of bandwidth at your hosting provider because you have a lot of images that you’ve uploaded via WordPress’ Media Manager, you can instead serve this over CloudFlare’s network for free.

Whilst there is a degree of manual work involved, this guide will show you how to move WordPress media files to CloudFlare. The steps include the use of cPanel, though you can perform these particular steps using an alternative admin panel or via the command line

Did you know…

At Clook, one of our specialisms is providing WordPress optimised hosting which is significantly faster than a standard install. If you’d like to find out more please get in touch with us.

1
Create a CloudFlare account

If you don’t have a CloudFlare account, create one and add a domain using this tutorial.

2
Create a subdomain

Using cPanel, create a subdomain for your CDN content.

You can call the subdomain anything you like but we recommend something similar to cdn for ease of recognition.

create cdn subdomain cpanel

3
Create a CNAME record in CloudFlare’s DNS settings

Follow this guide to add a CNAME record in your CloudFlare dashboard, though instead of using “blog” use “cdn” or whatever subdomain you created in step 2, as below.

How to move WordPress media files to CloudFlare

4
Review CloudFlare’s DNS settings

Check that the only record that has its traffic routed through CloudFlare’s servers is the one you created in step 3.

In the image below you can see that only the CNAME record cdn is passing through CloudFlare’s network, as indicated by the orange cloud.

If there are any other records that are passing through CloudFlare’s network, i.e. those that have an orange cloud, click on them and ensure they are grey and therefore no longer being passed through CloudFlare’s network.

cloudflare dns settings

5
Change the location for your WordPress media uploads

Using cPanel’s File Manager, open the file wp-config.php, which is typically in your public_html folder

Add the following below the opening php statement, replacing cdn with whatever you created in step 2

//** Subdomain for Media uploads ** //
define(‘UPLOADS’, ‘cdn/uploads’);

6
Create a redirect using htaccess

Presently your images will be served from yourdomain.com/cdn/uploads, in order to make sure this is instead cdn.yourdomain.com/uploads we need to create a htaccess redirect

This is a fairly simple process:

Open File Manager from within cPanel

navigate to your public_html directory

right click on the .htaccess file and click edit(If you can’t see this, click settings in the top right hand area of your screen, tick show hidden files and save).

Edit the file as follows, you may already have a block starting with “RewriteEngine On” in which case place the code below directly underneath that line and make sure you don’t have duplicate “RewriteEngine On” lines.

Replace cdn/ and cdn.yourdomain.com with whatever you created in step 2

RewriteEngine On
RewriteBase
RewriteCond %{HTTPS} =on
RewriteRule ^(.*)$ – [env=proto:https]
RewriteCond %{HTTPS} !=on
RewriteRule ^(.*)$ – [env=proto:http]

RewriteRule ^cdn/(.*)$ %{ENV:proto}://cdn.yourdomain.com/$1 [R=301,L,NC]

Only complete the next steps if you have existing WordPress media files

If this is a new WordPress site and you have no existing images, you’ve finished.

If you have already uploaded images to WordPress’ media folder there are a couple more steps to get existing images served by CloudFlare

Before you complete any of the following step, make sure you take a full backup.

7
Move existing uploads

Use cPanel’s file manager to move all content in /wp-content/uploads/ to the CDN folder you setup in step 2 when you created a subdomain. In my case this was /public_html/cdn

cpanel move wp-uploads cdn

8
Change image URLs in the database

Use phpMyAdmin to change the existing WordPress media library folder to the new one

click the phpMyAdmin link on your cPanel dashboard

Click the relevant dashboard on the left hand side

Click the SQL button the top menu

Copy and paste the following code into the white box:
– replacing wpda to whatever your database prefix is (see the red boxes in the screenshot)
– replacing yourdomain.com/wp-content/uploads with the location of your WordPress uploads folder
– replacing cdn.yourdomain.com with the subdomain you created in step 2

UPDATE wpda_posts SET post_content = REPLACE(post_content,’yourdomain.com/wp-content/uploads’,’cdn.yourdomain.com/uploads’)

Click the go button to replace these references in your database

phpmyadmin change wordpress upload location

9
Delete existing content

Now that we’ve copied across the media files to the new location and updated the image location in the database, we can use cPanel’s File Manager to delete the existing media content

delete old wordpress upload location

10
Redirect Existing Indexed Images

Finally so that any images that have been indexed by search engines are redirected gracefully, ensure you add the following redirect to your htaccess file.

Replace cdn, yourdomain and .com to suit how you have configured the cdn subdomain in step 2

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

Will's our technical sales guy from the hills of Rossendale. A follower of Stoke City, father to Eddie, husband to Catherine and a fan of gadgets - oh and he's recently mastered the art of really slow DIY.
We have a very strong team here at Clook and we build on everyone's strengths and weaknesses, you have to be able to make a good brew too!

Chris James

Customer Login

Forgot Password? Cancel