Theme Sense: a Common Sense Approach to Theme Development

Articles

What is “Theme Sense”? Theme Sense is an intuitive understanding of WordPress themes: the relationship between the files that make up a theme, and how those files fit in with WordPress. Theme Sense is what you’ll have at the end of this article.

Theme Sense is not about memorizing code

Let’s think about mathematics and “number sense” for a second. If you teach a kid just to memorize arithmetic facts on flashcards, without explaining why the answers are what they are, that kid may struggle when they encounter a fact they haven’t memorized. For example, demonstrating 5+2 = 7 using blocks helps the kid “see” how numbers work. They can then use this knowledge to help solve any problem they run into in the future, even if they haven’t memorized the answer.

Theme Sense works the same way. It’s important to focus on the larger picture of what you’re trying to achieve, instead of memorizing specific bits of code.

How do I develop my Theme Sense?

Theme Sense is about being aware of what you’re doing, and making conscious, informed decisions along the way. For example, if I asked you to design a car for me, you’d instantly know which parts to include in your design—engine, frame, tires, windows, exhaust pipe, and so on. You might not know how every single part works, but you’d be able to explain why you need them in the design, and you’d be sure to verify the quality of the parts—which is super important for safety.

Use a similar approach when you tackle your next theme project. Ask yourself:

• Which files do I need to include in my theme?
• What role does each of these files play?
• Why am I about to paste this bit of code into my theme?
• Where did this bit of code come from, and who wrote it?
• What purpose does this code bit serve? Is it up to date? Is it safe?

You don’t have to understand the mechanics behind every single line of PHP, because it may change two, three, or four release cycles down the road. What’s important is that, like with cars, you’re able to demonstrate a macro understanding of what your theme is doing under the hood.

That said, here are some specific things you can do to develop that macro understanding and to keep your Theme Sense sharp.

Know “What’s New” with WordPress

WordPress code is all over the web. It’s even found its way offline, and into books and magazines. When you gaze at stars in the night sky, you’re seeing them as they existed millions of years ago. Likewise, when you examine a WordPress code sample, that sample is a snapshot of WordPress as it existed at the time of writing, and not necessarily WordPress as it exists now.

Awareness of the latest WordPress versions and major new features will help you evaluate the timeliness of WordPress tutorials, books, and plugins. To keep up with WordPress releases, subscribe to the WordPress News blog.

Get in the habit of checking dates

The first thing you should check before reading any tutorial or book is the date that it was published. Remember how important it is to know “what’s new” with WordPress? That will help you evaluate which parts of a tutorial are still relevant, and which code is still current enough to use in your theme. As you may already know, it’s dangerous to use obsolete code in a theme because it may have known vulnerabilities that hackers can exploit. Relevancy is not an all-or-nothing deal, though, and code doesn’t come with expiration dates. You must determine relevancy on a case-by-case basis. The good news is, there are several resources you can turn to.

If you do use outdated code in a theme, it’s not the end of the world. There are plugins, such as Developer and Theme-Check, that will help you optimize your WordPress theme development environment and scan your theme’s code for currency, respectively.

In addition to the developer plugins, it’s great to get into the habit of adopting the best security practices listed in the Theme Security and Privacy Guidelines on the WordPress Codex’s Theme Review page. Scan the list and make note of any that refer to features you’re using in your theme. For example, items that refer to data validation and sanitation are necessary to protect your site from Cross-Site-Scripting (XSS) attacks.

The principle behind the second item on the Security and Privacy list is especially pertinent when we’re talking about code relevance and timeliness:

Themes are required to implement Theme Options and Theme Settings pages deliberately, rather than relying on copy-and-paste scripts from website tutorials.

Copy-and-paste scripts may become obsolete very quickly. This applies not only to theme options code, but code from any tutorial. Be aware of the importance of timeliness and keeping your theme as secure as possible.

Understand the essential elements of WordPress themes

Most websites, whether they run WordPress or not, have the same general sections: a header area, a main content area, a sidebar, and a footer. It might be helpful to think of these sections as blocks (or car parts, your choice). You’ll use some blocks, such as the header, footer, content, and sidebar, in every theme you develop. You just might stick them together differently depending on the purpose your theme is trying to serve. With WordPress themes, template files such as header.php, index.php, sidebar.php, and footer.php are your “blocks.” Therefore, the theme is the completed structure that you build with these blocks.

Awareness of these essential elements will go a long way to helping you to develop theme sense. For a quick primer on the parts of a WordPress theme, check out the The Theme Development page on the WordPress Codex.

Know where to find the latest coding examples and standards

The WordPress.org Codex is a great starting point to research WordPress functions and template tags that you find in tutorials. If a function is deprecated, The Codex page for that function will note it and point you to the most current alternative. You can also find a list of all deprecated functions in the Codex. Additionally, check out the Log Deprecated Notices plugin, which logs deprecated functions, function arguments, and files whenever they occur in themes, plugins, and WordPress Core.

The WordPress Theme Review Team has a set of guidelines that all themes must meet to be approved for the official WordPress.org free themes directory. Evaluating your code against these standards can help you to stay abreast of best practices and standards.

Finally, when in doubt about something, there are places you can go to ask questions, such as the Themes and Templates section on the WordPress.org Support forums. If you prefer live chat, there’s the general #wordpress support channel on the irc.freenode.net network.

This is not to say that you should never break out of the mold when building themes. Rather, the idea is that it’s smart to be aware of the decisions you’re making for each theme you develop and why you are making these decisions.

Take-aways

The points to take away from this article are:

• Know what major new features were introduced in the latest version of WordPress.
• Pay attention to the dates on all WordPress-related tutorials. Use those, combined with your knowledge of the newest WordPress features to evaluate the relevancy of any given tutorial.
• Understand that code changes regularly, but the basic building blocks of a theme stays generally the same.
• Be aware of current best practices and standards. This can also come in handy when evaluating a tutorial’s relevancy.
• Understand why you are making the decisions you’re making for your theme—for example, what purpose does each template file in your theme serve? If you’re about to paste a large block of code into your theme that you dug up from Google, what purpose is that code serving? Is the code relevant? Up to date? Secure? You don’t have to memorize every line of PHP. What’s important is that you’re able to comprehend your theme on a macro level.

Image credits:

• “IKEA Espressivo Bulb Replacement Instructions” by Richard Eriksson, (CC-BY 2.0)
• “Please Don’t Eat Me” by Nikki.L, (CC-BY 2.0)
• “DOS Angry Birds” by Patrick Hoesly, (CC-BY 2.0)