Twenty Ten’s Front-End Code: 5 Things it Gets Right

Wdd Logo.
November 01, 2010

thumb2By now most bloggers using WordPress should have upgraded to the latest version of WordPress which is officially at version 3.0.1.

Along with updates to the core framework, when version 3.0 was released the WordPress team also added a new default theme, replacing the now obsolete Kubrick. The new theme, as most of you are probably aware, is called Twenty Ten.

Not to sound too corny here, but from the first moment I laid eyes on Twenty Ten, I fell in love with it. But I’m not talking about theme’s visual design (which is pretty humdrum); I’m talking about the front-end code, which has seen a number of improvements over the previous default theme.

In this article, I’ll discuss some of these improvements that I feel are worthy of examination and imitation.

And keep in mind that this is not a discussion of the features of the theme itself; this is a discussion of the structure and organization of the HTML and CSS and how it provides an excellent model to follow for front-end developers.

It’s HTML5 Ready

The first thing you’ll notice when you view the source of the Twenty Ten theme is the simplified doctype, which means it’s technically capable of using HTML5. So, while there aren’t any of the common HTML5 elements in the theme (like and ), the HTML5 doctype is a step in the right direction.

New Doctype in Twenty Ten

You’ll notice in the source that there are a few other markup simplifications: the character encoding declaration is simplified, and the HTML element doesn’t have the xlmns” attribute. Both of these improvements are based on the HTML5 spec.

So, even if you’re not using any of the common HTML5 elements in your pages, you could still make your pages HTML5-ready by including the new simplified doctype, and removing some of the other soon-to-be obsolete elements, thus following the example of the developers of Twenty Ten.


Proper Use of the h1 Tag

This is an improvement that’s easier to examine when looking at the actual PHP files that create the markup, and constitutes a definite improvement over Kubrick for best-practices SEO, semantics, and accessibility.

In Kubrick, on every page the top-level heading (<h1>) is the website title. This is fine for the home page, but not secondary pages. Thus, a single article page in Kubrick has the article’s title marked up with the <h2> element. According to Roger Johansson of 456 Berea Street this is not best practice.

Take a look at the screen grab below displaying how the new Twenty Ten theme handles this problem:

Twenty Ten's Improvement in Heading Structure

The PHP code in header.php changes the markup depending on which page is being viewed. If the home page is being viewed, the element that surrounds the page title becomes the <h1> element. On any other page, the title is wrapped in a <div>. In the latter case, this allows the <div> element to be more meaningful on secondary pages, contributing to SEO and overall accessibility.


Eric Meyer’s CSS Reset Included

Recognizing the usefulness of a CSS reset, the Twenty Ten theme developers have also included a variation of Eric Meyer’s CSS Reset at the top of the theme’s CSS file, crediting Meyer in a comment:

Twenty Ten Includes Eric Meyer's CSS Reset

A reset can go a long way towards achieving cross-browser compatible CSS layouts. So the inclusion of the reset is no surprise here and is another technique employed by the Twenty Ten developers that’s worthy of imitation.


Closing Tags are Commented to Indicate IDs and Classes

At one of my previous jobs, I was working on a lot of inherited code, and some of the previous developers suffered from divitis, making it difficult to rearrange or target elements in the markup. So, in new projects, I started adding comments at the end of <div> elements, to ensure that during future maintenance anyone could easily see which element ended where. This was especially important for deep-nested sets of <div> tags.

The Twenty Ten developers have recognized the value of comments to identify the names of <div> elements, so they’ve done something similar, except they’ve taken it a step further:

Twenty Ten's Helpful HTML Comments

Their comments not only include the ID or class name of the element they identify, but also indicate whether or not the name is a class or ID. The first comment in the screenshot above is for an element that has an ID of primary” (indicated by “#primary”) and a class name of widget-area” (indicated by “.widget-area”).

So, while my own convention is to just name the element regardless of class or ID, they’ve included a single character (the hash or period) to identify the attribute on which the name is based. This is a good practice to follow, and is just a simple way to enhance the clarity and maintainability of your markup.


CSS is Commented More Clearly

Finally, staying on the topic of commenting, I noticed a clear improvement in the way CSS is commented and organized in Twenty Ten, as compared to Kubrick. This is no doubt something that many front-end developers have tried to do for a number years, and it’s good to see the Twenty Ten developers following suit. Below is a screenshot showing the distinct comments in Twenty Ten’s CSS file, making them very easy to find when scanning through the styles:

Twenty Ten's Distinct CSS Comments

By contrast, in Kubrick the comments were not as easy to spot when scanning the file:

Kubrick's Less Distinct CSS Comments


Conclusion

It’s understood that one of the best ways to become a better coder is to study the work of others. And that advice certainly applies to front-end code that is easily accessible on pretty much every website.

The five things I’ve discussed in this article are not necessarily anything new in front-end development, but I think seeing these practices implemented on a single project is unique, and so the Twenty Ten developers (who are evidently Matt Thomas and company) have done a great job in this regard, providing some excellent techniques and examples worthy of imitation.


This post was written exclusively for Webdesigner Depot by Louis Lazaris, a freelance writer and web developer. Louis runs Impressive Webs where he posts articles and tutorials on web design. You can follow Louis on Twitter or get in touch with him through his website.

Have you noticed anything else about the new default WordPress theme’s code that’s worthy of discussion? Please share your comments below.

WDD Staff

WDD staff are proud to be able to bring you this daily blog about web design and development. If there’s something you think we should be talking about let us know @DesignerDepot.

Read Next

Apple Opts for AR over VR at WWDC

An Apple VR headset has been one of the most widely-rumored devices of the last few years, and it was finally settled a…

Exciting New Tools for Designers, June 2023

We’re halfway through 2023 already, and the number of incredible apps, tools, and resources for designers is mounting.

3 Essential Design Trends, June 2023

This month we are focusing on three trends within a bigger website design trend – different navigation menu styles and …

15 Best New Fonts, May 2023

The choices you make when selecting a typeface have more impact on your design than almost any other decision, so it’s …

10+ Best Tools & Resources for Web Designers and Agencies (2023 updated)

Having the ability to envision a tastefully designed website (i.e., the role creativity plays) is important. But being …

20 Best New Websites, May 2023

This month, there are tons of great new agency websites to get excited about. 3D animated prisms are a popular theme, a…

How to Find the Right White Label Website Builder for Your Agency

Web design agencies face a lot of obstacles in closing the deal with new clients. One of the most common ones is the ar…

Exciting New Tools For Designers, May 2023

There are hundreds of new tools for designers and developers released each month. We sift through them all to bring you…

3 Essential Design Trends, May 2023

All three of the website design trends here mimic something bigger going on in the tech space, from a desire to have mo…

10 Best AI Tools for Web Designers (2023)

It’s time to stop worrying if AI is going to take your job and instead start using AI to expand the services you can of…

10 Best Marketing Agency Websites (Examples, Inspo, and Templates!)

Marketers are skilled in developing strategies, producing visual assets, writing text with high impact, and optimizing …

15 Best New Fonts, April 2023

Fonts are a designer’s best friend. They add personality to our designs and enable fine typography to elevate the quali…