WordPress TwentyFourteen Theme: A Flawed Beauty

WordPress TwentyFourteen Theme: A Flawed Beauty

Love ‘em or hate ‘em, WordPress default themes are important.They get automatically installed on every upgraded and new WordPress site, gaining massive exposure.

For 2014, WordPress have broken away from previous defaults to produce a theme for a specific use, namely magazines. And not just any magazine theme but a “beautiful magazine theme”.

And it certainly is beautiful. But if you want to use the theme you’re also going to have to contend with its flaws.

Screenshot of a TwentyFourteen home page
The new WordPress default theme is beautiful but has some significant flaws

TwentyFourteen is officially “a beautiful magazine theme“. A bold claim but there’s no doubt that visually it packs a far bigger punch than the neutral TwentyTwelve and looks far better than any of its predecessors, particular the quirky TwentyThirteen.

If you haven’t seen it, go to the demo site now and spend five minutes playing with it.

Continue reading, or jump ahead using these links:

Nuts and Bolts: TwentyFourteen Theme

The layout of TwentyFourteen is a simple header, left-hand sidebar and footer configuration with an optional right-hand sidebar that aligns itself with the content. The thin header is fixed and permanently visible.

The color-scheme is black, white and green and the site makes use of the Lato font from Google.

Screenshot of the featured content options
Featured Content drives
the slider and grid

The theme customizations are pretty much the same as all other themes with the addition of the Featured Content function which allows content to be featured on the home page in either a slider or a grid. Content is selected either by specifying a tag or by making the content “sticky”.

There are two menu locations, one in the header and one in the left-hand sidebar and three widgetized areas – Primary Sidebar, Content Sidebar and Footer Area. The footer allows for unlimited widgets to be added but the four is optimal. 

The theme provides an additional widget to the standard list: TwentyFourteen Ephemera. This is actually quite a useful widget and is used extensively in the Content Sidebar in the demo but is let down a little by providing no options to control the output.

Scressnshot of the ephemera widget
The new ephemera widget is a useful addition

What’s Good About TwentyFourteen

There is much to be admired about this theme:

Screenshot showing menu and featured content in grid
Great use of fonts means that even white text on a black looks good!
  • Color scheme – despite reservations of black backgrounds, the black, white and green combination works. The liberal use of white-space in the layouts helps considerably
  • Typography is excellent throughout, with clear, crisp, professional-looking fonts that work well even when displayed as white text on a black background (not my favourite combination)
  • Images also look good, particularly the large featured images on the post pages
  • Styling on the tags – they look like tags creating an instant visual cue
  • Screenshot of post and tag navigation in a post footer
    Tags that look like tags
    And simple effective post
    navigation

    Post navigation styling – simply stacking the navigation is much cleaner and aesthetically pleasing than the traditional left and right alignment

  • Post metadata styling – smart icons work well with the capitalized text
  • Fly-out menus work well in the left-hand margin and again the white text on the green background is surprisingly effective
  • Featured image grid – highly effective and simple mechanism for highlighting posts
  • Ephemera widget – this could be even more useful if only a few more options were available
  • Search behavior – whilst it is debatable whether a user should be made to click to reveal a search input box, I do like the textbox appearing underneath the search icon rather the recent annoying trend of revealing a textbox next to the search icon

But There Are Drawbacks

At times the beauty is only skin deep and the theme is not without its flaws:

  • Screenshot of fly-out menu outside of page boundary
    Menus can fly-out of the page boundaries

    Slider – needs to have large images (bigger than 800px) to work properly on desktop which might make using the theme on an existing site difficult

  • Slider – doesn’t have autoplay functionality!
  • Grid – would like to be able to specify the configuration of the grid (i.e. number of images per row) rather than leaving it to the responsive design
  • Featured Content does not support custom post types – only posts are selected even if the custom post type supports the Tags taxonomy
  • Fly-out menus can’t be used for the right-most options in the top menu otherwise they “fly” outside of the boundaries of the page
  • Content sidebar is applied to all content – if you want it on the home page you get it on all posts and pages (although on pages you can choose the full-width template to remove the sidebar*)
  • Huge gap at the top of the “internal” pages – this is to accommodate the search bar but I’m not sure why it couldn’t have overlayed the search input as it does on the home page
  • Fixed max-width design but left-aligned rather than centered
  • Header is quite short – fitting a decent sized logo in there might prove challenging!
  • Home page – When listing posts and using the grid, the featured image of the first post is fights for attention with the grid
Screenshot of the home page with a grid and featured image
The featured image of a post listing is real eyeball competition for the grid

Tangent : Why Don’t Posts Have Templates?

Whilst this is not specific to TwentyFourteen it did crop up whilst I was playing with the Content Sidebar and hiding it on pages by selecting the full-width template.

FREE EBOOK
Your step-by-step roadmap to a profitable web dev business. From landing more clients to scaling like crazy.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

FREE EBOOK
Plan, build, and launch your next WP site without a hitch. Our checklist makes the process easy and repeatable.

By downloading this ebook I consent to occasionally receive emails from WPMU DEV.
We keep your email 100% private and do not spam.

Why doesn’t WordPress allow for Post Templates like it does for Page Templates? It would be really useful to be able to select templates for displaying posts in exactly the same way as with pages and yet this is currently only possible via plugins.  A feature-request for TwentyFifteen, perhaps?

TwentyFourteen Theme Responsiveness

Back to TwentyFourteen. It is, naturally, a responsive theme but how well does it respond and what choices does it make? You might ask why do we care as long as it responds but how the site responds to non-desktop displays may impact on your content decisions.

Tablets

Screenshot of the slider homepage next to a grid homepage
Slider is arguably a better option for a tablet home page

In responding to tablet displays, the theme hides the top menu, replacing it with the standard three-bar menu icon. Clicking on the icon, reveals the menu through a basic expand and is not as effective or as aesthetically-pleasing as the search input textbox overlay reveal.

The grid responds seamlessly, reconfiguring itself to be two images but you need to keep in mind that in landscape only four images will be available, in portrait mode a visitor will see six but that is all.

The content looks great, with the typography and large feature images excelling on the smaller screen and making the reading experience a real pleasure.

There are three issues though, all caused by the moving of the left-hand sidebar to between the content and the footer.

Firstly, the effective disappearance of the sidebar means that the menu in the top bar is likely to be where users go looking for navigation. This virtually forces you to use that top-menu as the site’s main navigation which not only reduces your options but may also find you running into the fly-out issue highlighted previously.

Secondly, moving the left-hand sidebar completely changes its context when moving between devices (again not an issue confined to TwentyFourteen). On the desktop, it is an important piece of real estate (we all remember our ‘F’ reading patterns) so content is picked accordingly, but move it to the footer and that content looks decidedly out of place.

Thirdly, with the site’s tagline living in the left-hand sidebar, it’s not immediately visible to tablet users which means that new users will only have the site’s title and the four or six featured images (or just a single image if you opt for the slider) to determine the purpose and usefulness of the site. That strikes me as being quite a task.

A solution would be to hide the left-hand sidebar altogether and for the menu icon on the top bar to slide-in a specific sidebar (or at the very least the left-sidebar) allowing the site owner to decided what gets revealed on clicking the icon. This is a technique that works well on tablets and is becoming more prevalent. It is surprising that TwentyFourteen didn’t also take this path.

Mobiles

Screenshot of a menu on mobile
Large menus could
take up more than
one screen on a mobile

As with the tablets, the content looks great on a mobile device and in terms of the pure mechanics of responding to the smaller screen, the theme has no problems.

However, the same issues highlighted above with tablets are also experienced on a mobile. In fact, the navigation issue is actually accentuated due to the limited screen size and the very real possibility that a menu of any length won’t fit.

In addition, displaying featured content in the grid format is not well-suited to mobile devices where the grid is reduced to just a single image. With only one image fitting on a screen, there is a lot of scrolling involved to get past the featured content to any other content, meaning that even if you use a static page as form of “welcome” then it users may well give up before they get there.

The slider, on the other hand, works really well both on mobiles and tablets (better in portrait mode as the content beneath the slider is visible) presenting something of a quandry for TwentyFourteen owners with the grid performing far better on the desktop than the slider but the slider the better choice for tablets and mobiles.

Screenshots of the slider and grid home pages on a mobile
As with tablets, the slider is arguably a better choice for the home page for mobile users

Is It A Magazine Theme?

It’s called the “beautiful magazine theme” but is it actually suitable for magazines?

There’s no doubting that TwentyFourteen has a glossy, high-production look which could work well particularly for a publisher with a ready supply of high quality images.

The design is certainly more minimal that most of the magazine themes around, an approach I like, and it would seem that the most likely users would be those publishers who focus on quality (perhaps longer form) rather than quantity. I do wonder how difficult it might be to insert advertising without breaking the high-production feel of the site so perhaps this is also of most interest to those who publish for free or use a subscription model.

The home page is an issue though, especially on non-desktop devices. A site has to be able to tell its story, its purpose, its raison d’être almost immediately and my concern is that the design does not allow this.

Publishers might also be put off by how the theme responds to tablets, in particular, as this is a growing and increasingly important segment of their audience.

Potential Improvements

It’s a little harsh to talk about improvements when the theme hasn’t even been released yet but if I wanted to use TwentyFourteen, here’s a list of what I’d be customizing:

  • Adding custom post type support to the Featured Content
  • Allowing user to specify the number of images in a grid row
  • Adding the ability for the slider to automatically move to the next slide
  • Ability to assign the Content Siderbar to home page only
  • Option to specify a featured image component for each platform (i.e. grid > desktop, slider > tablet, mobile)
  • Centering the design
  • Converting the left-hand sidebar to a slide-in sidebar and hooking it up to the menu icon in the header

The Washup

TwentyFourteen is beautiful. The color-scheme, the typography, the prominence given to images, the liberal use of whitespace all contribute to a polished, high-production look and feel.

Whether it can used effectively out-of-the-box, though, is debatable. The way the theme responds to tablets and mobile devices is an issue, especially on the home page, and the slider looking better on the smaller screens whilst the grid looking better on the larger screens forces site owners make an unnecessary compromise.

It might sound harsh but I think that TwentyFourteen falls a little short of expectation. It is certainly a vast improvement on TwentyThirteen but it’s certainly not premium and it may well struggle to meet Matt Mullenweg’s desire to have “a full year of a default theme, to be enjoyed for a year”.

Of course, this is a free theme and WordPress default themes have never aimed to push the boundaries of theme design and development.

TwentyFourteen does not really offer a solution that can be effectively used out-of-the-box. What it is does do, though, is offer a significant leg-up for those with access to WordPress theme know-how who want to build a high-quality magazine site and are prepared to iron out its kinks and work around its flaws.

Have you played with TwentyFourteen? What do you think of the latest default WordPress theme?

Tags:

Chris Knowles A WordPress pro, Chris has a bent on hacking WordPress, content management, and online media.