The Ultimate Collection of WordPress Theme Design & Development Resources

A recent poll on WPMayor showed that the majority of readers of this site are WordPress developers. This post is thus catered to theme developers, and we are going to highlight some of the tools and resources which every WordPress theme developer should be aware of.

A recent poll on WPMayor showed that the majority of readers of this site are WordPress developers. This post is thus catered to theme developers, and we are going to highlight some of the tools and resources which every WordPress theme developer should be aware of.


WordPress Responsive Frameworks

Responsive web design is becoming the default, and we therefore recommend that you build your themes in this fashion. The best thing is to use one of the established responsive frameworks for WordPress, namely:

These are the cream of the crop when it comes to responsive frameworks, and can also be used to build a prototype quickly, before fine-tuning elements in your design. You can read more about these frameworks in our previous post about responsive frameworks.

If you’re unsure what the difference is between a WordPress Starter Theme and a Theme Framework, read this.

WordPress Code Frameworks

Most WP developers keep a repository of functions they use over and over again. There are also a few publicly available frameworks, which at their core are a collection of classes and functions that can help you develop smarter and faster. It is also an inspiration to look at the code of these frameworks.

I love the WooFramework and it’s attention to detail even from a UI perspective. Hybrid Core has some very useful functions that I like to use too. I haven’t played around with Genesis much, although I hear many good things about it.

Other Themes

Pears: an open source WordPress theme for creating your own markup & style pattern library.

DeTube: A theme that imports YouTube videos, it also has very interesting functionality that allows you to automatically install the plugins it recommends.

Responsive Grids

These grids are more basic than the above frameworks, and could be a better starting point for you if you prefer something leaner which you can customise yourself.

More information about responsive design and tools can be found in this post on webdesignerdepot.

Design Inspiration

Knowledge of the current design trends is essential, you want to build a theme that features a cutting-edge design and incorporate the latest usability and design standards. Below are some of the best web design galleries to get your creative juices flowing:

Other cool design resources and tools:

User Interface

  • Pattern Tap – Design patterns
  • UI Patterns – Design patterns
  • UI Parade – User interface design inspiration

Type – Choosing a good measure

The measure is the length of a line of type. For optimum readability you want the measure to be between 40 to 80 characters, including spaces. For a single-column design 65 characters is considered ideal.

A simple way to calculate the measure is to use Robert Bringurst’s method which multiplies the type size by 30. Sof if the type size is 10px, multiplying it by 30 gives you a measure of 300px or ardound 65 characters per line.

Type – Leading

Leading is the space between the lines of type in a body of copy that plays a big role in readability. The longer the measure, the more leading is needed. Also, the larger the type size, the less leading is required.

A good rule is to set the leading 2 to 5pt larger than the type size, depending on the typeface. So if you set the type at 12pt, a 15pt or 16pt leading should work well on the web.

From the article ‘Typography in Your Designs’ by Antonio Carusone.

Template Hierarchy

Know Your Competition

Whether you are releasing a free or premium theme, it makes sense to know what is already out there. Starting from the WordPress theme repository, you can also check the most popular premium theme site Themeforest, and other individual theme sellers such as WooThemes and ElegantThemes:

WordPress Codex Resources

The WordPress Codex has a number of invaluable resources that every WordPress theme developer should be familiar with. I highlight in particular the following:

Theme Options Frameworks

Theme Options Tutorials

Plus a post on SmashingWall for more resources, especially if you want to build your options page manually. Konstantin Kovshenin has also launched a blog showcasing the best and worst theme options screens.

While there is a big emphasis on using the Settings API and the WordPress default UI when building theme and plugin options pages, it also true that not all settings can be accommodated by this UI. Therefore I recommend using your common sense and trying to stick to conventions as much as possible, however also being practical. Take a look at the most popular plugins and see how they do things, although being popular is not always a guarantee of being best practices. For custom options UIs that work well you can take a look at plugins like Gravity forms or WYSIJA.

General Development Resources


  • Theme Check
    The theme check plugin is an easy way to test your theme and make sure it’s up to spec with the latest theme review standards. With it, you can run all the same automated testing tools on your theme that uses for theme submissions.The tests are run through a simple admin menu and all results are displayed at once. This is very handy for theme developers, or anybody looking to make sure that their theme supports the latest WordPress theme standards and practices.
  • Log Deprecated Notices
    This plugin logs the usage of deprecated files, functions, and function arguments. It identifies where the deprecated functionality is being used and offers the alternative if available.
  • Debug Bar
    Adds a debug menu to the admin bar that shows query, cache, and other helpful debugging information. When WP_DEBUG is enabled it also tracks PHP Warnings and Notices to make them easier to find.
  • WordPress Beta Tester
    This plugin provides an easy way to get involved with Beta testing WordPress. Once installed it will enable you to upgrade your blog to the latest Beta or Release candidate at the click of a button using the built in
    upgrader. By default once enabled it switches your blog onto the point release development track. For the more adventerous there is the option to switch to the bleeding edge of development.
  • Widget Settings Importer/ExporterGives the user the ability to export the current widget settings and states as a json file. You can then import those settings on a different server or installation of WordPress so you have the same widgets within the same sidebars as the export. The import will not overwrite any data currently within the sidebars, but instead will increment the widgets and add a new instance of the widget instead.

Apart from using these plugins, it is recommended to set the WP_DEBUG variable in wp-config.php to TRUE while developing your theme. This will show you all the output that is being generated by your theme, aiding you in optimising and detecting problems that might otherwise not show up.

A Solid Test Server Setup

You’re going to need a local server to test and build your site and template on. There are several possibilities (XAMPP, MAMPP, Uniform Server etc.) but one in particular merits special attention as it is built for WordPress specifically:

You can read the full report about it on WPMU’s recent post. Here are the main highlights however:

DesktopServer is based on XAMPP but goes beyond regular XAMPP in that it is optimized for WordPress. Features that you get beyond the regular XAMPP environment include:

  • New support for multiple versions of WordPress – Create sites for current and beta versions.
  • Support for WordPress Multisite and domain aliases for multisite development
  • Create multiple isolated sites: work, keep, and maintain multiple projects
  • Simplified wizard interface allows you to create a site in seconds
  • Work offline. Includes WordPress, no Internet connection needed
  • Automatic WP database installation, configuration, and removal
  • Exclusive fictitious top-level domain name mapping (.dev sites)
  • Includes updated phpMyAdmin 3.4.5 for total MySQL control
  • Integrated virtual hosting domain name manager
  • Includes Xdebug for more serious developers


One of our most popular posts here on WPMayor is our discussion on IDEs for WordPress development. My favourite combination used to be Komodo as a fully-fledged IDE and Sublime Text 2 for quick edits. Komodo and Sublime Text can both be integrated very nicely with WordPress, providing easy access to WordPress functions and auto-completion functionality. My top three recommendations are therefore:

  1. Komodo IDE
  2. Sublime Text 2
  3. Notepad++

For those of you using a Mac, Coda seems to be the most popular choice.

Cross-Browser Compatibility Tools

If you want to avoid a barrage of support requests due to browser incompatibility issues, or just want to do things right, make sure you test your theme on as many different browser/OS setups as possible before releasing it into the wild. There are a few tools that can help you out:

Of course there are many more tools, you can read more about cross browser testing and the tools available in this recent post on Smashing Magazine. Check out this link for mobile testing tools.


I highly recommend that you download this ebook if you are building premium themes for sale on sites like ThemeForest or your own marketplace.

Other good ones:

Version Control

I’m using Git and totally loving it.


Kevin Leary gives a very interesting insight into how he develops themes, and lists a couple of valuable resources in his post here.

Anything else we’ve forgot to mention? Let us know in the comments section!

If you enjoyed this post, make sure to subscribe to WPMayor’s RSS feed.

Jean Galea
Jean Galea
Jean Galea is an investor, entrepreneur, and blogger. He is the founder of WP Mayor, the plugins WP RSS Aggregator and Spotlight, as well as the podcast. His personal blog can be found at

Consider sharing this post so others can find it:

Share on facebook
Share on twitter
Share on linkedin
Share on reddit
Share on telegram
Share on whatsapp
Share on pocket
Share on email

Join thousands of people receiving real-world, genuine evaluations of WordPress products and services just like this one every week.

Our Sponsors
Prevent Direct Access

35 Responses

  1. Jean, thank you for this article I am just beginning to swim in the deep end of WordPress on some more advanced development so having this reference means a lot to me. I am learning that their is always a less painful way to do things via plugins, utilities and frameworks. I feel like a whole world is opening to me and now I have a map to help guide me.
    Thanks again,

  2. Welcome, there really are a lot of great resources out there, some of them not so well known. It is our aim to uncover these hidden gems and share them with our readers.

  3. Great summary of all the good ressources we can use. I find netbeans really slow and as a text editor i recently switched to sublime text 2 available on all platforms

        1. No Saqib, I’ve just begun using it recently, but it’s very straightforward to set up, I might write a post later on about, or maybe you can contribute a guest post 🙂

  4. Awesome list. I wish I knew about them earlier. You may wish to check out my implementation of localhost development too. While not an IDE per se, it does aid tremendously in design, development, and deployment. Copying, sharing, and working on multiple projects (who ever works on just one?) is extremely easy: (a lot of developers seem to like it).

  5. I’m currently looking through Google, but on the off chance I don’t find what I’m looking for, I was really hoping you might be willing to provide Komodo Edit / WordPress integration instructions. I’m sure I’ll find it since I am currently working on a site for a client and was hoping to find a way to speed the process along.

    I was previously swapping between IDE’s and text editors, but installed Komodo Edit ( for probably the 7th time since its release ) and am pretty happy overall with it. The only thing I do miss is the CSS code completion features when adding identifiers or classes to HTML that have already been defined in your stylesheet. It would be really nice to have code completion for both that and WordPress. =/

  6. I found the solution if anyone is curious. It’s very easy. This is not only very awesome, but for anyone who uses their own or third party frameworks, this is a heaven sent. All I can say is wow. Now if only Komodo Edit supported CSS code completion of predefined classes and identifiers when adding classes and id’s to div tags, etc. That would be very awesome. 🙂

  7. This is great comprehensive resource, thank you for all the work you have done putting all of this together. I am just curious to know, which tools you recommend for image editing and optimization.

  8. I always loved NHP… unfortunately, it hasn’t seen development in six months and the bugs and feature requests have been piling up. As a result, I got tired of watching problems go unsolved, forked NHP, and released my own framework which resolves most of the issues people had with NHP and adds a few features of my own! If you want to take a look at my continuation of NHP, check out

Leave a Reply

Your email address will not be published. Required fields are marked *

The Beginner’s Handbook
From an introduction on how WordPress works to our recommendations on products and services.
👋 Hey there! We're Gaby and Mark
Every week we share tutorials and genuine reviews of WordPress products and services in our newsletter.
Thousands of people read it!
We’d love for you to join.
We’d love for you to join. Here’s what you’ll be getting:

A single weekly email directly to your inbox.