The other day a friend of mine asked me how I develop WordPress themes on my computer because he wants to switch his blog over to WP from Blogger. After going through some of the basics in 140–character chunks, I thought it might be easier just to explain my WP development setup here on the blog. This is not meant to be an in-depth tutorial or comparison of the best development solutions. I will not go over all of the alternatives to the solutions I have chosen in this post. However, if you follow along you should end up with a solid development environment for WordPress sites.
First of all you need to create a web server environment to be able to host a local copy of WordPress. To do that you will need the following:
- Computer (I prefer a Mac)
- Web server (Apache)
- Database (MySQL)
- Scripting engine (PHP)
For the computer I prefer to use a Mac. Specifically I use a Macbook Pro, but really any modern Apple computer will do just fine. The most intensive part of developing a website is working with large Photoshop files, but a good external USB hard drive used as a scratch disk will go a long way at speeding up that work. You could just as easily use a Windows-based PC to develop websites. I used to do that myself, but since moving to Mac world I am a much happier man. There are a few advantages to using a Mac, but nothing that a resourceful, Microsoft-loving developer couldn’t overcome.
Now for the other three parts… one advantage of using a Mac is that it already has Apache and PHP pre-installed. All you have to do to enable them is visit System Preferences > Sharing then turn on Web Sharing. I used to use this pre-installed web server for development, but have since learned that keeping my development environment separate from my core operating system has its advantages.
So, for ease of use, flexibility, and portability I have switched over to using the wonderful (and free) MAMP. MAMP stands for Mac, Apache, MySQL, PHP and it is a software solution that runs a standalone version of Apache web server with PHP and MySQL on your Mac. This setup is perfect for WordPress development.
To make my setup a little easier for me to use I have changed a few default settings within MAMP. First stop all MAMP servers. In my MAMP settings I changed the default Apache port to 80 so I can use http://localhost/ as my default domain name for development. (Make sure you do not have Web Sharing enabled in System Preferences if you do this. Also note that you’ll have to enter your admin password every time you start and stop MAMP if the port is set to 80.)
In MAMP I also set Apache’s Document Root to /Users/username/Sites (substituting your home folder name for “username”). This allows me to create a folder inside my standard Sites folder for each new site I create. Each site folder is then accessed by visiting http://localhost/ in my browser of choice.
Now that the server environment is setup the next thing I need is a database management tool. MAMP comes with phpMyAdmin, a great web-based tool to manage databases and the tool most web hosts provide for free. You can access it from the “MAMP Start Page.” On my machine I prefer something a little nicer and more Mac-like. My tool of choice in this arena is Sequel Pro. Sequel Pro lets me easily create, modify, and delete databases for use in websites… and it is free.
I prefer to not use MAMP’s default “root” user for MySQL. This is probably from my old non-MAMP days when I felt like it would be more secure to have a non-root user set. So you can create a separate user account for your database using MAMP’s phpMyAdmin tool or you can use the default root account. I will assume you use the default root account because that is probably what most sane people would do.
To connect to MAMP’s MySQL databases within Sequel Pro, first make sure MAMP is running with the settings I listed above. Then open up Sequel Pro and create a new “favorite” with the following settings:
- Name: WP Development
- Host: localhost
- User: root
- Password: root
- Socket: /Applications/MAMP/tmp/mysql/mysql.sock
- Port: 8889
(Note that the Database field is empty.) Sequel Pro also allows you to set this “favorite” as its default and connect to it automatically at startup. Just visit Sequel Pro > Preferences and click the appropriate box.
The next tool you will need in your development arsenal is a good code editor (text editor). My personal favorite is TextMate. However, there is a free alternative that is pretty good called TextWrangler and several other excellent options such as BBEdit, Coda, and Espresso.
The final tool you will need in order to launch your finished website (when that time comes) is a good FTP application. I prefer Transmit, although Cyberduck is a great free option and there are other pay options such as Fetch, Forklift, and even Coda. For now you can keep this app on the back-burner because it doesn’t come into play until launch time. Let’s get an actual working copy of WordPress installed locally!
First, visit the WordPress Download Page and get a copy of the latest version of WordPress. Once unzipped you should have a folder called “wordpress” that you should move to your Sites folder.
Now we need to create an empty database for WordPress to use. Go ahead and start up MAMP if it isn’t already running then fire up Sequel Pro. In Sequel Pro click on Choose Database… and then Add Database… and give your new database a name like wptest.
Now open your code editor and open the sample configuration file included in the wordpress folder (which should now be inside your Sites folder). It should be called wp-config-sample.php. You will need to fill in the details for the database you just created in Sequel Pro. Scroll down in the file until you see the following lines of code (change the italicized values to match yours):
- define(‘DB_NAME’, ‘wptest‘);
- define(‘DB_USER’, ‘root‘);
- define(‘DB_PASSWORD’, ‘root‘);
Before you go live you should also scroll down the the next section in that file (Authentication Unique Keys) and change those lines of code to whatever WP’s automatic secret key generator gives you. Just click that link then copy/paste the results into the file in place of the current lines:
- define(‘AUTH_KEY’, ‘put your unique phrase here’);
- define(‘SECURE_AUTH_KEY’, ‘put your unique phrase here’);
- define(‘LOGGED_IN_KEY’, ‘put your unique phrase here’);
- define(‘NONCE_KEY’, ‘put your unique phrase here’);
After making all of those changes save that file as wp-config.php (remove the “-sample” from the name).
Now you should be able to visit http://localhost/wordpress/ and be greeted by WP’s installation wizard. It will ask you for a title for your new blog and an email address for the “admin” account. For development you should leave the “Allow my blog to appear in search engines like Google and Technorati” checkbox unchecked. You can change that setting later once you go live. Submit the form and you will receive an automatically generated password for your new admin account in WordPress. Immediately copy this password to the clipboard! Now click the “Log In” button and enter your new admin info to login.
The very first thing you should do is visit your admin user profile and change that password to something you will remember. Next you should go through the “Settings” sections and make any changes you might want. I definitely prefer to change the Permalink structure to “Month and Name” instead of the default “dirty” URL structure.
You will also want to create a new project in your code editor and put the entire “wordpress” folder in it. All theme files can be found in the “wp-content/themes” folder inside your root “wordpress” folder. Each theme gets its own subfolder. All plugins go in the “wp-content/plugins” folder. You can download and install new themes and plugins from within WordPress under the “Appearance” and “Plugins” sections respectively. Or you can download the themes/plugins and manually put them in these folders.
Hopefully that helped you get a start on your WordPress development. You will want to check out some great plugins for your new website like these or these. You may even want to download a few free themes and peek at the code they use to make things work. Also, you’ll probably be getting really familiar with the WordPress Codex.