How to develop a theme offline
When you’re working on your website it is often best to test locally and then upload to your website. Either that or you should have a test site of some sort. Working on your website whilst it’s live is just asking for problems (as I’ve found out a number of times… I’ll learn eventually).
To test on your local computer requires a few things.
- A copy of Wordpress - easy, grab one here
- A decent text editor - I like PsPad but you can use whatever you prefer
- A local webserver - this is the most complicated bit but is worth doing so read on to find out how.
Local Webserver (EasyPHP)
I should probably also point out that this post is a guide for getting set up to develop themes on a pc - sorry Mac and Linux users.
Download a webserver package. You want one that includes a server (normally Apache), and installers for both MySQL and PHP. There are many of these packages around but my fave is EasyPHP (although it hasn’t been updated in a while). Click here to download EasyPHP. If you have one you prefer then please do let me know in the comments.
As the name suggests it’s very easy to use EasyPHP. Just run as you would any other installer and it’s there. Now run the app (start->EasyPHP etc) and yourlocal copies of Apache and MySQL will be started up. You can now browse your brand new local webserver from the wonderfully titled url - http://localhost/
Once you have the package downloaded and installed you need to get Wordpress up and running so open up your previously downloaded version and extract it to your new local directory (most likely c:\program files\easyphp\www\ ).
Before setting up Wordpress we need to create a database. To do this open up the EasyPHP window and administration. This will take you to the admin panel on your localhost (probably - http://localhost/home/) from there click “mysql manager”, and you will be taken to a copy of phpMyAdmin which has rather nicely been installed for you. From the phpMyAdmin splash page create a new database making sure to remember the db name/
Now you can set up Wordpress using the fabled 5 minute install. Browse to the new Wordpress folder - http://localhost/wordpress/ and follow the instructions. EasyPHPs database defaults are host: localhost, username: root, and the password is blank. You can also enter the name of the database you just created.
Once complete you are good to go. Just treat the wordpress folder as if it were a remote website folder. You can install plugins, and themes, through windows explorer and start work on your local development. There are however some more changes you can make that will make the whole process even better still…
Permalinks
To make the most of your blog, you really should enable permalinks, which means enabling mod_rewrite on the server. Most web hosts have this turned on, but it’s something you will need to do yourself with your new local server. To do this run EasyPHP and click the “E” on the control panel. Select configuration -> Apache. This will open the httpd.conf file. Now search for and uncomment (uncomment means remove the #) the following two lines.
- LoadModule rewrite_module modules/mod_rewrite.so
- AddModule mod_rewrite.c
Restart Apache, rewrite your permalinks (from the wordpress admin) and you’re all set.
Let me know how you get on in the comments.
Comments »
I am a bit of a novice, and have a clarifying question…
Once the site is “ready” to upload to my “real” server and go live, is there a simple way to update all of the directory specific references (i.e. permalinks, etc). My understanding is that WP is very directory focused, and all page/link/content references are going to follow the directory structure. I like the idea of offline development; but hate the idea of diving into code to change pointers, etc. Recommendations?
THANKS
If you’re creating your Pages and Posts via Wordpress, you just need to port the database from your staging area to your live area and your links should work. If you hard-code any other links in your templates, just make sure the references are absolute and always start at the root, in case the files need to be moved later on.
Assuming you use Wordpress built in commands for creating links just hitting the “update permalinks” button in the Wordpress options will fix everything. I would suggest always developing css with the images linked relatively, and then everything should “just work”
Thanks Darren & Ben… this helps quite a bit. I will most likely use a premium theme as the basis for the site, and was planning on doing any “customization” via the WP interface. Now to the hard work of selecting the theme - and filling it with content!
Thanks … I had been working on my blog ‘live’ because I thought that setting up the server (etc) was going to be a messy ordeal. This looks simple enough - I’ve downloaded the recommended files and will get this together later this week (I have other deadlines making whooshing noises as they go by right now). My blog is stick ugly, but doing a redesign / serious modification has had to take a back-burner to content. Now I can work on it a bit at a time and not have to worry about shanking the live site.
Thanks, that is a clear explanation. Once you get going with a WP site/theme how do you then update what’s on your host with what’s on your home PC? Is that easy? I guess you just have to upload the tweaked files as you go but WP has so many it’s difficult to know which is which.
Martcol - I wouldn’t go around modifying wordpress core files. Only edit themes and plugins. It makes things a lot easier when it’s time to update - and updating plugins and themes is easy. Just grab the plugin and theme folders and ftp them