This is a little trick I’ve picked up that helped me out quite a bit, especially when developing Wordpress sites where you need to get the paths and URLs right for everything to work properly.

The scenario

You’re hired to do the redesign of an existing website (example.com). Your client wants to move their website to your hosting (or new hosting) when the redesign goes live. You’ve agreed on a seamless transition from old to new on one sunny Monday morning in a months time.

So you get to work on the site in your chosen development area, demo it to the client, they’re happy and you transfer the site to the newly configured hosting space on your server, however the name servers for example.com haven’t been changed yet, it’s only Friday and the redesign isn’t going live until Monday, but you’re a contentious developer and you want to test the new design to ensure everything is working as expected in the live environment.

What do you do?

Our goal

We’re going to edit the hosts file on our Mac to make our servers IP address (e.g. 70.26.55.80) resolve to example.com, just like what a DNS server does when example.com’s name servers have been changed to point to the new hosting.

Configuring the server

All server configurations are different but the principle is generally the same, we need to find out/set our example.com to appear in the web browser when we visit our example IP of 70.26.55.80. For this example I’m going to explain the process on a Plesk driven server (from this you should be able to get an idea of how this would be achieved through other management software packages).

• Configure your web space for example.com and upload all your files to it
• Login to Plesk
• Select Server from the left-hand menu
• Go to the IP Addresses – This should present you with a list of IP addresses assigned to your server, when you configured the hosting for example.com you will have selected one of these IP addresses (you may even only have one IP address in this list)
• For each IP address there’s a column titled Hosting with a link showing the number of domains assigned to that IP address, click the link that corresponds with the IP address you selected for the web space
• Select example.com and click Set As Default - You can only select one default domain to be displayed if you visit that IP address in a browser
• Make a note of the IP address (e.g. 70.26.55.80)
• Visit 70.26.55.80 in a web browser – You should be presented with your newly uploaded site for example.com

Editing the hosts file

Mac’s have a hosts file that we can edit to make 70.26.55.80 resolve to example.com just as if the name servers for example.com had already been changed (obviously this only effects the Mac you are on).

I’m sure you’ll be able to do this on a PC as well but don’t ask me how, I’m a Mac man.

• Open a Terminal
• Enter sudo vim /etc/hosts then enter your administrator password

This will open the hosts file in the vim editor. You should see something like this:

##
# Host Database
#
# localhost is used to configure the loopback interface
# when the system is booting.  Do not change this entry.
##
127.0.0.1       localhost
255.255.255.255 broadcasthost
::1             localhost
fe80::1%lo0     localhost

To edit the file press ‘a’, cursor down to the bottom of the list and enter:

70.26.55.80       example.com

Press ‘esc’ then enter ‘:wp’ to write and quit vim.

If you now visit example.com in your web browser it should resolve to 70.26.55.80 (the new hosting) and you can test your newly designed site in its live environment.

Now all that has to be done to make the site seamless go live on Monday is change the name servers for example.com to point to your hosting and you can guarantee that everything will work.

Important note: Remember to take the entry for example.com out of your hosts file when you have finished testing, otherwise you may end up seeing a false representation of what is actually being displayed at that domain when the name servers are changed!

Final Tip: Instead of removing the line completely from your hosts file simply add a # to the beginning of the line. This “comments out” the line and stops it from being applied. If this is a process that you are going to use regularly in the future then the line is already in your hosts file and you can simply remove the # and change the domain name when you need to.

I seem to be developing a lot of Wordpress sites recently and thought I’d share with you 6 of the plugins I’ve been finding invaluable.

WP Dummy Content

If you’re building a theme for a brand new blog that doesn’t have any posts or pages it’s a nightmare having to create these one by one so that you have some content to work with.

WP Dummy Content to the rescue! It allows you to add any number of random posts of categories as well as pages, nicely filling up the site with content. And when you are done, there’s a delete all button that removes the dummy content (but not any posts or pages that you may have entered manually).

http://wordpress.org/extend/plugins/wp-dummy-content/

Redirection

If you’re migrating a site that was previously running on a different previous blogging platform, such as Movable Type, you may find that the URLs for your posts no longer match. Obviously you want to avoid dead links.

Instead of writing redirect rules directly into your .htaccess file, you can use the Redirection plugin to manage them.

You simply enter the old URL along with the new URL. Simple!

http://wordpress.org/extend/plugins/redirection/

Improved Include Page

Thanks goes to Mr Stocks for suggesting this one to me. :-)

Improved Include Page lets you pull any pages content into another page. For example if you have an About page with three areas of content, one of the areas could be the content of the About page itself, and the other two could be split into sub-pages. You can then create a custom-template for the About page and use the Improved Include Page to pull them all together. Quite handy if you want to have something more diverse than a single block of content on your page.

http://wordpress.org/extend/plugins/improved-include-page/

Update URLs

If you’re like me, you’ll develop your sites in a client or development area before making them live. In Wordpress, URLs for your images in particular are hard coded into you posts/pages. Everything works fine until you make the site live, then you have to go through and update all your URLs?

Not with the Update URLs plugin!

Simple enter your development area URL:

http://clients.example.com/clientsite/

And the replacement URL:

http://www.clientsite.com

Click Update URLs and you’re done.

http://wordpress.org/extend/plugins/velvet-blues-update-urls/

Maintenance Mode

I’ve built sites for clients who want to write a few blogs and learn their way around Wordpress before they make the site live. The maintenance mode plugin is quite hand for this. You can activate the plugin and a splash screen appears to all visitors, logged in administrators still see the front-end of the site as normal.

You can even create a 503.php template so that you can customise the look and feel to your hearts content!

http://wordpress.org/extend/plugins/maintenance-mode/

Scissors

Not really essential but the Scissors plugin adds the facility to resize, crop and rotates images. Much needed additional functionality for the media library in my book.

http://wordpress.org/extend/plugins/scissors/

Any more?

Have you guys come across any additional plugins for wordpress that you just couldn’t live without?

thehodge.co.uk Redesign

So I drew two cartoons of Dom, one for the top of the page (Guitar Hero’s Dom) and one for the bottom (Slumped Dom). The grundy style to the blog evolved naturally after that.

Guitar Hero’s Dom & Slumped Dom

Linkage: thehodge.co.uk

Let me know what you think of the final result?