Efficient way to edit WordPress themes

Question

I've been editing my WordPress theme templates and CSS manually, in Notepad++, using Firebug to inspect and tweak elements and Filezilla to upload the modified CSS files to my web server. But it seems like a very inefficient way to do it, so I've been searching for a better way.

I have Dreamweaver and tried to set it up with WordPress as the CreativePro tutorial suggested. It works fine with the basic site in the tutorial but not with a full WordPress site with custom theme, multiple posts, etc.

I did some research and the problem seems to be with custom permalinks, as Dreamweaver can't seem to handle them. The tutorial that I followed to do this is http://www.creativepro.com/article/build-wordpress-sites-dreamweaver-cs5-part-2 and the problem that I describe with custom permalinks is explained in http://tutsme-webdesign.info/wordpress-theme-editing-with-dreamweaver/ .

Then I looked for WordPress plugins that might allow me to edit the CSS and preview the results in real time. The only plugins I found were either very outdated or ranked very low with lots of problems.

So, how do you do serious editing to your WordPress themes? What editor do you use? If you work on a locally installed WordPress server before uploading to your web server, what tools do you use to streamline and simplify the download, modification and upload? How is your workflow like?

Answer 1

Delete DreamWeaver right now and do the following instead so that you can edit everything locally and see changes in real-time:

1) Install MAMP so you can run a server locally on your computer and then install Wordpress as you normally would but in a local computer folder

2) Download SublimeText as your code editor.

3) Download CodeKit (Mac-only) and us this to auto-update your browser with changes made to your CSS (otherwise you can use free but less simple scripts like Live-Reload)

4) Google 'setting up workspaces for CSS in Chrome' to figure out how to use Chrome to edit CSS in-browser

5) Learn how to use GIT, a form of version control. In essence it's a repository of all the changes you ever make to your code. When you make a chance, you can 'push' that change via GIT, and have it automatically change that file on your server.

There are free ways to use GIT and to make it push to your server, but then you're getting into the command-line. If you don't want to do that, you'll just need these two things:

a) Tower (GIT client for Mac) - This provides a sexy user interface for interacting with GIT repo's

b) Beanstalk - An online GIT repo that easily allows you to setup automatic deployments to your server each time you make a change via GIT.

(Alternatively you could just re-upload each changed file, but don't do that! It's is seriously worth your time to wrap your head around GIT, which is really simple once you get past the jargon)

Your life will be change SO dramatically. For bonus points, learn how to use SASS :)

Answer 2

To answer the last question: You may find the GitHub application for Windows helpful. (I use the GitHub application for Mac.) https://windows.github.com/