How To Setup A WordPress Development Environment For Website Design

Time and again I’ve had the need to install a development environment on my system, especially when I’ve formatted my system or have moved to a new system and also for training others. While there are several programs, settings and common scripts that I install on a new system, I don’t necessarily install them all (until things naturally grow, build up and find a place on my system).

Here are a few things that are a must on my system that help me design, develop and troubleshoot things — from WordPress to my Amazon Cloud Services servers.

Previously in series: Assessing Project Requirements And Establishing Scope Of Work For A Website Design Project

1. Code Editors: Visual Studio Code and Atom

Visual Studio Code is my code editor of choice for any platform. After using Notepad++ for several years on Windows, I had a tough time finding a good code editor for my MacBook Pro. I tried every possible variation. I must say SublimeText3 is pretty good and I used it for a while. But I think we are in an age when operating systems and code editors should be free. I must mention that I avoid the Insiders version of Visual Studio Code since it doesn’t play nicely with plugins and is pretty much useless. I’ll cover the various plugins in another post.

I also use Atom as my secondary text editor and I typically use it to quickly edit files so that I don’t pollute my Visual Studio Code workspace. I have a set list of required functionality that I’m able to achieve through plugins. But that’s for another post.

2. Browsers: Google Chrome and Firefox

After Firefox Quantum went live, I had no reason to stick to Firefox as my primary browser. It’s basically the ugly clone of Google Chrome. However for times when I just can’t use the horrible tabs of Google Chrome or I want to open another session for research on a topic, I find it handy to have an alternate browser available.

3. Graphics: Photoshop, Illustrator, Inkscape, Gimp

For the graphics I’d recommend using Photoshop and Gimp for raster graphics and Illustrator or Inkscape for vector based graphics. I like to have precise control over the graphics software and I’ve used these applications to create all sorts of graphics from web to high-quality prints.

4. SSH and File transfer

  • FileZilla: FileZilla is an FTP client for transferring files to and from your server. This is my primary application for file transfer.
  • WinSCP: For all those times when FileZilla doesn’t do it, I use WinSCP. Typically you wouldn’t need it until you are stuck, probably never unless you are me.
  • Putty: For the useless Windows machines I use Putty else osx and linux have ssh by default and I feel right at home with the command line.
  • PuttyGen: Again the ugly duckling clone of ssh-keygen, Puttygen makes it easier to generate or change the format of the ssh keys. Must have on dumb Windows machines.
  • WinGrep: My secret tool of choice when I want to spy on code files and find what exactly the code is doing.
    Again, this is for Windows systems only. On *nix systems the more familiar cousin is grep tool and does everything that you ever want to to with WinGrep.

5. LAMP Server: Fedora

I don’t use a local LAMP configuration since I work across several machines. All I do is use my server from any machine that I’m using. Servers are for that. If you are just starting out you could install something locally like Docker or any virtual machine of your choice.

I could just as easily use Debian or FreeBSD if it came to that. However I find that Fedora is the one to adapt the cutting edge of technology. And when it comes to running an enterprise level LAMP server, I like to have the latest features available. I don’t necessarily upgrade every fortnight. But when I do, I do a full server backup because it’s not uncommon to burn fingers with cutting edge in server OS. Changes from Fedora trickle down to RHEL and finally to CentOS.

My server configuration is premium too and toasts up other premium WordPress hostings.

6. Tools for diff, mass search and replace

On Windows the definitive answer is Windiff and DiffMerge on OSX. For a search and replace solution I use MassReplaceIT (OSX). Visual Studio Code also allows you to do find and replace and is easier too.

7. Other Applications

Other than the above I use several other applications to allow me to manage my hosts file, crawl the website and generate SEO reports. Depending on your OS and preferences you may want to install and experiment with one or more of the following: Integrity (OSX), Screaming Frog SEO Spider (Paid), Xenu.

If you are on Windows you will have to install git separately for version control. Get git from here.

8. Popular fonts

And this one I almost forgot. While we are at it, I also like to install some of my premium, paid, free fonts to have them available while I’m designing graphics for the web.

Posted In:

UX UI Front-end Development, Diy-design

Comment on How To Setup A WordPress Development Environment For Website Design

Your email address will not be published. Required fields are marked *