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.
- Oli Dale’s step-by-step process for building a theme
- Guide to CSS elements that should be present within every WP theme
- Themeshaper’s Guide to Distributing Your theme
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.
Pears: an open source WordPress theme for creating your own markup & style pattern library.
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.
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:
- Designers List
- Styles Inspiration
- Make Better Websites
- CSS Drive
- We Love WP
- Design Shack
- The Best Designs
- CSS Elite
- Web Design Ledger
- Unmatched Style
Other cool design resources and tools:
- Layout Lab – UI ready-made elements
- Pixel Den - Ready made design elements
- Font dragr – Google font drag and drop
- Subtle Patterns – BG patterns
- Elements of Design – Showcase of UI element designs
- Forrst – Get feedback on your designs and development practices
- Web Typography Guide
- WP Icons Template - Templates for Admin Custom icons
- Typetester – Compare fonts online
- Guide to Combining Typefaces
- Responsive design tools and resources
- Pattern Tap – Design patterns
- UI Patterns - Design patterns
- UI Parade - User interface design inspiration
- Yahoo Patterns
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.
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.org Free Theme Directory
- Themeforest (especially the Top WP Theme sellers)
- Elegant Themes
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
- Thematic Options Framework Plugin
- UpThemes Options Framework
- NHP Theme Options Framework
- ThemeShaper Sample Options Page
- Slightly Modded Options Framework
- Settings API plugin
Theme Options Tutorials
- Aliso the Geek WordPress Settings API Tutorial (includes tabs)
- WPCandy Plugin UI Guide
- Create Tabs in Plugin Options pages
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 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.
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:
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:
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:
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.