As Fred wrote in an earlier post, learning WordPress development is hard. It’s not just a case of being able to write code. There’s a heap of associated skills: analysis, design, SEO, copywriting, user experience, maintenance and more.
WordPress developers have to wear a number of hats, and can’t be experts in everything. It therefore helps to have tools to do some of the heavy lifting and speed up your workflow.
This article introduces 25 online tools that are helpful in WordPress development.
This article introduces 25 online tools that are very helpful in WordPress development. My definition of “online tools” here doesn’t include WordPress plugins. Rather, most of these tools are standalone sites that let you input stuff and output something useful, whether that’s a code snippet, a download, a piece of reformatted text, or simply some helpful information.
Many of these tools have been created by other developers who needed thing X to do task Y, and they’re sharing their work with the developer community.
Best of all is that all these online tools are free! A few have paid upgrade versions if you want more features.
WordPress Development Tools: Analysis
Since many website projects are redesigns, these tools help with examining existing websites.
If you’re writing a proposal and don’t yet have access to a website’s back end, you can look “under the hood” of a site, perhaps to plan the design and build, or to study a competitor.
1. WordPress Theme Detector
There are a few sites that perform a Sherlock Holmes-style deduction on a WordPress website’s theme. My favorite is WordPress Theme Detector.
If the theme is publicly available, there’s a download link.
The detector can also tell if a child theme is being used on the site and identify some plugins.
2. BuiltWith
Another online detective, BuiltWith delves deep into the technology behind a site.
It can detect more plugins used than WP Theme Detector and reveal information on analytics, hosting, CDN used, server type and more. You can also see what other sites are using a particular technology.
There are extensions for Firefox and Chrome to make lookups quickly.
3. Unminify
While minified code is great for a speedy site, it’s not easy to read.
You can reverse the process with Unminify.
Just copy and paste the code into the box, hit the Unminify button and hey presto! Clearly formatted, readable code.
WordPress Development Tools: Design and Development
These tools help with front-end and back-end elements of the website build process.
4. FontPair
If you’re (re)designing a website, typography is a key ingredient. Most developers are familiar with the free Google Fonts, but putting the right typefaces together can take a little thought.
FontPair delivers the perfect match.
Simply select the Google Font types you want to pair together (e.g. Serif + Sans Serif) and FontPair will suggest some pleasing combinations.
There’s also a link to some helpful typography resources on the website if you want to delve further into the subject.
5. GlyphSearch
Searching for that perfect icon for your project? GlyphSearch has a super search for eight popular icon sets, including Font Awesome, Ionicons and Foundation.
Depending on your use case, you can copy the entire markup, HTML entity, hex and more.
The icon libraries are kept up to date so you don’t have to worry about missing anything.
6. Bulk Resize Photos
Whether you’re planning on using an image compression plugin or not, Bulk Resize Photos is a nifty site. You can resize a collection of photos to the same size in seconds – useful if you are creating a photo gallery.
The resizing takes place on your local machine, so there are no privacy issues, and you can save your settings as a preset for reuse.
7. Underscores
Underscores is a well-coded starter theme that forms the basis for the WordPress default themes. It’s free to use for your own projects.
Just fill in a few details (Sass is optional) and you’ll be rewarded with a zip file of your own Underscores-based theme. Just add code.
8. Plugin Boilerplate
Created by Tom McFarlin and Devin Vinson, Plugin Boilerplate is a real time-saver when starting to develop a new plugin.
Fill in the details of your plugin, hit the Build Plugin button and you’ll get a zip file with a logical file and folder structure ready-made for you to start development. Happy coding!
9. GenerateWP
GenerateWP offers a whole set of tools for generating WordPress code snippets quickly.
The generators include ones for creating or registering:
- Several kinds of queries including WP_Query and related classes
- Custom post types and custom taxonomies
- Custom action and filter hooks
- Custom sidebars
- Scripts and styles
A particularly helpful feature is that you can browse code snippets made by other developers in the Snippets Archive. Clone, download or modify the snippets – it’s up to you!
If you would prefer that your generated snippets remain private, you can join as a premium member for as little as $10/month (paid yearly). This also gives you access to premium generators that are not available to free users, support and unlimited snippet storage.
10. WP Hasty
Similar to GenerateWP is WP Hasty. It has a couple of free generators that GenerateWP lacks: a Visual Composer Element Generator and a WP Mail Generator.
WP Hasty’s Premium plan offers another 10 generators and further benefits. It’s priced at $4/month.
11. Web Developer extension
Chris Pederick’s Web Developer extension is a Swiss army knife of tools. It’s available for Firefox, Chrome and Opera browsers.
Among the goodies built-in are:
- Color picker
- Ruler
- Find duplicate IDs
- Populate form fields (useful for testing forms quickly)
- View image information
12. SQL query builders
Knowing some SQL is an essential skill when you need to select, insert, update or delete in the WordPress database – say, if you are saving plugin settings or theme Customizer options. (It also might help when cleaning up plugins without a proper uninstall routine.)
Knowledge Walls provide a bundle of SQL query builders for your queries, as well as many other code manipulation tools.
13. Sass Color Generator
Using Sass in your WordPress project has many benefits, one of which is defining color values and being able to manipulate them with functions. But you probably find it hard to visualize what color “5% darker” is.
That’s where Sass Color Generator comes in. Take a color’s hex code and add a percentage increment and you can see what the color would look like if lightened, darkened, saturated or desaturated.
14. Cool HTML Tag and Attribute Online Stripper
I’ve sometimes come across some messy code on a site and had the need to clean it up in a redesign. For example:
- Post or page content with a lot of inline styles.
- A Google Doc copied into WordPress with pesky
<span>tags added. - PDF content pasted into WordPress that’s bloated with unwanted tags, including line breaks.
I’ve found a tag stripper a boon in doing this task.
There are a few tools which do this, but I like Cool HTML Tag and Attribute Online Stripper because of the options you get.
There’s a preset list of tags and attributes to keep, but you can edit or remove all of them depending on your purpose. (You should keep the href attribute along with the <a> tag, for example.)
WordPress Development Tools: Testing
These testing tools record how a website looks visually or parse the code for errors.
15. FireShot
FireShot is one of my go-to tools. It’s my preferred browser extension for taking full page screenshots. Ten different browsers are supported.
There’s a Pro version that you can use to annotate your screenshots, plus other benefits.
16. Browsershots
Browsershots is a tool for checking websites across different browsers and operating systems (Windows, Mac and Linux).
A range of browsers are covered, including Chrome, Firefox, Safari and Opera. Notably Edge and IE are missing, and no mobile browsers are tested.
Browsershots serves up your screenshots after a few minutes and you have a short time to download them.
If you need further testing on different browsers and devices you can check out a free trial of Cross Browser Testing.
17. W3C Nu HTML Checker
Why should you validate your code? Because valid code is more likely to be SEO friendly, cross-browser compatible, run faster and be more accessible.
The Nu HTML Checker is the successor to the older W3C Validator. The name is deceptive: it checks HTML, CSS or SVG code for errors.
18. JSLint
JSLint scans JavaScript code and offers suggestions to make it cleaner and neater.
Seeing too many warnings? At the bottom of the interface there’s some checkboxes where you can get JSLint to ignore certain factors in its evaluation.
19. Diffchecker
If you don’t have your favorite IDE at hand to compare files, Diffchecker will do the job.
Paste in two text files, which can include code. The tool will show you the differences between the two. If you create a free account, you can save the diffs.
It works online for images and PDFs too. You can also install a command line interface version via Node.js and npm.
There’s a desktop version with more features which you can try free for 30 days, or buy for $49.
WordPress Development Tools: Production
When you’re finished the site build, these tools optimize your code and prepare you for launch.
20. Minify
If you’re not minifying your CSS and JS with command line tools or a caching plugin, you can use Minify to complete the task.
21. CSS to Sass/SCSS Converter
Haven’t mastered the Sass syntax? The CSS to Sass/SCSS Converter will turn your CSS code to Sass or SCSS – you choose which.
22. The WordPress Admin Account Generator
The WordPress Admin Account Generator by Exygy provides a quick way to run a SQL query to create a new administrator account. It’s handy if you’ve developed a site but are handing it over to client and they need admin access.
Run the query in your WordPress database to create the account.
WordPress Development Tools: Maintenance
Once the site is up and running, these tools help you keep a site healthy.
23. ManageWP
ManageWP is a software-as-a-service dashboard that lets you manage multiple WordPress sites with ease, and it’s my favorite site of its type.
The free version has multiple features including monthly backups, performance and security checks and client reports. Other perks such as cloning sites require a paid upgrade. Pricing depends on the number of premium add-ons you use.
24. Tools for managing 301 redirects
301 redirects are important for maintaining good SEO on a site.
Yoast Permalink Changer has your back if you’ve decided to switch permalink structure to the /%postname%/ type. The tool automatically generates the redirects you need, based upon the site URL, the existing permalinks and server type.
You might also need a tool to test regular expressions for redirects, like RegExr.
25. Broken Link Check
Broken links build up over time and can hurt a site’s credibility and usability. They are something you’ll want to keep an eye on, particularly if they’re payment links or affiliate links.
There are a few online link checkers out there, but I like Broken Link Checkbest for a few reasons:
- Checks more links than other online tools – up to 3,000.
- No limit to the number of links found.
- Shows you where on the page a link is broken (line number).
- Search for distinct broken links.
The limitations of the service are:
- Only one check per IP address at one time.
- A scan can take a long time depending on the size of the site.
- Image and document links are not scanned.
- No means to export the list of broken links to another program e.g. Excel. (One way round this, I’ve found, is to send the results page to print and as use the Print to PDF option to download it).
Wrapping Up
And that’s a wrap on time-saving WordPress development tools!
Have I missed any of your favorite WordPress development tools? Please add them in the comments, or start a conversation in our Facebook group.
Keep reading the article at WPShout. The article was originally written by Claire Brotherton on 2020-03-10 12:43:18.
The article was hand-picked and curated for you by the Editorial Team of WP Archives.