Tips and tools for professional WordPress website development

[sowmedia_posttemplates_heading tag=’h1′ link_apply=” link=’manually,http://’ link_target=” style=” size=” subheading_active=” subheading_size=’15’ margin=” margin_sync=’true’ padding=’10’ color=” custom_font=” av-medium-font-size-title=” av-small-font-size-title=” av-mini-font-size-title=” av-medium-font-size=” av-small-font-size=” av-mini-font-size=” custom_markup=” av_uid=’av-k7q1bh6w’ custom_class=” admin_preview_bg=”][/sowmedia_posttemplates_heading]

We see more and more often that internet businesses choose to use WordPress as standard CMS to build websites. We also come across many freelancers, just starting out, who place their focus entirely on WordPress. In this article we will make an summary of the best tools, techniques and plugins for developing WordPress websites that we have picked up over the years – and that we wish someone had shown us ten years ago when we first started working with WordPress.

Content

WordPress development tools

Over the years we’ve tested, used and thrown away lot of development tools. Which tools do we still use for developing WordPress websites?

Google Chrome
Google Chrome has a powerful set of development tools that come standard. You can make CSS changes from the element-inspector, which means that you see the effect immediately before you make any changes in the css files. You can view existing JavaScript variables from the console or run new scripts. You can also view saved cookies, check the headers to see if your page is being cached and more. Mozilla Firefoxis a good alternative as well and offers many similar functions.
Sublime/ Coda
Everyone has their own favorite text editor, but there are two that really stand out for us: Sublime and Coda. An important advantage of Sublime (Windows / Mac) is that it is that it is easy to expand, while Coda (Mac) is already very complete. In both editors it’s possible to change files directly on the server. This makes doing small, quick changes very easy.
FileZilla
Maybe obvious, but maybe not at all. We use Filezilla daily for quick and secure FTP connections with our customer’s servers. Easy to use and ideal for quick changes. We do advise setting up a good version managed GIT workflow for bigger projects.
Browserstack
You can use Browserstack to virtually test a website on any imaginable device. Like all desktop browsers on multiple Windows and OSX versions, but also all known Android devices, iOS devices and tablets. This is ideal for responsive tests, because simulations for mobile devices in desktop browsers tend to lack details. Browserstack also offers a Chrome extension, that you can use to simulate any website you visit on a different platform.
Ghost Inspector
This fantastic Chrome extension makes it possible to record a numbers of steps on your website (for example: “visit homepage, click on ‘contact’, scroll down, fill in form”). The operations in these records are then regularly run by Ghost Inspector. If there are any abnormal results (for example a page is missing or the layout is different) you will receive a notification.
Photoshop
Although you can do a lot in WordPress itself, Adobe Photoshop remains indispensable to our work. This is the favorite software package of everyone of our team members who works on design.

Standard plugins

Although every website is different, there are a few plugins that we use for every project. That is why we always install them for a new project. If we end up not using them we can always remove them:

Avia Framework
This visual block builder is not available as separate plugin, but built into the Enfold theme (Dutch link). Very user friendly and makes it possible to build up content quickly.
Gravity Forms
The most comprehensive form building plugin we know, with conditional logic, import/export function, various notifications etc. Many themes take this plugin into account in their styling.
io
Make sure you have this plugin running before you upload your first image. That way you keep everything optimized.
Akismet
Reduce spam on your website. Really a must-have.
Yoast SEO
Helps you fine tune your SEO settings globally, and to easily make changes per page, to things like title and meta-description.

Developer plugins

There are many plugins for WordPress that simplify the development of your website. The most common plugins are listed here.

Password protected
Protect your website with a password to prevent search engines and unwanted visitors from taking a look at your website before it’s ready.
Debug Bar
Want to dig a little deeper into the code? The debug bar adds a button to your admin bar you can use to read various server variables, warnings,errors, queries and requests. The Actions and Filters Addon makes it possible to see which hooks were triggered on your page.
Query monitor
This plugin offers many of the same functionalities that the Debug Bar does, but also makes it possible to do targeted searches of the queries that were carried out, for example per plugin or kind of query, as well as sluggish performance.
Custom Post Types UI
With this plugin you can easily make extra custom posts types. WordPress offers a number of posts and pages, but you may need an extra post type at times, for example ‘books’ for a kind of library. When you have set up the post type this plugin will have to remain active. To keep the number of plugins at a minimum and thus your website performance optimum we prefer adding post types via GenerateWP(see the ‘Cheatsheets’ below).
Advanced Custom Fields
By default, you have a limited number of fields at your disposal in a message, page or custom post.Advanced Custom Fields (ACF) adds all sorts of extra fields; date planners, color pickers, taxonomy links, fields for extra images, you name it. ACF also works very visually and intuitively, so that you can prepare even complicated custom post constructions without using a single line of code. To then be able to use all the custom fields and show them on a page you can use short codes, or change the templates.
FacetWP
This plugin allows you to create different filters to expand the search option for messages, pages and custom posts. This way your visitors are not only able to fill in key words in the search bar, but can also click on taxonomies (categories or tags) in a drop down or a selection box, to further specify the search results. Very interesting for large databases, with, for example, thousands of articles. You can put FacetWP to work, just like ACF, by using short codes and templates.
SearchWP
Would you rather improve the standard search function in WordPress? Then SearchWP is our favourite This plugin indexes all of WordPress so that the results can be shown quicker. You can set the index to your own preferences. Choose, for example, which types of posts will be searched, which fields in a post are important or in fact irrelevant, whether or not to search for partial matches and much more.
P3 Profiler
Is your website getting slower and slower? Use the P3 profiler to measure which plugins have the most impact on your load time. Sometimes it can help to get rid of a few plugins, to improve your website speed. Another solution is to choose super fastPremium WordPress hosting (Dutch link).
Broken link checker
Before going live check to see if all the links on your website still work. Not missing anything, all external pages still available? You’ll get an e-mail if a link doesn’t work. You can even choose to have the check done regularly.
Redirection
When you place your website online will you be replacing an old website?The older website has built up value in the search engines. To maintain as much of this value as possible you can redirect all the URL’s from the old website to the corresponding pages on the new website. This is a lot of work, but it is worth it. You can use the Redirection plugin, but in some cases a .htaccess file as well. Sometimes you can use one redirection rule to reroute multiple pages by using regular expressions (see the ‘Cheatsheets’ below) Dutch link.

Cheatsheets

There are many resources online dealing with developing websites, CSS procedures, WordPress tweaks, typography etc. Below you will find a handy overview of cheatsheets we’ve saved in our favorites. Always good to have on hand.

Golden Ratio Typography Calculator
Can’t figure out why your text is not very readable? Check your line spacing and font size with this tool. It will calculate the best line spacing, font size etc. based on things like the width of your content area.
Can I Use
Just found a nice new CSS-feature? Want to use HTML5? Usecom to check and see which browser can/can’t use this code. Sometimes caniuse.com even gives fallback tips for older browsers. Look up ‘border-radius’ and then check the tab resources for an example.
com/ RegExr
Website finished and you want to quickly add a few redirect rules to your htaccess file? Or are you programming and need to filter by pattern? If you are not familiar with regular expressions they can be headache inducing. txt2re.com helps by entering a string you want to match (for example an e-mail address, URL, telephone number or just a sentence). The tool generates suggestions of what a regular expression should look like. RegExr turns it around: input your regular expression and a piece of text and the tool shows you which parts of your example text match.
com
A fantastically simple website that gives you the HTML code to embed things like YouTube URLs responsively. Also works for Vimeo, DailyMotion, Google Maps, Instagram, Vine, Getty Images and a normal iFrames.
w3.org
Is the syntax of your website built according to the standards? The validator from W3 helps answer this question. Don’t let all the warnings scare you, a website that is 100% perfect is still just an illusion, especially when you work with themes and plugins. And yet, making fewer mistakes in your code makes your website more findable by search engines. A first tip: tick the box in WordPress ‘Automatically correct invalidly nested XHTML’ under General > Writing.
GenerateWP
Need an extra custom post type for your website? Or want to add additional taxonomies to your page? GenerateWP walks you through a wizard and then gives you the code to place in the functiphp of your theme, super simple!
WordPress Code Reference
The first place to go to look for hooks, functions and classes within It’s thephp.net for WordPress.
WordPress API’s
A helpful overview of all API’s available for the WordPress core. Your code will be much more durable if you use these kinds of APIs. For example, by writing and and reading files via WordPress’s File system API your code will be better compatible with various server platforms.
io
This website makes an attempt to inventory all the hooks for WordPress. You will also find all the actions and filters from a growing number of plugins and theme’s. This website has become a great resource for the better known plugins.
W com/ WP Sniffer
These two tools help you browse other peoples WordPress sites. You can see which theme is activated and what kind of plugins are running on the website. The picture it paints is not always complete, but it can help you find a underlying theme you like.
Google Fonts/ Adobe Typekit
A few years ago it wasn’t possible for all web browsers, but these days, in theory, it is possible to use almost every font on your WordPress website (which doesn’t mean that all fonts are ideal, load quickly or are readable on your website). Google fonts offers a growing selection of free fonts that you can use. If you are looking for a very specific font then Adobe Typekit may be a better option. You will pay an annual price, depending on the font. Lastly, you can turn your own fonts into web fonts. With the Webfont generator by Font Squirrel, for example.

Teamwerk

To keep the ball rolling for larger projects there is almost no escaping teamwork. The following tools really help us develop our WP websites in team.

Google Apps
The complete suite of Google services is also provided for companies under the name ‘Google Apps’. E-mail, agenda’s, hangouts, analytics and contacts all run on user-friendly Google software, but under your own domain. Various extensions for Gmail (like Labelizer) make it possible to share e-mails within your team by using labels. We use this tool as task system at the moment.
LastPass (Enterprise)
Indispensable when it comes to the safe keeping of your login details and those of your clients. Thanks to LastPass Enterprise we can also easily share logins within the team or change them safely. Very affordable and used by large companies like MailChimp and
GitLab
To keep self-written code orderly and simple, we use GitLab as a version management system. GitLab is really a kind of open source GitHub alternative you can host yourself. By using GitLab multiple team members can work on the same project without getting in each other’s way.
Toggl
A good timesheet isn’t just something your customers will appreciate; it helps you get better at estimating where the most time goes in a project. That’s why we use Toggl to track the hours we spend on a project. That way we can see, per project, if we are on schedule with our hours or if we need to make changes. Above all, customers gain insight in the time that was spent and how. Time tracking isn’t fun to do, but it is important.
Teamwork Projects
For project management we used to use Basecamp Classic, a relatively old system (in internet terms). At a certain pointBasecamp Classic stopped meeting our needs because it wasn’t further developed. Teamwork Projects made it possible to transfer our entire archive from Basecamp Classic, so that we could keep all the history of our projects. Colleagues and customers can get access per project. There are to-do lists, where each task can be assigned to a colleague or customer. You can confer with all involved parties per task. You can share files, messages and important milestones.

Stay informed

The WordPress landscape is constantly under development. To stay informed regarding new features, as well as upcoming changes, we recommend you put these websites in your bookmarks or subscribe to their mailinglists.

To close

Now that we have covered all kinds of tools, techniques, plugins and tips for WordPress, we would like to emphasize the most important tip we like to give WordPress professionals: keep it simple! Especially when you’re thinking of using a technically clever solution, always ask yourself: ‘is this not already lying around somewhere?’. Often the answer is yes, and your customers will be happy they don’t have to pay for re-inventing the wheel. This will also enable you to spend more of your budget on making sure the content of the WordPress website is just right, and that is often more valuable to your client.

Do you use tools we haven’t named? Let us know in a response below!