Working With Wordpress Offline Like a Pro

Webmaster Blog

Working With Wordpress Offline Like a Pro

Like many of you I’ve noticed a lot more of my clients want dynamic websites instead of traditional static pages. This is great because dynamic pages tend to lead to more work, continued maintenance and they tend to offer larger budgets. I used to work off of my web server but the problem I’ve had lately is that when I’m not connected to the internet I haven’t been able to code for Wordpress in a way that allows me to view my changes. Since I started using the techniques used in this tutorial my productivity has increased significantly.

The solution for me was to start using MAMP which allows me to run a virtual web server on my Mac. With this tutorial I’ll tell you how to install MAMP, install Wordpress on your Mac, install extensions to Dreamweaver and soon you’ll be able to design wordpress whenever you want wherever you want! Although I mention Wordpress instructions specifically, MAMP allows you to use many other CMS’ offline as well. Unfortunately, this tutorial is for Mac users but if you’re a PC user try this tutorial on using XAMPP.

The abbreviation MAMP stands for: Macintosh, Apache, Mysql and PHP. It allows the user to host a virtual server bundled with all of the other things you need to run dynamic web pages like MySql, PHP, and Apache. Unlike previous solutions all these resources are available at the click of a button. You don’t have to figure out how to install or update them individually which saves everyone a lot of time and stress.

I. Installing MAMP

Installing MAMP is fairly simple. The graphical installer makes it almost impossible to mess up. Here’s how to install:

1. Download the MAMP application here.
2. Double-click on the MAMP disk image to mount it. Drag the MAMP folder to your Applications folder. Important: don’t nest it in other folders!!!! (The server applications require this.)
3. Launch MAMP. Once the MAMP window appears, click Start Servers to get everything going. When you see green lights, you know you’re good to go.

run your server locally

4. MAMP will open a web page in your default web browser. It should read:

If you can see this page, MAMP is installed on your Mac and everything is working!

To see the PHP configuration, you can watch the output of phpinfo.

Here you can manage eAccelerator.

The MySQL Database can be administrated with phpMyAdmin.

To connect to the MySQL Server from your own scripts use the following connection parameters:

Host: localhost
[Port: 8889]
User: root
Password: root
5. This web page contains important information! Do not close this web page until you have jotted down all of the information you need. The page also contains links to phpMyAdmin and SQLiteManager. A Mysql database is already set up for your convenience. It’s called ‘test’. To verify this click on “SQLite Manager”. If the ‘test’ database does not exist, create it and create a user named ‘root’ with the password ‘root’.

6. That’s it! Now you can start installing your web site. To install a Wordpress installation, take the contents of the Wordpress installer and place them in the ‘htpdocs’ folder of MAMP. The path to that folder is /Applications/MAMP/htpdocs.
7. Now we’re going to run the Wordpress installer just like we would if it was hosted remotely. Since we’re running the installer for the first time we need to navigate to http://localhost:8888/wp-admin/install.php.
8. You’ll be prompted to enter some information. It’s the same information from the start page mentioned in steps 4 and 5 thus the host name is ‘localhost’, the database username is ‘root’, the password is ‘root’, the port (if you’re asked for it) is ‘8889′ and the database name is ‘test’. If you have any trouble with this step consult the MAMP FAQ or if the problem is Wordpress review this page.
9. If you’ve completed the Wordpress installation correctly, you’ll reach a screen that tells you so. From this point you’ll use word press like normal. Your installations url is http://localhost:8888/. And thus, to log-in go to http://localhost:8888/wp-admin/.
10. Remember the path to your files (/Applications/MAMP/htpdocs/wp-content ) because this is where you’ll install plug-ins, templates and widgets just like normal.

II. Upgrading MAMP

After you’ve used the free version of MAMP for a while you may decide that one virtual server isn’t enough. MAMP Pro, the paid upgrade, allows you to run many different virtual servers so that one can, for instance, be a Wordpress installation while another is for Drupal, Movable Type, Joomla or some other CMS. Installing the pro version of MAMP is easy, because if you have the light version…it was bundled in the package and you already have it! Just launch MAMP Pro instead of MAMP and follow the instructions for upgrading or entering your license info.

If MAMP Pro isn’t there get it here.

III. Getting MAMP all Dressed Up

Twinsparc, the makers of Headdress define it’s purpose as enhancing your Mac’s ability to virtually host web sites on a local network. What that translates to is that it allows you to put your MAMP developments in any folder on your computer (instead of only nesting them in the MAMP folders) and to also allows for multiple server configurations. For instance, maybe you want to run a version of MySQL instead of SQLite or a different version of PHP with your CMS because you know your client’s server may be running older versions. Lastly, Headdress allows for simple networking. If you wanted to let a co-worker take a look at what you’ve been working on locally without publishing a live version of the site, you can announce your sites via Bonjour! They’ll receive a link that allows them to view and use the site as if it was live. At $14.99 I’ve found that Headdress is completely optional but incredibly useful and a reasonable accessory to MAMP. Regardless, here’s how to install it so that you can add it to your workflow.

1. Make sure you turn off any running versions of MAMP before step 2.
2. Open Headdress, and close or ignore the initial window that opens (it’s for the system apache and php).

3. In Headdress choose “Open httpd.conf file” from the file menu (cmd + o)

httdp.conf

4. Browse to and select the MAMP apache config file via the path /Applications/MAMP/conf/apache/httpd.conf
5. Now you can use Headdress to setup your sites and they can exist outside the MAMP folder.
6. Turn on MAMP. You’re all set now with a fancy new Headdress for MAMP.

Note: There are currently some known issues with Headdress and OSX Leopard which you can read about at the Headdress Forum.

IV. Adding Dreamweaver

Dreamweaver’s biggest strength has always been that it’s extensible. With WP-Builder you can easily work with Wordpress when you don’t have access to the internet. It’s easy enough to install, just download it, double click and install. Open Dreamweaver and you’ll notice a new Wordpress tab.

wordpress in dreamweaver

Now with your local server running you can make changes to your template php files and stylesheets from Dreamweaver, click ’save’ and instantly view changes by clicking refresh in your web browser!

V. Getting It Off Your Local Server

Moving from your local server to production server is as fairly easy. If you’ve just been working on themes and templates it’s as simple as moving the content folders from one place to another.

If you’ve got something more complex going on then you should follow the following steps for moving an entire Wordpress installation along with the database to the live server.

1. The easy part is to copy the Wordpress installation just copy the contents of your Wordpress root folder to the root folder for Wordpress at the new location. To copy the database it gets trickier but luckily the kind people at Wordpress.org offer tutorials for exporting your database and importing a database.
2. Assuming you’ve successfully eported the database and imported to the new server, you’ll need to proceed with the following. First, update WordPress options with the new blog location by using the following SQL command:
UPDATE wp_options SET option_value = replace(option_value, ‘http://localhost:8888/’, ‘http://www.new-domain.com’) WHERE option_name = ‘home’ OR option_name = ’siteurl’;
2. Next we will need to fix URLs of the WordPress posts and pages stored in the database wp_posts table. URL values in this field are stored as absolute URLs instead of relative URLs and need to be changed with the following query:
UPDATE wp_posts SET guid = replace(guid, ‘http://localhost:8888/’,'http://www.new-domain.com’);
3. If you have linked internally with absolute URLs (which you should never do for many reasons) use the following commands to fix them:
UPDATE wp_posts SET post_content = replace(post_content, ‘http://localhost:8888/’, ‘http://www.new-domain.com’);
4. Test out the new installation thoroughly but everything should be fine, and your CMS should be running live on the new server! Wordpress has a great quide for troubleshooting this process here.

There you have it. With this four steps you’ll speed up your ability to design for Wordpress by working offline with virtualized servers and Dreamweaver.

Bookmark It