Long gone are the days when WordPress was merely a blogging platform. By now it’s a full-fledged content management system used by millions of websites and powers a healthy chunk of the Internet.
Consequently, the number of people whose employment somehow revolves around WordPress is also steadily increasing. From hosting providers, to technical support, to *cough* WordPress bloggers—more and more people around the world make a full-time income from the platform.
And it pays off. Just look at this developer from Pakistan who is building a three-story house for his entire family after selling just one WordPress theme. In fact, web designers and WordPress developers make up a large share of those earning money with the CMS.
If you are thinking about joining them, you are in luck. Today we are looking at web development tools for WordPress.
WordPress Development Tools at Your Disposal
The tools mentioned in this list will cover a lot of different disciplines of web development. Some are smaller, some bigger, yet all of them are designed to make the life of those building websites with WordPress a little easier. Where possible I tried to find free tools, but a bunch of premium offerings also made it to the list.
Browser Plugins
1. Firefox and Chrome Developer Tools
The two major browsers both come with built-in developer tools. They enable you to view and edit the HTML and CSS of any site, debug JavaScript, and more directly from your browser window. To access the tools, merely right click on an element of any webpage and choose inspect element from the menu.
(Daniel Pataki has a great article on Chrome Developer Tools on WPMUDEV.)
2. Firebug
This Firefox extension is a favorite of many WordPress designers and developers. It has much of the same functionality as the developer tools and allows to you make live changes to any page. Whether you are going for the extension of the native tools is up to you. If you opt for Firebug, be sure to check out the Codeburner extension, which adds reference material for HTML and CSS.
3. Web Developer
Web developer is a recent discovery of mine. It adds a wide range of development-related functionality to Firefox. I mainly use it for its ability to display the size of my browser window or set it to custom sizes (very helpful for responsive design). Highly recommended!
4. MeasureIt
Tired of holding a real-life ruler to your screen to check whether elements on your website actually have the same distances? MeasureIt to the rescue! Never second guess yourself again. Its available for both Chrome and Firefox.
5. Dimensions
This extension for the Chrome browser is similar to MeasureIt. Determine any distance between images, input fields, buttons, videos, and more. It can also be used for website mockups in JPG or PNG format that have been loaded into the browser.
6. WordPress Admin Bar Control
Is the WordPress admin bar getting in the way of your design efforts? It doesn’t have to be that way. This plugin lets you toggle it on and off with one click. No need to access your profile page. What a relief!
7. WordPress Site Manager
Constantly logging in and out of different WordPress websites can be a hassle. That’s why this extension stores your login information and gives you direct access to the main pages of all your sites. Plus, it adds extra functionality to the WordPress editor.
8. WPSniffer
“Man, this site looks awesome! I wonder what theme they are running on…” Good news, you can stop wondering. Find out the active theme of any WordPress website with WPSniffer and shamelessly copy their design.
For more WordPress-specific Chrome extensions, check out Shaun’s excellent article 12 Google Chrome browser extensions for WordPress users.
Design
There’s no denying that good design is a crucial part of web development. You can have all the functionality you want, if your site is unappealing, visitors will get the hell out of there. The following tools will help you create a great exterior for your creations.
9. Pictura
This free tool allows you to access the Flickr image database directly from the design environment. Locate images by license and use them immediately. By the way, for free image sources, check out this article.
10. Free Icon Maker
Need icons for your website or web app? Free Icon Maker has got you covered. Pick an icon, add effects, and download instantly. No payment required, however you will need to register to download.
11. Font Awesome
In case the above resource is not enough, Font Awesome is a library of pictograms that show common web-related actions. You can download the entire stack for free as scalable vector icons and customize them to your liking via CSS. Can you ask for more?
12. Fontello
Should the complete library be too much for you, this service can help. Find icons from different font icon libraries (including Font Awesome) and only download the ones you need. In different sizes, too!
13. Plain Pattern
This handy tool allows you to quickly create seamless SVG-based patterns to use as website backgrounds. Choose from a few preset patterns or upload your own. The interface is super intuitive and easy to use.
14. uilang
For a more dynamic design, uilang is a UI-focused programming language that helps you add interactive elements to your site. Their Transpiler easily translates animations created with uilang into JavaScript.
15. Impulse
Speaking of things that move: The Impulse JS library gives you the tools to create dynamic physics animations right on your website. Falling, springing, bouncing, accelerating and decelerating—make your objects move around the screen at your will.
Development
Code is the heart of any website. There’s a reason why the WordPress motto likens it to poetry. Use these tools to speed up your literary outpourings.
IDEs
In case you didn’t know, IDE stands for “Integrated Development Environment.” These usually consist of at least a source code editor, build automation tools, and a debugger. To be honest, I don’t use these myself, but I’ve polled the developers in my environment and the below candidates came out on top.
16. WebStorm
To quote one of my developer friends “Best IDE EVER!” WebStorm offers code auto-completion and on-the-fly error detection. Originally made for JavaScript, it also works for HTML and CSS. It isn’t free, but a 30-day trial is available.
17. IntelliJ IDEA
From the same maker as WebStorm, this IDE is also more focused on JavaScript and different Java environments. However, at the same time it also offers a bunch of developer tools for those working with HTML, CSS and PHP. Again, it’s paid but you can test it for free for 30 days.
18. Synchi
Who says an IDE has to be an external application? Why not create one inside WordPress? That’s exactly what Synchi does. The plugin gives you syntax highlighting, auto-completion and other powerful development features right in the WordPress backend. Use it in the plugin, theme and WordPress text editor as well as inside text widgets.
19. Notepad++
For more casual coding, Notepad++ is a great and free source code editor. It has excellent syntax highlighting, auto-completion, and more. It is one of the WordPress development tools I use pretty much every day. An alternative for Mac OS X that I have heard good things about is Komodo Edit.
20. Codekit (Mac)
Codekit is an app built to help web designers build sites faster and easier. Drag and drop your project in there to get started. The application compiles a wide host of preprocessing languages (see below) and can refresh browsers across many devices for testing purposes. Tuts+ has a tutorial on how to use Codekit for local WordPress development. An alternative for Windows is Prepros.
21. Duo
Duo is a package manager that helps to organize and write code for the frontend. It allows you to pull JavaScript, HTML, and CSS from different sources (including GitHub) for quick proofs of concept as well as larger web applications.
Virtual Servers
22. XAMPP
The AMPP part of XAMPP stands for “Apache, MySQL, PHP, Perl.” The application lets you create an offline server on your computer for development outside of a live site. No need to be connected to the Internet. Alternatives are WampServer (for Windows) and MAMP for Mac.
23. InstantWP
For some quick and dirty plugin and/or theme test, InstantWP provides a WordPress installation within just minutes. Launch the application to create a temporary development site. You can even carry it around on a USB stick.
Code resources
24. CSS Guidelines
Maintained by Harry Roberts, a frontend architect from the UK, CSS Guidelines provides advice on how to properly code manageable and scalable CSS. Great stuff for beginners and advanced developers alike. The resource is free but donations are welcome.
25. GenerateWP
Do you ever find yourself wishing you didn’t have to write all that WordPress code manually but that an app could do it for you? So did the makers of GenerateWP. Pick one of their tools to create whichever WordPress element you need, fill in a form, then copy and paste the code to your site. Easy peasy.
Preprocessors
Here’s another word I learned recently. Preprocessors help speed up the development process by streamlining CSS markup. They allow you to write it up like programming including variables and functions, which are then compiled into valid CSS.
26. SASS
SASS (Syntactically Awesome Style Sheets) is the first one on the list. It is compatible with all versions of CSS and has been around for more than eight years. To learn more about SASS, check out what Brandon Yanofsky had to say about it here on Torque.
27. LESS
LESS is similar to SASS. It allows variables, mixins, functions, and other shenanigans to optimize your coding process. It can be used in the browser, via command line, and with a bunch of third-party applications (such as WebStorm).
28. Stylus
Next up is Stylus. Inspired by SASS, it aims to reduce the amount of code you have to write to a minimum. The homepage gives a nice breakdown of all the elements you can omit if working with Stylus. It needs Node.js to work.
Debugging
Debugging your work can be a pain. The following tools are meant to help keep you sane during this process.
29. Debug Bar
When installed on your WordPress site, this plugin will add a debug menu to the admin bar that shows query, cache, and other debugging information. WordPress.org is involved with the development of this plugin, so the quality should be good. However, it hasn’t been updated in a few months.
30. Theme Check
This plugin checks your theme with the same automated testing tools WordPress.org uses for theme submissions. This allows you to make sure everything is up to the latest practices and standards before handing it in to the WordPress repository.
Testing
With a multitude of browsers and devices available today, a website has to work in many environments. Since nobody can expect designers and developers to have the hardware for every different use case, testing tools that can act “as if” come in handy.
31. Edge Inspect
A product by Adobe that allows you to preview your site across multiple devices at the same time. Wirelessly connect multiple iOS and Android devices to your computer, see results from code changes in real time, and grab screenshots from any connected device. This tool is free with an Adobe ID.
32. Ghostlab
If cross-device testing is what you are looking for, look no further than Ghostlab. Test your website on desktop and mobile devices at the same time with synchronized browsing. It also does JavaScript and CSS debugging and compiles SASS, Jade, and Typescript. Unfortunately, Ghostlab is not free, though.
33. Browserstack
Cross-browser compatibility is a big concern and a hassle to test. Not so much with this handy tool. Check your site across 700+ browser and device combinations, including phones and tablets. There’s a free trial available.
34. BugMuncher
One of the most difficult parts of development can be customer and user communication. Trying to figure out what exactly the problem is can easily result in an avalanche of emails. Not so much with BugMuncher. Let users show you exactly what is wrong on the site via screenshots and automatically get information about their browser setup. Sounds like a dream, doesn’t it?
35. UptimeRobot
Making sure your website is readily available is just as important as testing its code. That’s where UptimeRobot comes in. The free service lets you implement up to 50 monitors that will check the sites in question every five minutes. If downtime is detected, you are alerted via email.
Productivity
The work of a developer does not end with the actual development and design process. Working with and for others requires a wide range of additional tools for communication and workflow.
36. Trello
This project management tool makes being organized and staying on top of things a cinch. Think of Trello as a digital board filled with index cards that you and others can drag around at will. Whether you are managing freelancers or keeping up to date with client feedback, this tool makes it fun.
37. Google Apps
Google’s free suite of applications goes beyond their excellent email service. Create and share files with others, hold video conferences for free, create surveys, and keep up to date with Google calendar. I know people who have managed an entire startup in Google Drive.
38. Evernote
This service is awesome for collecting all the information you need in one place. Organize project materials, client specs, outstanding invoices, and more. Save anything you find on the Internet with the handy browser extension. Evernote also syncs across all your devices, too!
39. Dropbox
Dropbox is cloud storage with cross-device access. Great for sharing material with clients and to access important files from virtually anywhere. It also integrates well with a host of other productivity apps.
40. Time Doctor
This tool will tell you exactly how you or your team are spending your time. Track what you are doing throughout the day and see where your workflow could be improved. Also useful to track how much time you spent on each client in order to write invoices. Another great time tracker is Toggl.
41. Shake
Talking about spending time for clients: If you are having a difficult time with the legal side of business, Shake might be able to help. Create binding legal agreements with a few clicks, for free! At least with a personal account.
In Short: Tools for WordPress Developers Abound
With more and more people in the WordPress game, the number of tools available to developers is steadily increasing. From browser plugins over standalone IDEs, to small design resources, it’s never been a better time for those making websites for a living.
The above list is by no means exhaustive. There are many more tools available and more will hit the markets in time to come. You don’t have to jump onto every bandwagon and familiarize yourself with every app out there. Just try something out, see if it fits your particular workflow, and keep it if it does. Happy coding!
Are you a WordPress developer? What are your favorite tools to make development easier, quicker and more productive? Let us know in the comments.
Nick Schäferhoff
Nick Schäferhoff is an entrepreneur, online marketer, and professional blogger from Germany. He found WordPress when he needed a website for his first business venture and instantly fell in love. When not building websites, creating content or helping his clients improve their online business, he can most often be found at the gym, the dojo or traveling to other countries with his fiancé. If you want to get in touch he would love to hear from you through his website.
The post 40+ Awesome WordPress Development Tools appeared first on Torque.