WordPress Development On Your Mac

I admit it; I have a Mac. It’s a MacBook Air of 2013, with plenty of battles behind, including processing quite a few web migrations to WordPress (I lost track of how many) and the development of our plug-ins, Nelio A/B Testing and Nelio Content. The poor thing continues fighting four years later, although it begins to feel a little bit tired.

My first Mac was a black MacBook, back in 2007, before the Apple Stores arrived in Spain. After a few years as a developer on Mac (the last ones working for the web and WordPress), I have some experience with the platform and feel comfortable with it.

Nowadays it is widespread to see developers with Macs everywhere. Still, I think it might be helpful to explain what tools I use in my day-to-day life and what utilities you can find to improve your WordPress developer skills on Mac.

Code Editors for WordPress

The code editor is the holy grail of the utilities needed to develop WordPress. There are many and very good ones, and surely choosing one or the other depends on the developer’s tastes. So I leave you the list here, and you’re the one who decides:

• VIM: the editor of choice for all hackers. You won’t have to install it on Mac because it’s already there. Just open a terminal and type vi. If you’ve never used it before, start with a tutorial like the one I link you here. Note that the learning curve is going to be fun (literally, because you’ll learn it playing a graphic adventure). If you are a master of VIM, your productivity can increase a lot as a developer. I tell you from my experience since my partner David uses it every day and he’s capable of doing magic. Although if you try to pair programming with him you can easily get a stroke.
• TextMate: a simple editor that has been loosing its bellows over the years. It was once a competition of SublimeText, but it seems to have been relegated to a more testimonial position.
• SublimeText: if you are looking for a basic and highly configurable editor that is more user-friendly than VIM, SublimeText can be the editor you need. It’s very popular among WordPress developers, as it has thousands of extensions to make it your precious Swiss knife. I messed with him for a while, but I had problems with updates and almost always had it broken. Still, a highly recommended option.
• Brackets: we are before an editor that is more friendly than the previous ones and with a philosophy very similar to Atom, although somewhat less popular. To be honest, I didn’t know him until I’d documented myself to write this post, but what I’ve seen has been quite enjoyable. It also has most of the typical extensions you need, so it seems worth it.
• Atom: my current editor. The good thing about it is that it comes with several pre-installed extensions that will already be useful, but you can also install as many as you want, as it is becoming one of the most popular editors today. Yes, sometimes it can be a bit slow, but upgrades are getting better and better in terms of performance.
• Visual Studio Code: the latest editor from Microsoft, which works surprisingly well and is open source. Right now it is the most direct competitor of Atom, as its target audience is similar. If you tried Atom and you didn’t like it, I recommend this one, because it has nothing to envy and the number of extensions available is similar.
• PHPStorm: if you need an integrated development environment (IDE), such as Eclipse, undoubtedly the option you will most like is PHPStorm. It has development support functionalities for WordPress and other PHP frameworks. It’s very powerful, but for my taste, it’s a bit heavy and with an old-fashioned user interface. That’s why I stopped using it a long time ago, although I think it’s an interesting option for many developer profiles.

VIM, SublimeText, PHPStorm, Atom,… choose the one you like best and that’s it. As I’ve pointed out, I use Atom right now. I am reasonably happy with this editor and its plugins, which simplify my work as a WordPress developer. Still, I’m looking forward to trying Visual Studio Code, which even if it’s Microsoft’s, looks great.

Version Control Tools

Once you’ve developed code, what you need is not to lose it. For this, you have version control tools like Git and Subversion. And if you also work as a team, it will be even more necessary for you to coordinate everyone’s work, merge code, and prevent some of them from crushing each other’s changes. Both tools are used from the command line, but if you’re allergic to the terminal, here are some graphical interface alternatives for your Mac. We directly use the terminal, but I’m sure you’ll find one of these useful:

• SourceTree: Git client for Mac and Windows from Bitbucket creators. If you find using the terminal hard, from here you can work with Git without any problems. I was using it for a while, but I’m faster using the terminal, so I quit.
• GitHub Desktop: client to connect with your GitHub account. If you host your code repositories there, it can help you control everything from this desktop application.
• Tower: Git client for Mac and Windows with a pretty nice interface. It also integrates with Bitbucket and Github, among others.
• SmartSVN: Multi-platform Subversion client, which also includes file comparison to see code differences.
• Versions: exclusive Subversion client for Mac that makes it easy to work with your SVN repositories.
• Cornerstone: Subversion client exclusively for Mac. Surely the one with the most advanced features, keeping a nice and easy to use user interface.

Today Git is much more widespread than Subversion, although in WordPress it’s not quite like that. To upload your plugin code to WordPress you’ll still have to use Subversion. We use private Git repositories hosted remotely and free of charge in Bitbucket for everything else. Remember that you also have GitHub as an alternative.

Nelio A/B Testing

Native Tests for WordPress

Use your WordPress page editor to create variants and run powerful tests with just a few clicks. No coding skills required.

More Info

WordPress Servers to Work on Your Localhost

In order to develop for WordPress, you will need a local WordPress server. Without this, you won’t be able to test the code of your themes, plugins or whatever you develop, which I don’t recommend under any circumstances. Today, it is much easier to set up a development environment with test WordPress installations. There are several alternatives that I’ll detail here:

• Varying Vagrant Vagrants (VVV): the “official” option for WordPress developers. You will need to have Vagrant and VirtualBox installed beforehand. From there, VVV is installed from the command line, so you will need to have some technical experience. If it works for you, it’s the best environment to use, but sometimes it breaks down without knowing why. And fixing it isn’t always easy. In addition, both the management of new installations and the choice of specific configurations becomes a bit cumbersome if you don’t have a certain amount of control with the terminal.
• Local: does the same as VVV, but it’s a lot easier to install and manage. You will only see one interface with your WordPress installations and you won’t have to worry about virtual machines or configurations or anything else. It is developed by the hosting company Flywheel, but it is free and has never failed to me. I switched to Local tired of getting VVV errors every few days and I am delighted.
• MAMP:  an installable package that includes Apache web server, MySQL database and PHP. The latest versions also include the possibility to opt for NGINX instead of Apache. If you don’t have too much idea about server administration, this option can be interesting because everything is controlled from a single panel. However, you will then have to install your WordPress on the server directly following the instructions from Codex.

I currently combine VVV with Local for my local WordPress installations. To be honest with you, Local is the one that I use the most given its ease and speed.

Design Tools

At Nelio we are not specialists in design, but it is clear that we believe it is a very important aspect and that’s why we do our best every now and then to cover our needs. Here’s the list of tools we know:

• ScreenFlow: a tool to record your computer screen and edit video. We are delighted with it, as it helped us to create the promotional video for Nelio Content.
• Inkscape: a cross-platform vector drawing tool that also works for Mac, although I have to say that it is not very well adapted to Mac OS X. I keep using it because David taught me how to manage it in our college days when we both used Ubuntu and I love it. When they really bring it to Mac natively, it’ll be a luxury, but now at least it works.
• GIMP: image manipulation program that comes from the Linux world and also works for Mac. We use it a lot in Nelio to work with images, banners, and so on.
• Sketch: advanced vector drawing tool. I’ve never used it because we at Nelio don’t have much need for it right now, but I have it on my list of options to try in the future. I see it as a substitute for Inkscape if they finally abandon the port to a native Mac version of this one.

I know, I haven’t added any Adobe tools (see Photoshop, Lightroom, Premiere…), but the truth is that we don’t use any of them, nor have we had any need to use them with the alternatives I’ve explained before. If at some point we specialize more in design, the list will probably grow.

Other utilities for web developers

In addition to all of the above, I don’t want to finish the article without forgetting to list a series of tools that we find very useful when you are a WordPress web developer. Here they are:

• Poedit: internationalization is very important. If you have to translate your themes and plugins, this is the perfect tool to do it. In addition, the Pro version has support for WordPress themes and plugins.
• Postman: many times you need to make HTTP requests to servers to verify that both calls and responses are correct. You can use wget or curl from the terminal, but with Postman you can simplify the process thanks to its interface.
• Transmit: in order to upload files to a remote server or download them, you have the option to use ftp or sftp (or even lftp, of which one day I will speak) from the terminal. However, I like to use Transmit to save my login passwords and work more comfortably. Another option is Filezilla, although the Transmit interface seems more modern to me.
• Node/NPM: In Nelio we use this JavaScript package manager to manage dependencies in the Nelio Content cloud code. It makes it a lot easier to be more efficient by controlling packages and new versions of these.
• Gulp/Grunt: automating tasks during development (minimizing files, merging them, etc.) is something that saves you time and simplifies your life. At Nelio we use gulp and grunt to automate certain tasks related to the development of our plugins.

If we come up with more utilities, we’ll add them here.

Personal Conclusions

Today you can have a perfect development environment for WordPress (or the web, in general) on any platform, whether Mac, Linux or Windows. Many programs are available for more than one platform, so the most important thing here is that you choose those you feel most comfortable with.

With minimal tools, i.e. a local WordPress editor and server, you have more than enough to get started. However, as you become more professional, you will expand your toolkit with more options. Our arsenal has been growing as we developed first Nelio A/B Testing and then Nelio Content.

If you use tools that do not appear in this list, please leave us a comment and we will update the article. I’m sure there are many more utilities out there to help you with WordPress development that’s worth knowing. That’s how we all learn.

Featured image by Mikaela Shannon via Unsplash.