Developing Your Theme Sense

What is “Theme Sense”?

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 tutorial.

Theme Sense is not about memorizing code

Number SenseLetā€™s think about mathematics and ā€œnumber senseā€ for a second. If you teach a kid to just memorize arithmetic facts with flashcards, without explaining why the answers are what they are, that kid may struggle when they encounter a fact they havenā€™t memorized. Being able to demonstrate, for example, 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?

You donā€™t have to understand the mechanics behind every single line of PHP.

If youā€™ve read this far, youā€™re mostly there. 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 me a car, you’d instantly know what 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 know to check the quality of the parts ā€” super important for safety. Your years of experience driving and riding in cars has led to your “car sense”.

Use a similar approach when approaching your next theme project. Great questions to ask yourself are: ā€œWhich files do I need to include in my theme? What roles do 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 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.

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 Theme Review page at the WordPress Codex. Scan the list and make note of any that refer to features you’re using in your theme. For example, item that refer to data validation and sanitation are necessary to protect your site from Cross-Site-Scripting (XSS) attacks.

I think the principle behind the second item on the 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. I mostly just want you to know to be aware of the importance of timeliness and keeping your theme as secure as possible.

Understand the essential elements of WordPress themes

Theme Building BlocksMost 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). Some blocks, such as the header, footer, content, and sidebar, youā€™ll use in every theme you develop. You just might stick them together differently depending on the purpose your theme is trying to serve for users. 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 in 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 on the Codex of all deprecated functions.

The Log Deprecated Notices plugin scans your theme for deprecated functions, as well as outdated template files and incorrect uses of functions.

The WordPress Theme Review Team has a set of guidelines that all themes must meet in order 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 & 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 lesson are:

  • Be aware of how WordPress looks now.
  • 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.

How To Create a WordPress Theme

This post is part of theĀ The ThemeShaper WordPress Theme Tutorial: 2nd Edition that will show you how to create a powerful WordPress Theme from scratch. Read it from the beginning and code yourself up something awesome.

  1. WordPress Theme Tutorial Introduction
  2. Developing Theme Sense
  3. Theme Development Tools
  4. Creating a Theme HTML Structure
  5. Template and Directory Structure
  6. Setting Up Your Theme Functions
  7. Secure Your WordPress Theme
  8. The Header Template
  9. The Index Template
  10. The Single Post, Post Attachment, & 404 Templates
  11. The Comments Template
  12. The Search Template & The Page Template
  13. The Archive Template
  14. The Sidebar Template & The Footer Template
  15. Reset-Rebuild Theme CSS & Define Your Layouts
  16. Custom Background & Custom Header
  17. Distributing Your WordPress Theme

8 responses

  1. Conrad King Avatar
    Conrad King

    Thank You for this tutorial, I have for several days been attempting to make some changes to a theme and have broken it several times. šŸ˜¦ I see now that this will be the place to start.

  2. Neat! šŸ™‚

  3. Many great post lately Michelle, I simply love it!

    Emil

  4. […] Home › Themes › Developing Your ThemeĀ Sense […]

  5. […] Developing Your Theme Sense | ThemeShaper Posted in: PHP […]

  6. this tutorial is very useful for me. It shows what precautions to be taken while creating a theme.

  7. […] esse post Ć© uma traduĆ§Ć£o de ā€œDeveloping Your Theme Senseā€œ publicado por Michelle Langston no […]

  8. This helps me. Thanks.