Jonathan Deutsch's weblog covering mac app development, engineering management, running a startup, HTML5, and all things Apple.

Live Editing WordPress Themes with HyperEdit

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)

HyperEdit 1.6 Released!

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.

HyperEdit 1.6 Public Beta

I just wrapped up work on HyperEdit 1.6, and due to the extensiveness of the changes I am releasing a public beta for everyone willing and able to try! This release should eliminate the Leopard+Intel crashers many were seeing frequently, hopefully making HyperEdit stable once again. Here’s the full list of changes:

  • Improved Leopard compatibility
  • Fixed many memory leaks
  • Preview menu has browser icons
  • New Javascript console using the WebKit Inspector (if Safari 3.1 is installed)
  • Added preference to display invisible characters
  • Added Text menu item to convert text to upper and lower case
  • New toolbar icons (thanks Marc Edwards of iSlayer!)
  • Added automatic checking for updates (via Sparkle, thanks Andy Matuschak!)
  • Added ability to report crashes (via UKCrashReporter, thanks Uli Kusterer!)
  • Fixed an issue saving window layout when the preview is collapsed
  • Fixed vital information window ordering
  • Fixed bug where the document was not being marked as dirty
  • Support for localizations

While there are no known issues, please keep in mind that it is still beta, and may eat your homework.

Download HyperEdit 1.6b1 (4.1 MB)

Please contact me if you encounter any issues. HyperEdit now also has a built-in crash reporting mechanism so if you encounter a crash, please relaunch HyperEdit and file a report. Thanks!

HyperEdit 1.5.3 Released!

Today I released HyperEdit 1.5.3! HyperEdit is my live HTML and PHP editor with W3C validation. This version is mainly to better support Leopard by resolving activation issues, but also includes some other bug fixes as well.

Download HyperEdit 1.5.3 (3.9 MB)

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

What is a computer?

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.

Tweet! Tweet!

Well, I’ve gone and done it; I’m now a twitter user. I’m not heavy on making entries yet, but I find it is a good place to make random comments without worrying about the “overhead” of blogging. Feel free to follow me at http://twitter.com/tumultco.

I’m not 100% convinced I’ve bought into the whole twitter idea, but maybe it just needs a better mac client.

You can be a rockstar for $500

There has been a lot of discussion of the difference in how customers are treated at Apple stores versus AT&T stores. At the Apple stores, you’re a rock star:


click to watch the video

I went to the Valley Fair store twice on launch night. The first time (when I took this video), the line was still incredibly long, and I was amazed at how happy people were when leaving the store. Around 10:30pm I went back, noticed that despite the store being crowded the line was gone, and got a little too tempted by the call of the iPhone (ahem, no pun intended). The Apple retail employees were still as genki as ever, and cheered me on while leaving the store with my new baby.

HyperEdit 1.5.2 Released!

Today I released HyperEdit 1.5.2! HyperEdit is my live HTML and PHP editor with W3C validation. The main change is that this version is a universal binary, so it will run great on both Intel and PowerPC-based Macs.

Download HyperEdit 1.5.2 (3.9 MB)

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

HyperEdit & PHP 5

LunaStoria.org has a mini-review of HyperEdit that includes some nice instructions on getting it working with PHP 5.

HyperEdit 1.5.1 Released!

Today I released HyperEdit 1.5.1! HyperEdit is my live HTML and PHP editor with W3C validation. This version is primarily a bug-fix release, and the upgrade is recommended for everyone. Here’s what’s new:

  • Fixed several encoding issues
  • HTML entity coloring
  • Files in the linked-file drawer can be opened by double-clicking on them
  • HyperEdit does a better job of cleaning up temporary files
  • Restored Mac OS X 10.2.8 support
  • Color palette remembers its state
  • Revert sheet is now properly dismissed
  • Fixed a bug in properly loading files with a “.htm” extensions
  • Various other bug fixes

This will be the last version to support Mac OS X 10.2. The next update will be Universal so it runs native on Intel Macs.

Download HyperEdit 1.5.1 (3.3 MB)

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