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:
- Click on the phpMyAdmin link at the top.
- 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.
- Start by pointing your browser to: http://localhost:8888/wordpress/
- Click the “Create a Configuration File” button
- Click the “Let’s go!” button
- You’ll be asked to enter database connection details. It should look like this:
Press Submit. - Click the “Run the install” button
- 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.
- You will be given a username of admin and a very random password. Copy that password, and then click “Log In.”
- You’ll be at the wp-login page, enter in admin as the username, and paste in the password, then log in.
- Click on the design tab, and choose the theme you would like to edit (likely “My Great Theme” if you followed step 2)
- 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)
