Just Magic Design

This post is going to document how I got this site to the (meager) state that it is in now. Why? To show fellow web developers how it’s done for those who haven’t done it before and to have a handy checklist for me to refer to next time I have to do it.

If you’re visiting for the first time or if you’re coming along later after we’ve done some remodeling, you can see a screenshot of how the site looked at the end of this process on this site’s very first post.

Note that these are the technical steps of setting up a development version of the site. We’ve already talked about what led to the decision to use WordPress. In the next blog post we’re going to backtrack and talk about the process steps we skipped because this is a relatively straight-foward site and the client (me) already knows what she wants.

This process will set up a development environment on your local computer and a live site on a remote host. I’m developing on a Mac and I have MAMP installed to provide an Apache2 web server and MySQL database. (Up until relatively recently I developed on a PC and used XAMPP, which is a very similar set-up as far as these steps go. You should be able to adapt them easily if that’s your platform.) I’m assuming the remote host is pretty standard Linux server that gives you access to phpMyAdmin for database administration.

So, on to the steps:

1. Choose a development directory and set up an Apache2 named virtual host.
2. Download WordPress to that location, set up the local database, edit wp-config.php and install WordPress.
3. Do basic WordPress configuration.
4. Set up the theme.
5. Set up source control.
6. Enable plugins and configure them.
7. Prepare the web hosting.
8. Copy the site from the development machine to the web.

1. Choose a development directory and set up an Apache2 named virtual host.

   1. Edit /etc/hosts
      Add dev.sitename.com to the line that starts with “127.0.0.1 localhost”
   2. Edit /Applications/MAMP/conf/apache/httpd.conf
      Add a new section like so at the bottom:
      
<VirtualHost *>
DocumentRoot "/Users/mariagreene/projects/sitename/wordpress"
ServerName dev.sitename.com
</VirtualHost>

   • Don’t forget to restart the server! You can do this from the MAMP dashboard widget on a Mac.
   • The /etc/hosts file is in a hidden directory so it’s a little hard to open from the Open dialog box of a text editor. On my Mac, I go to the Terminal app and type ‘mate /etc/hosts’ to open it with TextMate.

It doesn’t matter much where you put your files. I like to keep mine in a project subdirectory under my home directory (i.e., ~/projects/justmagicdesign/wordpress). Another common place to put them is under the web server root directory (i.e., /Applications/MAMP/htdocs/justmagicdesign).

Setting up a named virtual host allows you to access the local site as (for example) http://dev.justmagicdesign.com. You want to do this rather than just putting the site under the server root (and accessing it as http://localhost/sitename) because then relative paths are the same for both the local development site and the deployed site. If you don’t you’re going to have to find and change all the src attributes of your local <img> elements and href attributes of your internal links and change them when you deploy.

There are two steps to setting up the named virtual host:

Notes

2. Download WordPress to that location, set up the local database, edit wp-config.php and install WordPress.

The details are here: Installing WordPress. No need to repeat them because they’re really easy.

3. Do basic WordPress configuration.

Set your admin user’s password first! Otherwise you’ll forget that gobbledygook one that’s generated for you. Then go in and set Settings > Permalinks to the way you prefer. While you’re there, browse around the other settings and set them up however you would like.

4. Set up the theme.

For the JustMagicDesign site I’m developing a Thematic child theme. (More about that in a later post.) Since all my new sites use this base theme, I downloaded it into a shared folder and whenever I start a new project I just link to the shared copy. So, from my Mac terminal command line this would be:

cd /Users/mariagreene/projects/justmagicdesign/wordpress/wp-content
rm -rf themes
ln -s /Users/mariagreene/projects/wp-share/themes themes


For example, to create a child theme called “justmagicdesign”, copy the sample out of Thematic:

cd /Users/mariagreene/projects/wp-share/themes
cp -r thematic/thematic-sample-child-theme justmagicdesign


Now, open the style.css file in the new child theme folder and edit the header comment to set the fields for the WordPress theme manager.

Finally, go to the Appearance panel in the WordPress admin screens and select your child theme.

5. Set up source control.

I have my ~/project/wp-share folder set up as a Subversion repository. I won’t go into the virtues of source control systems or svn in particular, but trust me, you want to do this. You’ll need to add your child theme folder to svn.

6. Enable plugins and configure them.

There are many plugins that I use across all WordPress projects. I’ve downloaded them all to /Users/mariagreene/projects/wp-share/plugins. At some point I’ll blog about what they are, but for the purposes of starting a new project, the trick is to make a symbolic link to the shared folder. Here are the Mac terminal commands:

cd /Users/mariagreene/projects/justmagicdesign/wp-content
rm -rf plugins
ln -s /Users/mariagreene/projects/wp-share/plugins plugins


Now go to the Plugins page of the WordPress admin panel and enable the ones you want. You’ll need to configure many of them as well.

7. Prepare the web hosting.

I like to “deploy early and deploy often” in order to share my work with clients and my business partner. I also like to find hosting issues early. This means I often set up web hosting as soon as I know what the requirements are going to be or I use a subdomain on my justmagicdesign.com domain as a staging site. Except in special circumstances (like when I’m showing the world the rough stages of the design and development of this site), I usually password protect the top directory so the world (and Googlebot) doesn’t see anything half baked.

A word to the wise — don’t try to host your WordPress site on Yahoo! small business webhosting. Run away, run away!

8. Copy the site from the development machine to the web.

   • Copy the files from the local to remote machine. I use ftp from the Mac Terminal app but you can use any FTP client, including FireFTP, a useful, free Firefox Add-on.
   • Export the database using phpMyAdmin on the local host. Save it as a text file on your desktop.
   • Open it in your text editor and change all instances of your local site address (e.g., dev.sitename.com) to the remote address (e.g., sitename.com).
   • Create a new database on the remote host (using phpMyAdmin, the MySQL option of the control panel or using the mysqladmin command line tool if you have access to that).
   • Use phpMyAdmin on the remote host to import the sql file.
   • Edit the /wp-conf.php file of the new site to point to the new database. (You may need to also change other database information in this file, like the username and password if they’re not the same across sites.)

Now you’re ready to rock and roll! At this point I usually consider the database on the remote server to be the “golden” copy because other people are likely to have edited content there. I consider the files on my local machine to be the “golden” ones because they’re under source control and because it’s easiest to develop locally (where I can edit a file and just refresh my browser to see the changes). I periodically pull the database down from the web and push the files up to keep the two in sync.