This is a free ebook by Tahir Taous.

A front end developer and

blogger. He is founder of JustLearnWP.com a blog about WordPress
and blogging. JustLearnWP.com was started in November 2015, You
can find in depth articles tutorials and courses about WordPrss,
Theme development and blogging.

Contact details:

[email protected]

[email protected]

JustLearnWP.com

TahirTaous.com

85 Tools for
WordPress Theme
development

Table of content
 1. Best Tools to build powerful WordPress Themes

2. Browsers Development Tools, Extension and other tools and tutorials

3. 10 Firefox Addons for Web and WordPress Developers

4. 9 Chrome Extensions for web developers

5. 11 Tools: Local Development Servers

6. How to install WordPrrss Locally: Tutorials

7. 9 FTP, Back Up, Migration

8. 13 Code Editors for WordPress developers

9. 12 CSS Preprocessors, Code Editor Plugins & Tools

10. 8 WordPress Starter Themes and Frameworks

11. 13 CSS Frameworks to build Responsive Themes

Tools to build powerful
WordPress Themes

The web is a vast place with some fantastically good resources and
 tools available for WordPress Theme Developers. Unfortunately, it’s
very easy to miss some of the best out there.

As a WordPress Theme Developer, you’ll always come across bugs in your

code and new development techniques that you think could apply to existing
or new WordPress Themes.

WordPress developers are always busy and they don't have much time and it
seems unreasonable to expect everyone to be able to keep up with
everything (Tools, Plugins, Starter Themes etc)that becomes available.

WordPress Theme Development tools can be incredibly handy. They come in

all forms, such as browser add‐ons and plugins, which can help you to create
the best themes possible.

Web and WordPress Theme development tools make your work more
productive and therefore faster, plus they give you access to the latest
techniques. Almost all popular web browsers (Chrome, Firefox, Opera, Safari
etc) have web development tools built‐in.

For example, Chrome and Firefox developer tools allows you to not only edit
your web pages but also allows you to test your responsive design with in
browser developer tools quickly and very easily.

With Chrome's remote debugging feature, you can test your WordPress
themes and any other websites on real android devices. I have been using
Remote debugging feature for a while to test my responsive WordPress
themes on real android devices and I love it.

You are probably already using the developer tools provided by the big
browsers, like Google Chrome and Firefox. You’ll know about the headache of
HTML5 and be well‐versed on the importance of a responsive website.

There are some great WordPress Theme Development tools that you’ll quite
possibly already be using in some form, or have a similar alternative –
WordPress on XAMPP, WordPress on WAMP, Bitnami WordPress Installer or
Automattic’s free and very popular Underscores (_s) starter theme, to name
just a few.

But what about the WordPress Theme development tools that you probably
aren’t using? Knowing about their features and how they can help you to test
and develop powerful WordPress themes.
 Browsers Development Tools,
Extension and other tools

Browser developer are most important part of web design and development.
All modern browsers allows you to create, edit or test your WordPress themes.
Using developer tools to edit web pages was common and normally
developers use developer tools to edit CSS quickly and easily.

But do you know you can even use browser developer tools to test your
WordPress themes on real devices, You can also create and edit almost all
files of WordPress themes with Chrome developer tools using Sources and
Remote Debugging feature.

With remote debugging feature you can run your local WordPress site on your
Android device. You will have to use Port Forwarding feature.

Browsers Developer Tools

So it's time to explore all the amazing features, which these browser
developers tools oers.

1. Chrome Developer Tools

2. Firefox Developer Tools

3. Safari Web Development Tools

4. Opera Dragonfly
 5. Microsoft Edge Developer Tools

Tutorial

Video: Chrome Developer Tools Device Emulator, and more!

Tutorial How to use Chrome DevTools like a Pro by Ibrahim Nergiz at

Medium

Chrome DevTools ocial Documentation

Remote Debugging on Android with Chrome

Testing Mobile: Emulators, Simulators And Remote Debugging By Jon

Raasch at SmashingMagazine

Using Firefox Developer Edition For Web Development by Tanay Pant

at TutsPlus

Everything You Need to Know About Firefox Developer Tools by

Brenda Barron at ElegantThemes blog.

My Workflow: Never having to leave DevTools by Remy Sharp

Using Chrome DevTools Workspaces for Faster WordPress

Development By Devin Walker

10 Firefox Addons for Web and
WordPress Developers
 1. View Source Chart colorcoded and foldable page source view

2. HTML Validator integrates with source view

3. Web Developer Add on for Firefox

4. ColorZilla is an Advanced Eyedropper, Color Picker, Gradient Generator

and other colorful goodies.

5. MeasureIt for Firefox lets you Draw a ruler across any webpage to
check the width, height, or alignment of page elements in pixels.

6. WordPress Code Reference to Search the WordPress Code Reference:.

7. WordPress Developers Shortcuts

8. WordPress Codex to Search the WordPress Codex website.

9. qSnap ‐ Screen Capture, Screenshots, Annotation addon. Capture

multiple Web pages, crop, annotate, add callouts, add notes, cover
sensitive information. Save files to locally or their free hosting service.
Share a file URL or save locally to your computer.

10. FireFTP : is a free, secure, cross‐platform FTP/SFTP client for Mozilla

Firefox which provides easy and intuitive access to FTP/SFTP servers.

Chrome Extensions for web
developers

1. ColorZilla is an Advanced Eyedropper, Color Picker, Gradient Generator

and other colorful goodies.
2. PHP Console Chrome: Display PHP errors & vars dumps in Google
Chrome console and notification popups, execute PHP code remotely.
It works oine as well.

3. Web Developer Add on for Chrome

4. MeasureIt for Chrome Draw out a ruler to get the pixel width and
height of any elements on a webpage.

5. WordPress Site Manager stores WordPress sites and also brings more
functionality to the theme editor.

6. WPSnier Detects active WordPress theme and host being used on

current WordPress website.

7. WordPress Style Editor save CSS changes made in developer tools,

directly to the WordPress stylesheet.

8. Dimensions allows you to measure everything you see in the browser,

such as images, input fields, buttons, videos, gifs, text, and icons. Just
drop PNGs or JPEGs mockups into Chrome, activate Dimensions and
start measuring.

9. Check My Links lis a ink checker that crawls through your webpage
and looks for broken links.

11 Tools: Local
Development Servers
 Local WordPress Development Environments

Local development servers are very popular among web developers. With
these tools you can install and set up WordPress site locally on your PC, MAC
or Linux machine very easily.

Local WordPress installation makes your WordPress development workflow

much faster and better. If you are not using local WordPress set up, you are
wasting your time.

Here is a list of few tools to set up WordPress locally.

Mac and Windows (Cross Platform)

DesktopServer: DesktopServer is like a XAMPP/MAMP but with some

Pro addition dedicated to WordPress (honestly it's awesome)
Duplicator is really cool for Backup purpose and reinstall something
oine from online. You get back then from oine to online with
desktop server deploy options. You definitively need to check this
amazing tool.

Linux, Mac, Windows (Cross Platform)

XAMPP is a Free software to set up local development server. To install

WordPress locally, you will have to create database using
PHPMyAdmin.

Bitnami WordPress Stack provides a simple executable installer. You

can set up a local WordPress site quickly and very easily, No technical
skills required.

Windows

1. WAMP: You will have to create database using PHPMyAdmin to install

WordPress. With WAMP you can easily set up multiple WordPress
installation each with it's own database. It makes it easy to develop
sites locally and export database using PHPMyAdmin.
 2. InstantWP automatically sets up a portable development environment
and populates the WordPress install with dummy content. It's very
useful for theme or plugin development

3. Trellis: Trellis uses Vagrant to automatically create a self‐contained

virtual machine.

4. Microsoft WebMatrix WebMatrix is a free, lightweight, cloud‐connected

web development tool. You can also install WordPress on Windows
using WebMatrix.

MAC only

MAMP Free to $59: MAMP Server free version is enough to set up local
WordPress sites. Advance users can buy pro version which oers more
advance features.

Others

1. Uniform Server WAMP stack, portable, up to date components Apache

+ MySQL + PHP & more. The Uniform Server is a lightweight server
solution for running a web server under the WindowsOS. Less than
10MiB, it includes the latest versions of Apache2, Perl5, PHP5,
MySQL5, phpMyAdmin and more.

2. Vmware Fusion for development machines. VMware Fusion 8 is the

easiest, fastest and most reliable way to run Windows applications on
a Mac without rebooting. It is recommended for new and existing Mac
users who want to continue running the Windows application they
can’t live without. Free trial is available.

3. Vagrant: Create and configure lightweight, reproducible, and portable

development environments.

How to install WordPrrss
 Locally: Tutorials

How to install WordPress on Windows 8 Using WAMP Server

How to install WordPress on Windows 8 Using Bitnami Stack

How To Easily Install WordPress On Ubuntu 15.10

How To Install WordPress In Ubuntu 14.10

F T P, Back Up, Migration: 9 Tools

1. WinSCP secure file transfer, folders sync, remote editing, backup

2. Cobian Backup local files backup

3. HeidiSQL MySQL client

4. Transmit (MAC) for FTP (again, I usually just use SVN) Parallels w/
Windows XP for crossbrowser testing

5. FileZilla Free FTP Client for Windows

6. Navicat for MySQL Commercial MySQL client

7. CyberDuck is an FTP client available for Mac and Windows

8. VirtualHostX Manages Apache Virtual Hosts Locally. VirtualHostX is

the easiest way to host and share multiple websites on your Mac. Free
 trial is available.

9. Forklift FTP with local/remote sync capability. It is a dual pane file

manager and FTP/SFTP client for OS X.

Code Editors for WordPress
developers

Code Editors are most important part of any developer toolkit. Writing code in
Code Editor is very easy. Code editors oers so many features to make
developers coding workflow better. Code editors saves a lot of time, oers
syntax highlighting, finding and fixing errors is very easy easy with code
editors.

For popular Code Editors additional plugins/addons are also available to add
additional features to your code editors. For example, i am a big fan of Emmet
a very popular and powerful plugin for popular code editors.

With Emmet you can write HTML and CSS code very quickly and easily. You
can even create HTML markup for whole HTML page with one simple Emmet
abbreviation. You can learn more about Emmet at Emmet.io

There are many free and premium Code Editor are available. Normally you
don't need to buy a premium code editor. Free code editors oers enough
features and functionality to make your coding workflow much better.

Here is a list of some very popular and free code editors. I personallu use
SublimeText and Brackets. In the past, I have used NotePad++ as well bt now i
prefer SublimeText which oers unlimited free trial.

1. SublimeText (Linux, Mac, Windows ‐ 0 ‐$70)

2. NetBeans (Free, Linux, Mac, Windows)

 NetBeans (Free, Linux, Mac, Windows)

3. PHP Storm (Free ‐$199 ‐ Linux, Mac, Windows)

4. Brackets (Free: Linux, Mac, Windows)

5. Aptana tudio 3 (Free, Linux, Mac, Windows)

6. NotePad++ (Free, Windows)

7. TextWrangler (Free, MAC)

8. Coda 2 is a popular Code Editor and you can use WP Syntax plugin for
WordPress Development.

9. Atom

10. Vim

11. TextMate for MAC users

12. Coda2

13. NetBeans

CSS Preprocessors,
Code Editor Plugins &
Tools
1. Less CSS: Less is a CSS pre‐processor, meaning that it extends the
CSS language, adding features that allow variables, mixins, functions
and many other techniques that allow you to make CSS that is more
maintainable, themable and extendable.

2. SASS claims to be the most mature, stable, and powerful professional

grade CSS extension language in the world. SASS is almost a decade
old and There are endless number of frameworks built with Sass
including Compass, Bourbon, and Susy just to name a few.

3. Stylus is a CSS Preprocessors, which extend the functionality of

regular CSS. oers powerful logical functionality, Ability to run via
Node.js / JavaScript, (no Ruby), Ability to run as part of the Node.js set
up, Clean and minimal yet flexible syntax.

4. CodeKit ($32) is a very powrful and popular App for MAC users.
CodeKit can compile Less, Sass, Stylus, CoeeScript, Typescript, Jade,
Haml, Slim, Markdown & Javascript. Oer Auto‐Refresh Browsers and
with built‐in Bower you can install 6,000+ components with a single
click including Bootstrap, jQuery, Modernizr, Zurb Foundation, even
WordPress.

5. PrePros ($29): Prepros is a premium tool to compile LESS, Sass,

Compass, Stylus, Jade and much more with automatic CSS prefixing, It
comes with built in server for cross browser testing. It ri available for
Windows, Mac OS X and Linux. It oers Automatic CSS Prefixing,
Automatic Browser Refresh, File Minification, Image Optimization, Built
in Server and many others.

6. Emmet: A free plugin for dierent code editors to write code quicly and
easily. Emmet is written in pure JavaScript and works across dierent
platforms: web browser, Node.js, Microsoft WSH and Mozilla Rhino.

7. Fire.App: A CodeKit like tool for windows is fire.app (it also runs on
linux and mac). Love Sass/Compass but hate command line interface?
Fire.app has first class Sass/Compass support just like our
Compass.app. No more vendor CSS prefixes and hand‐crafting sprite
images!. Fire.app works on Mac, Linux, and Windows platform. The
installation process is as easy as clicking and dragging.

8. Snippets is a free program to manage your code. helps you to organize

and re‐use code snippets in dierent projects, share snippets publicly
and in with team, available for Mac and Windows.
9. Koala App is a GUI application for Less, Sass, Compass and
CoeeScript compilation, to help web developers to use them more
eciently. Koala can run in windows, linux and mac.

10. LiveReload CSS edits and image changes apply live. CoeeScript,
SASS, LESS and others just work. LiveReload monitors changes in the
file system. As soon as you save a file, it is preprocessed as needed,
and the browser is refreshed.

11. Scout App is a cross‐platform app that delivers the power of Sass &
Compass into the hands of web designers. Scout helps make your CSS
workflow a snap by delivering more control, optimization, and
organization.

12. Crunch 2 Crunch lets you write Less, Sass, CoeeScript, Markdown*,
and then automatically saves CSS, JavaScript, and HTML after you’ve
made changes. Want to write just plain CSS? XML? Haskell?
MUSHCode? Crunch lets you do that too. “Crunch 2 is an editor that
lets you do what you want. Because Crunch loves you.”

13.

Starter Themes and
Frameworks

1. Underscore Start Theme: One of the best and most popular WordPress
starter theme that help WordPress theme developers to build
 awesome WordPress themes with best practices.

2. Bones: An HTML5, Mobile‐First starter theme for rapid WordPress

development.

3. Sage: The best WordPress starter theme with a modern front‐end

development workflow.

4. Genises Framework very popular framework to build themes.

5. bedrock: WordPress boilerplate with modern development tools, easier

configuration, and an improved folder structure.

6. WP Flex: A responsive, foundational WordPress theme boilerplate.

Adheres to best practices and requirements set by the ocial
WordPress Codex and theme review guidelines.

7. FoundationPress: FoundationPress is a starter‐theme for WordPress

based on Foundation 6, the most advanced responsive (mobile‐first)
framework in the world. The purpose of FoundationPress, is to act as a
small and handy toolbox that contains the essentials needed to build
any design. FoundationPress is meant to be a starting point, not the
final product.

8. Pinegrow WP ‐ Web Editor with WordPress Theme Builder. is a desktop

HTML editor with support for Bootstrap, Foundation and other
frameworks that lets you visually build WordPress themes and convert
static HTML websites to WordPress themes. It helps you to build
Theme from scratch or on top of Bootstrap/foundation (basically you
convert a HTML prototyping to a functional WordPress theme).
Available for MAC, Linux and Windows. It is premium product.

CSS Frameworks to build
Responsive Themes
 1. Bootstrap CSS Framework by former Twitter designers

2. Foundation CSS Framework by ZURB CSS Framework

3. Google MDL Lite CSS Framework by Google

4. Pure CSS Framework by Yahoo

5. YAML CSS Framework

6. Skeleton CSS Framework

7. Kube CSS Framework

8. Amazium responsive framework..!

9. TopCoat CSS for clean and fast web apps

10. Semantic UI

11. SUSY

12. INK

13. GridPak The Responsive Grid Generator

Thanks for reading

This is a free ebook by Tahir Taous. A front end developer and

blogger. He is founder of JustLearnWP.com a blog about WordPress
and blogging. JustLearnWP.com was started in November 2015, You
can find in depth articles tutorials and courses about WordPrss,
Theme development and blogging.

Contact details:
[email protected]

[email protected]

JustLearnWP.com

TahirTaous.com