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.

Popular Posts

Read Next

Exciting New Tools for Designers, November 2023

We’ve got a mix of handy image helpers, useful design assets, and clever productivity tools, amongst other treats. Some…

The Dangers of Doomscrolling for Designers and How to Break Free

As a creative professional, navigating the digital realm is second nature to you. It’s normal to follow an endless…

From Image Adjustments to AI: Photoshop Through the Years

Remember when Merriam-Webster added Photoshop to the dictionary back in 2008? Want to learn how AI is changing design…

3 Essential Design Trends, November 2023

In the season of giving thanks, we often think of comfort and tradition. These are common themes with each of our three…

30 Obsolete Technologies that will Perplex Post-2000s Kids

Remember the screech of dial-up internet? Hold fond memories of arcade machines? In this list, we’re condensing down 30…

15 Best New Fonts, October 2023

We’re entering the final quarter of 2023, and even in the pre-holiday lull, there are still plenty of fonts to get…

Progressive Web Apps (PWAs): Unlocking The Future of Mobile-First Web Development

There are over 5.4 billion mobile users today, meaning that over 68% of the population tap into an online business via…

The 12 Most Controversial Ad Campaigns of the 21st Century

How far would an organization be willing to go for the chance to generate a little extra buzz? In this list, we're…

20 Best New Websites, October 2023

The Bento trend is still going strong: In some cases, we see this extend to the layout, but many more are picking…

Exciting New Tools for Designers, October 2023

This month, we have a whole bag of goodies for designers, developers, and designevelopers alike. (Yes, we did just make…

The 10 Most Successful Rebrands of All Time - Ranked

We’re all familiar with rebrands going wrong, but what happens when they go right? From McDonald’s health kick to…

3 Essential Design Trends, October 2023

Every now and then, website design trends can leave you scratching your head. This month’s collection includes some of…