PHP (Wordpress) development using Eclipse and XAMPP
As can be determined from my other posts, I’m a Java Developer by trade and Eclipse is my editor of choice. Now I have gone to the darkside now and then for some good out of the box software, such as Wordpress, which as you may know is written in PHP. The main reason I chose Wordpress was because of it’s great community, it’s focus on best practices, and the huge number of plug-ins enabling any blog functionality you could imagine, this mix just doesn’t seem to be present in an Open source Java-based blog software package. So to the point, I want to be able to develop my Wordpress themes, and any other PHP projects for that matter, in the same manner I develop Java applications - In my favorite IDE, which is loaded with features we won’t discuss here, with the ability to test the changes locally before I promote them to production. Using the Presentation tab in the Wordpress admin console is not an optimal solution or a good development practice. Now these instructions aren’t for the faint of heart and I will assume that you most likely have some sort of programming background, or general cognitive skills and that you can get by without a bunch of pretty pictures and click this, click that, click ok, hopefully you’ve installed shit before. These instructions are geared towards Windows, nobody’s perfect, but all the software used here is available for Linux, you may just have to do a little work to make that jump.
List of installs, you can stop here if you don’t need me
XAMPP Lite 1.6.5
JDK 1.6
Eclipse 3.3
PHPEclipse 1.1.8
Wordpress
MySQL GUI Tools
What you need to install, the must have tools
- Download and install the latest JDK, if you never ever plan to do Java development you can get by with just the JRE
- Download and install Eclipse 3.3 the link that says Eclipse IDE for Java EE Developers, it’s not really an install, it’s a zip file. Unzip it to the root of your c: or d: or whatever makes you happy, we’ll assume c: and you’ll end up with something like c:\eclipse.
- Download PHPEclipse and unzip it to the eclipse directory, ex. c:\eclipse.
- Download and install Xampplite, this is a zip also, treat it like eclipse and unzip it to the root of your c: or d: or whatever, the directory will be something like c:\xampplite.
- Download and install MySQL Gui Tools, this is actually an installer, you can let it install to the default location with the default settings, especially if your lazy like me. This one could be considered optional if you just prefer to PHPMyEclipse that’s included with XAMPP.
Setup your project in Eclipse
- Open Eclipse, you may need to dig in to the c:\eclipse directory or wherever you unzipped it and create a shortcut of eclipse.exe. Choose a directory when prompted to store your workspace, I typically use c:\web, we’ll assume you did too, it’s important to remember where your workspace is for later configuration.
- Go to Window -> Preferences -> PHPeclipse Web Development -> PHP External Tools -> XAMPP
Make sure the XAMPP Start and Stop lines point to where you unzipped XAMPP earlier
I just had to change the xampp directory to xampplite. - Open the PHP Perspective by going to Window -> Open Perspective -> Other -> PHP
Right click in Navigator New PHP Project, give the project a name that makes sense, this is where your code is gonna go - You can leave Eclipse open, we’ll come back to it to set up your project.
XAMPPLite and Host Entry Configuration
- UrlRewrite is disabled by default in XAMPPLite, if you’re going to use pretty url’s for your permalinks in wordpress or any type of SEO friendly urls that will involve rewriting you’ll need to enable it. To enable go to c:\xampplite\apache\conf\ and open httpd.conf with your favorite text editor, uncomment the line LoadModule rewrite_module modules/mod_rewrite.so by removing the # sign at the beginning of the line.
- The next thing you’ll need to figure out for yourself is what you’re planning to use as the url to access your individual projects locally. I use a scheme like local with my site name, for example http://localgreatwebguy. You don’t have to do this, but I have more than one project and I only want to do this configuration thing once and focus on the more important things like writing code and xampp is gonna need it to get things straight and give you the flexibility you need.
- Now that you’ve picked out your name you need to set up a host entry for it, in windows you’ll open the file c:\winnt\system32\drivers\etc\hosts with notepad (special note for Vista you’ll need to open notepad as an Administrator, to do this right click the Notepad in your program list and choose Run as administrator), depending on your installation some windows flavors may have their system32 folder in c:\windows, I’m sure you’ll find it. With the file open add an entry at end of 127.0.0.1 line, after a tab with the name you chose for your application ex. 127.0.0.1 localhost localgreatwebguy.
- Now we need to set up a virtual host in apache, open
c:\xampplite\apache\conf\extra\httpd-vhosts.conf with your text editor
again, there’s an example already in the file, we’re gonna modify it to
look something like this:
- NameVirtualHost *:80
- <virtualhost *:80="">
- ServerName localhost
- DocumentRoot "D:/xampplite/htdocs"
- <directory d:="" xampplite="" htdocs="">
- Options Indexes FollowSymLinks Includes ExecCGI
- Order allow,deny
- Allow from all
- </directory>
- </virtualhost>
- <virtualhost *:80="">
- ServerName localgreatwebguy
- ServerAlias localgreatwebguy
- DocumentRoot "d:/web/greatwebguy"
- ServerAdmin webguy@greatwebguy.com
- <directory d:="" web="" greatwebguy="">
- Options Indexes FollowSymLinks Includes ExecCGI
- AllowOverride All
- Order allow,deny
- Allow from all
- </directory>
- </virtualhost>
Some things to note in the above VirtualHost configuration, the first virtual host is to keep the XAMPP console in tact. which offers PHPMySqlAdmin and some other tools. The second VirtualHost is the setup for your project, the ServerName and ServerAlias should match what you set up in your host file. The DocumentRoot and the Directory should match where your project is stored by eclipse, which is a combination of the directory you chose as a workspace and the name you gave the project you created. You can also get away without specifying the ServerName and changing the Directory to just “/”, it works both ways I just rather be verbose about it.
Start XAMPP in your workspace
- You’re to the point where you can run XAMPP and you can start configuring MySQL and drop some code into this project. First things first, close everything but Eclipse, make sure you saved everything and you didn’t fat finger your VirtualHost configuration, host entry, or project name, it’s key that they match. Switch to the PHP Perspective, if you’re not already there in Eclipse
- Start up XAMPP with the
icon in the top left of your Eclipse environment. - You should be able to open a browser and go to http://localhost to see if XAMPP started properly.
Regular PHP Projects
Start creating PHP files in the Navigator and checking them to see if they run at your local url, you’re on your way, you can also create databases to run locally in XAMPP, which you’ll see we do below for Wordpress.
New Wordpress users
- Download and unzip Wordpress, you’ll need to pick a directory to unzip it to first because it’s packaged with a path of wordpress. Once it’s unzipped open the wordpress directory and drag and drop the contents directly to the project in the Eclipse navigator, the files will copy into the project.
- You’ll need to create a new wordpress database, you can either do this by opening the SQL Administrator that was installed with the GUI tools, I prefer this method for level of control, or the quick and dirty, go to http://localhost/phpmyadmin/ and create the user and database from there. In PHPAdmin click Privledges -> Add a new User, give the user a name and password and place the radio in Create database with same name and grant all privileges then click GO (like I said, quick and dirty).
- If you decided to use MySQL Administrator you’ll need to login to localhost with a username of root and a blank password, you’ll need to create a Schema under Catalogs first, then create a user and give the user priveledges under User Administration, you’ll get a service error when you login, but you can ignore that.
- Now that you’ve created your database, you need to configure wordpress. In Eclipse, in the root of your project, you’ll need to first rename wp-config-sample.php to just be wp-config.php. After this is done open wp-config.php and fill in the database, username and password you set up in MySQL.
- Now go to your local url, ex. http://localgreatwebguy and follow the prompts for the wordpress set up, now you’re on your way.
Existing wordpress install
- I don’t want to go into too much detail here, so here’s the gist of it. Back up your remote wordpress database, restore it to XAMPP using the MySQL Administrator tool, you’ll need to duplicate the user you use for your remote wordpress database in User Administration locally.
- Download your existing site and copy it to the project you setup above in Eclipse, you’re wp-config should be straight if you had localhost specified for your database, otherwise change it to localhost.
- Open the MySQL Query Browser (also can be done with PHPMySQLAdmin)
and run the following update to change the home and siteurl to your
local url, you won’t be able to get to your site without doing this.
- update wp_options set option_value='http://localgreatwebguy' where option_name in ('siteurl','home')
You’ll replace option_value with your local site url, that you’ve specified everywhere else in the configuration.
- You should be able to access your blog locally now and do any theme development you desire.
Now that you’re all setup to develop your own Wordpress theme locally check out this article on Deziner Folio to get started writing your first Wordpress theme. This is also a nice sandbox to test plugins before you install them on your production site, if you break it locally you have some time to react and fix it before you take it live. Enjoy!!
