Getting Started With the _s Theme

There are some simple instructions in the theme readme.txt on how to get started with our new starter theme, _s, but, to be honest, I’m not exactly the most reliable readme reader myself so here are those instructions with a bit more explanation. :)

The first thing you want to do is copy the _s directory and change the name to something else. Like, say, megatherium.

Then you’ll need to do a three-step find and replace with your favorite text editor on the _s name in all the templates.

Continue reading

On Breaking and Fixing WordPress Themes at WordCamp Singapore 2011

My coworkers at Automattic and I frequently discuss the speed with which we’re able to onboard new themes into the WordPress.com theme directory.

Our top priority as the Theme Team is to make sure that all of our users feel like they have a theme that fits them perfectly; in order to meet that goal we’re focused on bringing a variety of themes into WordPress.com through a few primary channels: the WordPress.org theme directorypremium theme shops; and Automattic (in-house) themes.

It’s often the case that each conversion—that is, making a theme’s code WordPress.com-safe and ready—will take us anywhere between one week and one month, depending on the complexity and quality of the code. In a perfect world, though, we’d be able to snap our fingers and have every single awesome-looking theme available on WP.com right now.

Continue reading

Twitter Bootstrap and WordPress Theme Frameworks

If you haven’t yet you should make some time to read Building Twitter Bootstrap at A List Apart. Especially if you’re interested in building a WordPress Theme Framework or WordPress Starter Theme.

Twitter Bootstrap is essentially a collection of HTML-CSS templates and some Javascript put together to “help designers and developers quickly and efficiently build awesome stuff online.” It sounds an awful lot like a lot of WordPress Theme Frameworks and Starter Themes, right? It looks like one too.

Continue reading

What Do You Really Need in a WordPress Starter Theme?

I think it’s safe to say that I’m somewhat obsessed with themes that help you get your WordPress projects started quickly. Most likely because I’ve been there, staring at an empty project folder wondering where I should begin. Well, you shouldn’t have to stare at that empty folder for any project. Even when you’re starting from scratch you’re probably not really starting from scratch, right? You’re taking an existing WordPress theme, either your own or someone elses, and hacking at it until it’s something new. That theme is your Starter Theme.

But not all Starter Themes are created equal. If you’re using the same theme again and again and always adding the same code to it, well, shouldn’t that code always be in there in the first place? Or how about the reverse? If you’re always cleaning out the same code from your theme is that really a great starter theme? Should it have sample theme options? Or a CSS reset? Basic styles? How much style? A grid system? … The questions could go on for a while.

So, what are you using for your Starter Theme? And what do you think you really need in a WordPress Starter Theme?

The WordPress Theme Lock-In Effect

Konstantin Kovshenin has a great post on one of my pet peeves. The lock-in effect. The rub? When you go to switch themes you find that your content is tied into the theme (or plugin) you’ve been using. Not good.

WordPress has been known for its backwards compatibility for ages. In fact, you’ll not loose your content when you downgrade (provided that you’re using the core features only,) plus WordPress provides several export options that can easily be read by other software and services. WordPress gives you control over your data so you’re never locked in to using WordPress itself. WordPress does not lock you in.

Plugins and themes are somewhat different though, mainly because developers are overlooking the WordPress API and a bunch of features which already ship with WordPress, and tend to reinvent the wheel. Another situation is where plugins or themes introduce some brand new features unavailable in WordPress so they store your data in a unique way which is not what other themes and plugins can understand. If not treated well, the lock in effect can cause loss or corruption of your data …

Via WPCandy.

My WordPress and Web Design Feed Short List

I recently started subscribing to RSS feeds again after having given them up totally for several months. I was relying on the cream to rise to the top in Twitter and a handful of sites that I would visit every day or week. And now, after declaring feed bankruptcy, I’m back at it again (switching to Reeder as my feed reader was a big part of that decision). I have pared things down though. Here’s my must-follow short list of WordPress and Web Design sources that I’m following right now. These sources let me keep on top of what’s going on in WordPress and Web Design.

Continue reading

theme-code-matters

Theme Code Matters, Too

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:

Briefly, a description of each of the above:

The Theme Check plugin

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

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:

  1. They establish general consistency among WordPress themes for users and developers.
  2. They ensure protocols for theme security.
  3. 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.

Theme Feature WordPress Feature to Use
Custom Logo/Banner Custom Headers
Background Color/Image Custom Background
Menu Management WordPress Navigation Menus
Theme file editing WordPress Theme Editor and Plugin Editor
Theme Options Page Settings API
Theme Options Page Design Stick with the WordPress UI instead of making your own design. (Ryan Imel from WPCandy wrote a blog post on this subject)
Design options (color pickers, font size tools, border size, etc) Keep to a minimum. Encouraging users to make design changes with CSS is more scalable in the long run.
Direct Database Queries WordPress Template Tags and Functions
Thumbnails Post Thumbnails (Featured Images)

Security

Constant Vigilance: Keeping themes secure requires active, continuous effort

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

In addition, WordPress has adopted standards for writing PHP, HTML, and CSS. We use these standards when converting themes for use on WordPress.com:

Conclusion and … how to get started

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:

  • Make sure you’re aware of the current theme review guidelines.
  • 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.
  • Turn on WP_DEBUG in wp-config.php to check for hidden errors, warnings, and notices.
  • Install the Theme Check, Log Deprecated Functions, and Debug Bar  plugins. Run their tests often to catch (and fix) potential problem areas before they pile up.
  • 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.

Resources for further reading

Let Your WordPress Smilies Smile

I love smilies. I mean, just take a look at these two happy fellows.

They look pretty happy, right? I think they’d look a lot happier if they didn’t have the same background color and padding as the rest of the images in my theme though. Don’t you? Make sure you’re adding something like the following to your theme stylesheet somewhere after your main image styles. This is a good start for resetting the existing image styles you might have.

img.wp-smiley {
	background: transparent;
	border: none;
	margin: 0;
	padding: 0;
}

Do that in your WordPress themes and you’re all set. :)