What kinds of themes do we look for when we add to our collection on WordPress.com? We get this question a lot, both from existing and potential theme shops. And while some of the specifics evolve over time, the principles of what makes a good theme good remain the same. Whether it’s on WordPress.com or not.
When reviewing themes for WordPress.com, we never accept a theme based on design alone. We want to see the entire theme experience and for that you have to look at the user experience and code too. Why? You can have a beautiful design, but still make a bad theme. So we always look at three aspects, what we call the Three Amigos, named after a popular American comedy movie.
Design
We consider a lot of different design aspects. In general, we look for a strong grasp of design principles, especially methods that help establish harmony and unity:
Perspective: sense of distance between elements.
Similarity: repeating similar – but not identical – elements with strong visual connections.
Continuation: the sense of having a line or pattern extend throughout a design.
Repetition: elements being copied or mimicked numerous times.
Rhythm: achieved when recurring position, size, color, and use of a graphic element has a focal point interruption.
Altering the basic foundation of the design achieves unity and helps keep interest.
We run through setup to see how challenging it is to make the theme look like the theme demo. Complicated theme setups cause a large amount of user frustration, refunds and theme switches. We look at theme options to see if they’re intuitive to set up, simple, or complex. Any patterns that may confuse WordPress.com users are noted. User experience might just be the most important thing. You can’t use a theme if you can’t use it.
We’re always open to exceptions, if they can be justified by an innovative or creative theme that users will love.
And one last note – whether our marketplace is officially accepting new theme shops or not, we’re always looking for amazing, new themes. Make one, put it out there, and we’ll probably find it.
At Automattic, we exclusively use the Customizer for theme options instead of theme option pages. We believe that themes should only alter the display of content and should not add any additional functionality that would be better suited for a plugin. Since all options are presentation centered, they should all be controllable by the Customizer.
Hey there, WordPress theme developers. When you’re crafting themes, are you checking the quality of your theme code? The design is important, yes, but so is the code.
Hey there, WordPress theme developers. When you’re crafting themes, are you checking the quality of your theme code? The design is important, yes, but so is the code. Within the past year, the WordPress theme review team has been hard at work encouraging best coding practices among WordPress theme developers, with the goal of raising the overall standard of the themes that appear in the WordPress.org theme repository. Even if you don’t intend to submit your theme to the WordPress.org theme repository, it’s wise to develop your themes as though that was your intention. I hope that by the end of this post, you’ll have a better understanding of the benefits of doing so.
The WordPress Theme Review Team and its guidelines
Just in case this is the first time you’ve heard of the theme review team, I’ll describe it briefly. They’re a group of volunteers from the WordPress community that reviews each theme that is submitted to the WordPress.org theme repository to check for compliance with the guidelines and standards that they have set forth. I’m not going to list all of the guidelines here because you can read them at the theme review team’s website, but I do wish to highlight a few here because they’re especially relevant to coding practices:
This is a plugin that tests your theme to see if it meets the latest theme review guidelines. If your theme is missing a required or recommended feature, or if it contains deprecated functions, the plugin will let you know and suggest possible fixes.
Code quality
These are a general set of guidelines that specify how you should format the HTML, CSS, and PHP in your theme. All HTML and CSS mark-up must validate to W3C Standards, and your PHP must neither generate any notices, warnings, or errors when WP_DEBUG is turned on (turn it on by placing define('WP_DEBUG', true) in wp-config.php).
Does your theme contain hidden PHP warnings like THIS?
The Theme Unit Test
How well does your theme handle posts without titles? Do images resize properly? Do floated elements inside posts clear properly? Are all possible HTML tags that users can use in the visual editor styled? Are all widgets styled? The theme unit test is a set of sample data that you can use to test your theme in scenarios such as these.
Example of a Unit Test post on the Twenty Eleven Theme
Of course, as I stated earlier, these are just three of the areas in the theme review guidelines. A theme passes its review and is accepted in the WordPress.org theme repository when it satisfies the criteria for all of the areas.
So, why should you care?
The theme review team’s guidelines are important for all WordPress theme developers for three basic reasons:
They establish general consistency among WordPress themes for users and developers.
They ensure protocols for theme security.
They raise the bar for overall theme quality.
Let’s discuss these three areas in more detail.
Consistency
WordPress themes are a eclectic bunch, but they do have at least one thing in common — they are all WordPress themes. It’s important to always keep this in mind.
When your theme deviates too far from the core WordPress functionality, you run the risk of users becoming frustrated as to why certain features that they’ve come to expect from WordPress don’t seem to work with their site. Listed below are sections of the theme review guidelines that help establish a base consistency among themes in the WordPress.org theme repository:
Before you add a custom feature to your theme, check to see if WordPress already has a core function that can take care of it. The table below highlights core features your theme should utilize as much as possible.
Themes play a large role in WordPress sites, so it pays to ensure that your theme’s code is as secure as possible. Don’t let your theme be the one that leaves your users’ sites vulnerable to hackers. No one wants (or deserves) to have their site hacked. If you follow the theme review team’s security-related guidelines, you will be one step closer to building a theme that is as safe as it is gorgeous. The following are the theme review team’s guidelines related specifically to security. I highly recommend that you read them as you develop your theme:
Theme Settings and Data Security – Properly escaping all data throughout your theme and using the Settings API for theme options pages are essential characteristics of a secure theme.
Theme Obsolescence – Outdated code and deprecated functions are a security threat because they may contain known vulnerabilities that hackers can exploit. Themes in the WordPress.org repository will be removed if they are not updated on a regular basis to comply with the latest version of WordPress. In a similar vein, third-party scripts can also pose security risks, as we saw with the recent TimThumb vulnerability. If you use third-party scripts in your theme, please, please, please check those scripts regularly to make sure they are up to date. If the original author of a script does not put out regular updates, think twice about using it. Security is never a “set it and forget it” deal — you must approach it Mad-Eye Moody-style: CONSTANT VIGILANCE.
Quality
The final reason that it’s important to pay attention to your theme’s code is for the sake of quality. A theme that uses well-formed, modern code is easier for you and other developers to maintain in the future. The larger the number of well-coded themes we have, the more positively this reflects on the WordPress community as a whole. The following area from the theme review team’s guidelines relates specifically to code quality (I linked it earlier, but I’m linking it again because it’s that important):
I hope I’ve convinced you why it’s so important to pay attention to your theme’s code, whether you are creating free themes or commercial themes. If you’re interested in applying some of these principles to your theme development, here is a nice list of procedures to keep in mind during the development process:
Look at the code of the current default theme, such as Twenty Eleven, as a starting point and as an example of best coding practices and implementing core WordPress functionality.
Get in the habit of testing your theme with the unit test data.
Before you add a custom function, check to see if there is a WordPress core function that can take care of it. If you feel that the WordPress core functionality is lacking somehow, try supplementing the core feature instead of replacing it completely. Make sure that any custom feature you add does not leave “debris” behind (such as broken shortcodes) or otherwise cause a site to break badly if users decide to switch their theme. What are your “fallback” features?
Consider joining the WordPress theme review team, which forces you to learn by checking others’ code. For more information, please read Justin Tadlock’s excellent post on this subject: Join the WordPress theme review team.
Do you find yourself taking older themes and adding support for Custom Menus? Here are code samples that you can use for just that.
To be clear, this isn’t a full-blown tutorial for Custom Menus. See Justin Tadlock’s excellent post, Goodbye, headaches. Hello, menus! or the wp_nav_menu Codex page for all the juicy details.
I spend a lot of time cleaning up WordPress themes. During the code cleanup I often perform certain cleanup tasks over and over, which makes them perfect for TextMate commands.
In this post I’ll show you how to add two useful commands to TextMate, then move through the steps I take for theme code cleanup and put the commands into practice.
First, let’s add the commands to a TextMate bundle. If you don’t know how to add commands to a TextMate bundle, or don’t have your own bundle set up yet, start here and add a new bundle. I usually add my own commands to a bundle called @lance so it sticks to the top of my bundle list.
