A question I’ve been asked (and often wondered myself) is how to use HyperEdit to effectively develop a WordPress theme and get live previews. I decided to finally figure this out, and while the solution isn’t as elegant as I would like, the results work pretty well. These instructions are somewhat verbose, but it really should only take about 5 minutes to setup.

Step 1: Installing MAMP

MAMP (Mac, Apache, MySQL, and PHP) is a self-contained installation of all the software necessary to run a WordPress blog. Since it requires practically no configuration and is easy to dispose of when done, we’ll use this.

Get MAMP at: http://www.mamp.info/en/download.html

After downloading and mounting the MAMP 1.7.1 dmg, drag the MAMP folder to /Applications/ (it must be located here).

Step 2: Getting WordPress

Download WordPress at: http://wordpress.org/download/. After decompressing, drag the worpdress folder to /Applications/MAMP/htdocs/.

At this point you’ll want to make a copy theme to edit (or bring over an existing one). To do this, go to the /Applications/MAMP/htdocs/wordpress/wp-content/themes/ folder and duplicate default, naming it something like “MyTheme.” You’ll want to go into that folder, open up style.css, and change the comment at the top from “Theme Name: WordPress Default” to something like “Theme Name: My Great Theme” so you will notice it in WordPress later.

Step 3: Launching MAMP and Setting Up a MySQL Database

MAMP installed a handy application at /Applications/MAMP/MAMP.app which will start apache and a MySQL server. Go ahead and open that up. It will also point your web browser to http://localhost:8888/MAMP/, which we will now use to setup a MySQL database that wordpress can use:

1. Click on the phpMyAdmin link at the top.
   
2. Find the Create new database field, and set the name of the database to “wordress” and then click create
   

Step 4: Configuring WordPress

Now you’ll need to actually get WordPress up and running under MAMP.

1. Start by pointing your browser to: http://localhost:8888/wordpress/
2. Click the “Create a Configuration File” button
3. Click the “Let’s go!” button
4. You’ll be asked to enter database connection details. It should look like this:
   
   Press Submit.
5. Click the “Run the install” button
6. Set a blog title, enter your email address, and then uncheck “Allow my blog to appear in search engines like Google and Technorati.” Click the “Install WordPress” button.
7. You will be given a username of admin and a very random password. Copy that password, and then click “Log In.”
8. You’ll be at the wp-login page, enter in admin as the username, and paste in the password, then log in.
9. Click on the design tab, and choose the theme you would like to edit (likely “My Great Theme” if you followed step 2)
10. At the top, click the view site button, and you should be able to see the default Hello world! entry.

Step 5: Using HyperEdit

Make sure you’ve got the latest version, HyperEdit 1.6.

Before you begin editing your page, you will need to configure HyperEdit to use the MAMP version of PHP instead of Mac OS X’s default installation. To do this, launch HyperEdit, go to the Preferences, click the advanced tab, and then change the Path to PHP binary field to /Applications/MAMP/bin/php5/bin/php You’ll want to change this back to /usr/bin/php when you are done using MAMP.

Here’s where the fun begins! Open up /Applications/MAMP/htdocs/wordpress/index.php in HyperEdit. You should be able to see your blog! Now what you’ll need to do is add linked files to the index.php document, so whenever you edit a resource, HyperEdit will automatically update the page. To do this, click the “Linked Files” toobar item, and then drag into it any resources you plan to edit from /Applications/MAMP/htdocs/wordpress/wp-content/themes/MyTheme/:

If you’ve added style.css, double-click on that, and make a change such as setting the body background-color to just “#000;” Hit command-S to save the document, and you should see the background color on your blog page turn black! If you’d like to update the blog automatically when editing the CSS, choose the “Linked File (css/js)” editing mode option in the options palette for the style.css document.

Be aware though, this will save your document whenever you make any changes!

Presently, you are editing the main page, but if you would like to preview the comments page, simply set your index.php page to be this:

<?php
/* Short and sweet */
$_GET["p"]="1";
define('WP_USE_THEMES', true);
require('./wp-blog-header.php');
?>

And that’s about all there is to it; happy coding! (and now maybe I’ll finally update my own theme)

Today I released HyperEdit 1.6! HyperEdit is my live HTML and PHP editor with W3C validation. This version has several stability fixes, support for Safari 3.1’s Web Inspector, the ability to display invisible characters, new toolbar icons, auto-updates, and better support for Mac OS X 10.5. Registration and product activation issues that occured with Leopard have now been resolved.

Download HyperEdit 1.6 (4.1 MB)

Please contact me if you run into any problems with the new version.

There has been a lot of back and forth about Apple’s iPhone 1.1.1 update lately. One side argues that the iPhone is a computer, thus should allow third party apps and non-destructive upgrades. The other side rebukes by stating it is a device, and no other devices allow third party apps or make the manufacturer worry about preserving hacks. The heart of the matter that seems to escape most pundits is this question: what is the difference between a computer and a consumer electronics device?

Most believe that it has to do with the type of processor or processing power. Using those metrics is invalid; so many devices we call consumer electronics (or even other things like cars!) have processors with capable instruction sets and more power than the “computers” of 5 years ago.

I think the appropriate definition for today’s world should be based around the input device; the difference between a computer and a consumer electronics device is determined by the user’s ability to express themselves. The keyboard is the ultimate device for expression; it lets people communicate their ideas fully and quickly. There are other interesting input devices such as tablets, mics with speech recognition, etc., though none have been able to replace the venerable keyboard in effectiveness.

A Tivo runs linux and has a hard drive. Some users hack it in an unsupported fashion. Its input device is the remote control that lets a user do things like play, pause, and change channels. Not very expressive, and therefore it is a consumer electronics device.

My old RAZR had a keypad that was souped-up to let me type letters in as frustrating a manner as possible. It can run some Java applications, but what is the point? It is just a device.

My iPhone has a full/dynamic keyboard and a multi-touch interface.