Wordpress and Azure Websites: I want my Domain Name

Update: You can now point your domain name directly at your Azure Website without any of this nonsense. Read the announcement for more details.

If you set up Wordpress on a free Azure Website, which means you went with the Shared model, you may have discovered that Microsoft gives you a custom subdomain, such as http://codethug.azurewebsites.net. However, if you want to use a custom domain, such as http://codethug.com, you can’t.

You can try pointing directly to the IP address of your server, or you can even try using a CNAME to point to codethug.azurewebsites.net, but neither will work.

Custom domains are available today, but only on reserved Azure Websites.
Custom domains are planned for the future for shared websites, according to @scottgu
However, with a little bit of jQuery, we can get it to work like we want, even on a shared website.

Here is how:

URL Masking with an IFrame

1. Find out what your Azure website address is. You can find this at https://manage.azure.com under ‘Web Sites’ in the top-right corner of the screen.

2. Set up URL Forwarding / Domain masking with your DNS provider. Here is what I set mine up to look like. Note that I checked ‘Pass subdirectories.’ This is important, because if it isn’t checked and someone navigates to http://codethug.com/someotherpage, the homepage will be loaded instead of /someotherpage.

3. Wait for your DNS entry to update (or, to be accurate, for your old DNS settings to expire). Hopefully this won’t take more than a couple of hours. You can continue with the next steps while you wait, but you might have some downtime while URLs don’t work quite right.

Tricking Wordpress into Cooperating

4. Navigate to the wordpress Dashboard, then click on Settings - General. I ended up at http://codethug.azurewebsites.net/wp-admin/options-general.php. Then set your site address to be the real DNS name that you want. This will cause Wordpress to render the URLs with the proper domain name at the front. Be careful not to change the Wordpress address or lots of things will break.

We’re most of the way there. Here is where it gets interesting. If you try out your site now, and you load the site using a link to an article, such as http://codethug.com/2012/06/18/mysql-on-azure/, and you then click on another blog article, the URL at the top will still have the original URL you landed at the site with. Even worse, if you are reading the MySQL on Azure post, and in that post you clicks a link to another site, such as http://www.google.com, you will see google’s home page, but the URL at the top of the window will still say http://codethug.com/2012/06/18/mysql-on-azure/. This is not good.

The this happens is that the URL masking is a very simple page that has an IFrame that points to the real content. When you navigate around in that IFrame by clicking on links, the IFrame navigates, but the outer page does not. And the outer page is what controls the address bar in the browser.

We can fix this with a small snippet of javascript.

5. On your Wordpress Dashboard, go to Plugins - Add New. I ended up at http://codethug.azurewebsites.net/wp-admin/plugin-install.php. Search for ‘CSS & Javascript Toolbox’. Install and activate the plugin.

6. Once it is activated, you can configure it by navigating to Settings - CSS & Javascript Toolbox. In the main window that you see, add this chunk of code:

1
2
3
4
5
6
7
8
9
10
11
12
<script type="text/javascript">// <![CDATA[

(function($){
$(document).ready(function() {
$('a').click(function(event) {
window.parent.location = event.currentTarget.href;
return false;
});
});</pre>

})(jQuery);
// ]]></script>

Then on the right-side of the page, check off ‘Front Page’, ‘All Posts’, and ‘All Pages.’ Also, be sure to go to the ‘Categories’ tab and check off all of the categories.

Click ‘Save All Changes’ at the bottom.

So what is this doing? Well, normally when you click on a link (an ‘anchor’ tag, which is represented by the ‘a’ element in HTML), because the link is part of a page that is in an IFrame, only the IFrame navigates. But this little chunk of javascript intercepts all clicks for ‘a’ tags and tells the browser to get the parent (the main browser window) to navigate instead of the IFrame.

And thus our problem is solved. Users can now browse to http://www.codethug.com and click around, and the browser will behave appropriately, updating the address bar as needed. This in spite of the lack of support for custom domain names with Azure Websites in shared mode.