Navigation

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

Web Development, WordPress | Nov 1, 2010

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

Share this post
Comments (no login required)
  • http://laroouse.com piyansitll

    very nice work thanks a lot

  • http://www.simonlawrence.com/ Simon Lawrence

    A benefit of using HTML5 is self-closing and non self-closing e.g. and syntax can be used in the same document. As WordPress core uses a mixture of this syntax, using the HTML5 doctype instantly makes a document valid.

    http://wiki.whatwg.org/wiki/FAQ#Should_I_close_empty_elements_with_.2F.3E_or_.3E.3F

    It also triggers standards mode and is backwards compatible in old browsers.

    Theme developers can start using it in new themes and easily convert old themes as well.

  • http://mariomartinez.com Mario

    Nice! I’ll base my new design on it.

  • http://www.amberweinberg.com Amber Weinberg

    While it had a few small improvements over Kubrick, the code was much worse in general. At least in Kubrick the code was smaller and more organized. Opening up Twenty Ten shows a huge rats nest of nasty unoptimized code, divitis, and other nasty code. I couldn’t even use it as a starting theme and made my own called Hijinks (it’s offered for download on my site)

    • http://www.impressivewebs.com Louis

      I’m sure there are problems with the code, but I think those are more to do with the complexities added in comparison to Kubrick. Kubrick has a very simple layout. And don’t forget that Twenty Ten is not using the new semantic elements, and it probably has to be near pixel-perfect in all browsers (including IE6 and IE7). That will make the likelihood for nested divs a lot higher. I don’t think they included any HTML that wasn’t absolutely necessary for the overall purpose of the theme.

      Also, as you point out, the default WP theme should not be used as a starting point for theme development. That has caused problems in the past. Unfortunately, people will do it. I think experienced theme developers will develop their own starting points, as you have.

  • http://www.boostinspiration.com Boost Inspiration

    Nice read. Great improvements in the coding.

  • http://www.new.himachalsoft.com Himachalsoft

    Very helpful, I’m using new WP but did not know completely about these udates.

  • http://ellisbenus.com/ Ellis Benus – Web Design Columbia Mo

    “Closing Tags are Commented to Indicate IDs and Classes”

    Amen! I do not understand why everyone doesn’t do this?!

    I’ve been doing this since I first started writing HTML,
    and insist the practice is necessary, especially inside a dynamic page
    like WordPress renders.

    Please, coders and theme designers, start doing this for everything! :-)

    Great points.

    • Jorgen Kesseler

      Because in well written, well indented code you don’t need to comment each and every opening / closing tag. To me it just looks like unnecessary clutter making the code less readable.

      On the other hand, I do agree it does help when working with generated code where a tag is opened in one template file and closed in another. Although in that case I use PHP comments and not HTML comments so they don’t show up in the generated page.

  • http://free-magentoextensions.com/magento-themes.html Magento Themes

    Hi

    This is really fantastic article and full of knowledge. The code snippets given in this article are nice informative and provide a lot of programming help to its readers.
    Thanks for sharing great tutorial.

  • http://www.xcubelabs.com/ Blackberry App Development

    I often forget to keep these points in Mind. Thanks for the useful resource.

  • http://www.nemadesign.de Christian Schramm

    We used Twenty Ten twice as a base for individual styled blogs. It was really handy build a child theme of Twenty Ten overwriting CSS rules and modifying some HTML of the Twenty Ten theme. Our own blog also uses Twenty Ten – http://blog.nemadesign.de
    The look is very different, but this are almost only CSS modifications.

    For the next blogs I will use this theme again. Even the modifications to get Twenty Ten a three column layout is not to hard.

    So thanx for your article, it may help other people to get into WordPress theming by starting with Twenty Ten. The comments in the HTMLcode you mentioned are really helpful for developers but should be removed when going productive. Is there a plugin cleaning up HTMLcode for non-admins?

  • Jon Ivee Hernandez

    Very nice techniques.

  • http://sabasdesign.com msabas

    I am currently working on a new project site and I have decided to use the twenty ten theme. I know basics of code and how to make changes, but I have to say that twenty ten has been one of the best things i have had to work with. The code is easier to read and manage. Like i said im not a css or code guru but i manage with what i know but this one here just makes me feel like I really am in control of what i want to do in a much simpler way.

  • http://www.psyched.be/wordpress Darkened Soul

    It has indeed improved alot, this basic theme. And it is a foundation for future “best practises” in the developpers community.

    Let’s hope we can do the same ourselves in future projects.

  • http://www.jauhari.net/ Jauhari

    Thanks for this review.. Twenty Ten is Good enough Default Theme

  • http://waviaei.com Toru

    While good points, all good theme designers would have been practicing these already for a while. Its all part of “good” coding. Quite surprising to see how many people thinks these are “good techniques”. But then, exactly for that point, it is good that TwentyTen has adopted these codings :-)

  • http://ericolisboa.com Erico Lisboa

    Nice one! =)

  • http://awesome.hu adikahorvath

    It’s useful for beginners,
    but i think there are unnecessary things for a wp developers :)

  • steve

    It looks great and is very functional, however I am finding its code and css interfere with a lot of the standard plugins which is dissapointing.