Setting Up MT ProCDN, W3TC, and WordPress Multisite

Recently, I decided to give Media Temple’s ProCDN system a try. The awesome W3tc caching plugin already supports MT’s ProCDN so it was actually a pretty painless process.

The only real issue that I faced was getting the image links for my directory based multisite setup to translate properly on my CDN. Here is how I made it all work.

Initial Setup on Media Temple ProCDN

This tutorial gives detailed instructions on how to set things up on the Media Temple side.

Here are some things to keep in mind –

1. Use HTTP Small objects for website CDNs.

We can create as many HTTP Small objects as we want. I created an object for each of my domains. Here is the more complete Edgecast HTTP Small Object guide.

2. The Directory Name must be unique for each HTTP object.

Since I am structuring my CDN according to domain, I named each directory based on domain. For example, suppose –

• I have three domains –

  mydomain1.com, mydomain2.com, mydomain3.com

• In this case, I would name my directories –

  mydomain1, mydomain2, mydomain3

• My CDN links (non multisite) would look like this –

  http://wac.96cc.edgecastcdn.net/8096CC/mydomain1/wp-content/uploads/2012/12/myimage.jpg
  http://wac.96cc.edgecastcdn.net/8096CC/mydomain2/wp-content/uploads/2012/12/myimage.jpg
  http://wac.96cc.edgecastcdn.net/8096CC/mydomain3/wp-content/uploads/2012/12/myimage.jpg 
  

Setup on W3 Total Cache

This article describes how to setup w3tc with Media Temple’s ProCDN system.

In the configuration section –

• Account # – This is the account number on the upper right of our Media Temple ProCDN control panel. This exact account number also appears in our full CDN link. If we desire, we may create a shorter, more pretty url by using cnames.
• Token – This is like a password for accessing the ProCDN API. We can get our token by clicking on the My Settings link on the top right of our proCDN panel. This API and token are used when we purge files from our CDN.
• SSL support – I set this to Disabled. In the ProCDN faq page, this is what Media Temple says –
  

  Do you offer SSL with ProCDN?
  Not yet. We know that this is important to our users and it’s on our roadmap.

• Replace site hostname with – I enter my CDN path here. For example –

  wac.96cc.edgecastcdn.net/8096CC/mydomain1 
  

  Note – there is no http in the entry, just the main CDN domain and relevant path.

Translate Multisite Image Links

If we are running WordPress Multisite with directories, there is another thing we must address. On a multisite-directory setup, image links look something like this –

http://mydomain.com/myblog1/files/2012/12/myimage.jpg

These links then get translated in our .htaccess file to the actual URL which looks like this –

http://mydomain.com/wp-content/blogs.dir/2/files/2012/12/myimage.jpg

where 2 is the blog number for myblog1 in our multisite setup.

The problem is, we do not have the same ability to redirect links on our CDN. As a result, after CDN path replacement, our image links look like this –

http://wac.96cc.edgecastcdn.net/8096CC/mydomain1/myblog1/files/2012/12/myimage.jpg

This results in a file not found error because our image file actually resides in –

http://wac.96cc.edgecastcdn.net/8096CC/mydomain1/wp-content/blogs.dir/2/files/2012/12/myimage.jpg

One way to resolve this issue is to translate the links right in the w3tc plugin. After all, the plugin already extracts the relevant links and does CDN name replacements; we just need to add in our own directory redirect.

To do this –

• I edit the file w3-total-cache/lib/W3/Plugin/Cdn.php in the w3tc plugin.
• I look for the link_replace_callback function.
• Within the function, I look for this line of code –

  $new_url = $cdn->format_url($path);     
  

  Right below it, I add the following –

  $new_url = apply_filters('shiba_cdn_remote_file_name', $new_url);    
  

• Now, I can add in my own filter function to change my CDN urls. Below is an example filter function for translating my image urls.

// Add to the init function
add_filter('shiba_cdn_remote_file_name', 'my_cdn_check');

function my_cdn_check($remote_file) {
	if (strpos($remote_file, '/myblog1/files') !== FALSE) {
		$remote_file = str_replace('/myblog1/files', '/wp-content/blogs.dir/2/files', $remote_file);
	}
	return $remote_file;
}

In general, I do not like making changes to core plugin files, but I did not find a less intrusive alternative method. If you know of one, please let me know.

Make a copy of the original files before making any changes. In this way, we can revert back if there are any problems. Do not attempt to do this unless you are comfortable with ftp-ing files to and from your web server, and have access to your server file system.

Test CDN

Now we have everything set up!

It may take up to several hours for everything to propagate through. Before turning on the CDN option in w3tc, make sure that your images have propagated and are in the right place.

To test this, I enter some example CDN urls into my browser.

http://mydomain.com/myblog1/wp-content/blogs.dir/2/files/2012/12/myimage.jpg

If we choose to cache our css and js files, they will also take some time to propagate to our CDN.

Whenever there are updates to my css and js files, I make sure to purge all of my caches. I also purge my CDN cache by going to the Performance >> CDN screen, and clicking on the Purge button at the top. Then, I enter all the css and js files that I want to update.

I only turn on CDN caching for my css files when I am sure that there is a copy of it cached in my CDN. This ensures that my live pages will always be styled.