The Ultimate Collection of WordPress Theme Design & Development Resources

Web Hosting

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.

Guides

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.

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

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

http://wphierarchy.com/

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

Plugins

  • 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 WordPress.org 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/Exporter

    Gives 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

A Top IDE

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.

Books

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.

Articles

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.

About Jean Galea

Jean Galea is a WordPress developer and creator of the WP RSS Aggregator plugin. He loves blogging and is the founder of WP Mayor. Jean also blogs about internet marketing at Fit for Blogging.

32 Responses

  1. Evl
    Evl November 17, 2011 at 18:52 | | Reply

    This is a nice list. I got the Theme check plugin today, gonna give it a try.

  2. Bryan
    Bryan November 17, 2011 at 18:53 | | Reply

    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,
    BW

  3. Fx
    Fx November 18, 2011 at 01:15 | | Reply

    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

  4. saqib
    saqib November 18, 2011 at 09:16 | | Reply

    Hi Jean,

    Thanks for this nice list of tools. I am downloading netbeans to give it a try.

    I also want to add two my recent findings related to topic:

    http://wp.tutsplus.com/articles/5-cardinal-sins-of-wordpress-theme-development/

    http://net.tutsplus.com/tutorials/wordpress/16-vital-checks-before-releasing-a-wordpress-theme/

    Regards

  5. Tom Hermans
    Tom Hermans November 18, 2011 at 20:59 | | Reply

    thanks, great list. knew a lot of ‘em but not all..

  6. Steveorevo
    Steveorevo November 19, 2011 at 09:28 | | Reply

    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: http://bit.ly/omPvWU (a lot of developers seem to like it).

  7. Steve
    Steve January 4, 2012 at 17:50 | | Reply

    Great list of resources. Now to choose which ones to use. Thanks for putting this together.

  8. Kevin Remisoski
    Kevin Remisoski January 21, 2012 at 01:47 | | Reply

    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. =/

  9. Kevin Remisoski
    Kevin Remisoski January 21, 2012 at 02:05 | | Reply

    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. :)

    http://elektroelch.de/blog/2008/06/26/using-komodos-calltips-with-wordpress/

  10. Gennady
    Gennady February 20, 2012 at 20:47 | | Reply

    Adam’s Brown WordPress actions and filters list is a great development resource to quickly find hooks and view them in the source code right there and then http://adambrown.info/p/wp_hooks

  11. Noumaan Yaqoob
    Noumaan Yaqoob February 21, 2012 at 11:17 | | Reply

    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.

  12. Robert
    Robert May 29, 2012 at 15:48 | | Reply

    Nice collection for developers. Hope they can use these tools and improve our users’ experience

  13. meks
    meks June 27, 2012 at 11:25 | | Reply

    Great list! Thank you WPmayor!

  14. ghost1227
    ghost1227 December 19, 2012 at 19:04 | | Reply

    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 https://github.com/ghost1227/Redux-Framework/

  15. Kevin Leary
    Kevin Leary December 26, 2012 at 17:04 | | Reply

    Great article Jean, thanks for mention.

  16. Best Web Design (@BestWebDesignIn)

    Great article Jean

    another resource for design inspiration http://bestwebdesigninspiration.com/

    Thanks

  17. dovyp
    dovyp November 2, 2013 at 16:41 | | Reply

    NHP has merged with Redux. Would you mind updating your article? See: http://reduxframework.com/2013/10/redux-welcomes-lee-mason-leemason-original-creator-of-the-nhp-framework/

  18. Chetaru
    Chetaru March 5, 2014 at 02:48 | | Reply

    This is indeed an ultimate collection!
    Thanks for sharing :)

Leave a Reply