Tool lists age badly, so this one is organised by what you are trying to do rather than by category marketing. Every tool here is one I would actually open during a build — no “top 50” padding, and each entry says what it replaces so you can judge whether you need it.
The shortlist, if you only read one part: Figma or Penpot for design, Local for a WordPress install, VS Code for code, WP-CLI for anything repetitive, Lighthouse for performance, Playwright for checking it still works.
Design and layout
| Tool | What it is for | Cost |
|---|---|---|
| Figma | Interface design, components, prototyping, handoff | Free tier; paid per editor |
| Penpot | Open-source design platform, self-hostable | Free and open source |
| Excalidraw | Fast wireframes and architecture sketches | Free |
| Google Fonts | Type selection and self-hosted font files | Free |
Penpot is the one worth a look if the licensing or the self-hosting matters — it is genuinely open source, works in the browser, and its CSS Grid and Flex layout support maps to how you will actually build the page. Figma’s advantage is the ecosystem and the fact that every developer you hire already has it.
Skip designing in the browser “to save time”. A 20-minute wireframe in Excalidraw prevents the two-hour rebuild that happens when the hero layout does not survive contact with real content.
Local development
| Tool | What it is for | Cost |
|---|---|---|
| Local (by WP Engine) | One-click WordPress install on your machine | Free |
| DevKinsta | Local WordPress with Docker, staging sync | Free |
| wp-env | Official Docker-based WordPress for block/plugin dev | Free |
| WP-CLI | Scriptable WordPress: install, users, plugins, search-replace | Free |
WP-CLI is the highest-leverage tool on this list. Anything you do twice in wp-admin is a candidate:
wp plugin install wordfence --activate
wp search-replace 'staging.example.com' 'example.com' --all-tables
wp db export backup.sqlBuild locally, push when it works. Editing a live site to test a layout change is how outages happen — and it is slower, because you wait for page loads instead of reloading instantly.
Writing the code
| Tool | What it is for | Cost |
|---|---|---|
| VS Code | Editor: PHP, JS, CSS, Git built in | Free |
| Sublime Text | Faster editor for large files and quick edits | Paid, unlimited trial |
| Git + GitHub | Version control, review, CI | Free for most use |
| Chrome DevTools | Elements, network, console, Lighthouse — built into the browser | Free |
DevTools deserves more credit than it gets: device emulation, network throttling, the CSS grid overlay and the performance panel all live there, and none of them need an extension. If you only learn one thing this month, learn the network panel with cache disabled.
Building the site
| Tool | What it is for | Cost |
|---|---|---|
| Block editor + theme.json | Core layout, typography, spacing tokens | Free (WordPress) |
| Bricks | Visual builder that outputs clean markup | Paid, lifetime option |
| Elementor | Widest ecosystem of templates and add-ons | From around $60/year |
| Tailwind CSS | Utility classes for custom builds outside a builder | Free |
The honest recommendation: use the block editor and theme.json unless a client specifically needs a visual builder. Both builders above are competent — Bricks produces tidier markup, Elementor has more third-party widgets — but either one adds markup weight and a licence to renew. Utilities like Tailwind make sense when you are writing a custom theme; they are pointless sitting behind a builder.
Speed and performance
| Tool | What it is for | Cost |
|---|---|---|
| Lighthouse | Built-in audit: performance, accessibility, SEO | Free |
| PageSpeed Insights | Field data plus lab data for a real URL | Free |
| WebPageTest | Waterfall, filmstrip, throttled runs from real locations | Free tier |
| Query Monitor | WordPress-specific: slow queries, hooks, HTTP calls | Free plugin |
Measure on the live URL, not localhost, and measure twice — the first run is always cold. Query Monitor is the one that finds the actual cause on WordPress: a plugin issuing 200 queries on every page is invisible in Lighthouse but obvious there.
Images and assets
| Tool | What it is for | Cost |
|---|---|---|
| Squoosh | Compress and convert to AVIF/WebP in the browser | Free |
| ImageOptim | Batch compression on macOS | Free |
| ShortPixel / Imagify | Automatic compression inside WordPress | Paid tiers |
Images are usually the largest page weight and the easiest win. Serve AVIF or WebP, set explicit width and height, and stop uploading 4000px photos for a 700px slot.
Testing and QA
| Tool | What it is for | Cost |
|---|---|---|
| Playwright | Scripted browser tests: forms, checkouts, redirects | Free, open source |
| axe DevTools | Accessibility audit in the browser | Free extension |
| BrowserStack | Real devices and browsers | Paid; limited free |
| Responsive viewer extensions | Side-by-side breakpoints without resizing | Free |
Playwright is the upgrade most freelancers skip and later wish they had not. A ten-line script that submits the contact form and asserts the success message catches the single most common post-update breakage, and it runs in seconds.
Deployment and delivery
| Tool | What it is for | Cost |
|---|---|---|
| Cloudflare | DNS, CDN, caching, free SSL | Free tier |
| Cloudflare Pages | Static/JAMstack hosting with preview deploys | Free to start |
| Netlify / Vercel | Same idea with different build ecosystems | Free tiers |
| GitHub Actions | Automated tests and deploys on push | Free minutes for small projects |
For WordPress the CDN matters more than the CI: Cloudflare in front of a shared host is the cheapest performance improvement available, and it terminates SSL for free. Keep the origin and the CDN cache rules documented somewhere, because the next person will need them.
SEO and content checks
| Tool | What it is for | Cost |
|---|---|---|
| Rank Math | Titles, sitemaps, schema, redirects in WordPress | Free tier |
| Screaming Frog | Site crawl: broken links, titles, status codes | Free up to 500 URLs |
| Google Search Console | Index status, queries, Core Web Vitals | Free |
A build stack that fits in an afternoon
- Excalidraw — 15 minutes of layout thinking.
- Figma or Penpot — one desktop and one mobile frame, real copy in it.
- Local — WordPress running locally, WP-CLI available.
- VS Code — theme files, Git from the first commit.
- Query Monitor + Lighthouse — measure before and after every change that touches performance.
- Playwright — one test for the form, run before each deploy.
- Cloudflare — in front of the origin on day one, not after launch.
That is seven tools, all free except an editor and a builder if you choose one, and it covers design, build, measurement and verification. Everything else on this page is a refinement of those seven.
The tools are the cheap part. What actually costs time is the maintenance afterwards — updates tested, forms verified, backups restorable. That is what our WordPress care plans handle, and if you are pricing the whole build, what a WordPress website costs covers the numbers.
FAQ
What is the best free tool for WordPress development?
WP-CLI, without much competition. It turns every repetitive admin task into one command and works on any host with SSH. After that, VS Code and Local.
Do I need a page builder to design a WordPress site?
No. The block editor plus theme.json covers most layouts and produces lighter pages. Builders earn their keep when a client needs to restructure layouts without touching code.
How do I test a site across devices without buying tools?
Chrome or Firefox device emulation covers layout; Playwright covers behaviour at any viewport. Paid device clouds matter when you need real iOS Safari, not for breakpoint checks.
Which tool catches broken links fastest?
Screaming Frog — a crawl lists every 404, redirect chain and duplicate title in one export. It is free up to 500 URLs, which covers most small sites entirely.
