web analytics

WordPress Twenty Eleven and Twenty Ten Themes Compared and Reviewed

Technology > WordPress

Summary. This document compares and reviews the Twenty Eleven Theme versus the Twenty Ten Theme available for WordPress.org self-hosted websites. Both themes were developed by the WordPress.org team.

History. The Twenty Ten theme was released in the year 2010 along with a major release of WordPress. The Twenty Eleven theme was released in the year 2011. Presumably the Twenty Eleven theme should offer improvements over the Twenty Ten theme since it is a newer theme.

Twenty Eleven Theme Benefits. The Twenty Eleven Theme offers the following benefits.

  • Font Improvement. The Twenty Eleven Theme uses a Helvetica family font like Arial instead of a Serif font like Times Roman which was the default body font used in the Twenty Ten Theme.
  • Mobile Readability. The Twenty Eleven Theme looks different when viewed using a mobile device. Depending on personal preference, some people may find the mobile view appealing.
  • Search Box. The Twenty Eleven Theme has a search box embedded in the navigation bar below the header image. This has an elegant look, but does use up navigation space.
  • Showcase Page Template. The Twenty Eleven Theme comes with a Showcase page template that allows a page to use the full width of the website. This is good for wider tables and graphics. It does have some problems as indicated below.
  • Website Title Header Text Control. The ability to turn off the website title header text is a great improvement over the Twenty Ten Theme.

Twenty Eleven Theme Limitations. The Twenty Eleven Theme has the following limitations.

  • Border Around Images. For some reason, the Twenty Eleven Theme places a thin line border around all photos and graphics images. This disrupts the flow of the page and contrasts unattractively with any existing image borders.
  • Footer Widgets. The Twenty Eleven Theme reduces the number of footer widgets from four to three. This is a limitation for those who want to have a variety of widgets in the footer.
  • Header Height. The Twenty Eleven Theme header graphic size is 1000 pixels wide by 288 pixels high. This uses up valuable page space, especially when considering that many computer displays don’t have the height they did in the past. The Twenty Ten Theme header graphic size is 940 pixels high by 198 pixels high, which seems like a better design choice and uses up less space.
  • Image Problems. For some reason, images that aren’t displayed in 100% of their original imported size can end up with an odd discoloration instead of their original white background.
  • Mobile Readability. WordPress has a variety of mobility plug-ins that detect when a website visitor is using a mobile device, and then display the site differently. Most of these don’t offer much improvement over what the Twenty Ten Theme provides without any modification. The mobile view of the Twenty Eleven Theme is poorly designed, difficult to navigate, and significantly alters the site content. It also disables the ability to zoom text on the iPhone and similar devices. Unfortunately, there’s no way to really see the site as a smaller version of the full-screen view. By contrast, the Twenty Ten theme looks fine on a mobile device.
  • Posts Display Without Right Column. When viewing the list of recent posts, they display chronologically and the right column widgets can be seen. When looking at an individual post, however, the only option seems to be having the post text displayed centered with wide margins on either side and no right column widgets. This creates a lack of continuity on the site and causes critical content to be missing.
  • Search Box. The Twenty Eleven Theme has a search box embedded in the navigation bar below the header image. This has an elegant look, but does use up navigation space and there’s no way to turn it off. Many sites that have just a few pages, don’t need a search box – especially if all available pages are already displayed in the navigation menu.
  • Showcase Page Template. WordPress themes can have their own uniquely designed page templates. Usually these will determine the width of presented content and whether or not the right column will be showing. The Twenty Eleven Theme comes with a Showcase page template. Unfortunately, the Showcase page template also displays the most recent post below the showcase page. This is awkward because a person interested in a featured item is not likely interested in whatever the previous random post was about. Also, for purposes of printing, the printed document will contain the desired document as well as some other document.

Twenty Ten Theme Customizations. Two traits of the Twenty Ten Theme make it slightly less desirable:

  1. The header of the theme displays the website name in a huge font along with the tagline in a font almost too small to read. If the tagline is too long, it will wrap into two, three, or more lines of text. In any case, there ends up being a space at the top of the page. This problem can be corrected as described in the document WordPress Twenty Ten Theme – Removing the Header Website Title Text.
  2. The base font used is a serif font with a Times Roman look. This isn’t quite as easily readable as a san-serif font like Helvetica. This problem can be corrected as described in the document WordPress Twenty Ten Theme – Changing the Base Font From Times to Helvetica.

These two problems can be resolved by editing the style.css file. It’s possible to do this if you are self-hosting, or if you are using WordPress.com you can pay a nominal fee for customization.

By Greg Johnson

Greg Johnson is a freelance writer and tech consultant in Iowa City. He is also the founder and Director of the ResourcesForLife.com website. Learn more at AboutGregJohnson.com