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

Featured Plugin - WordPress Ecommerce Shopping Cart Plugin

Out of all the WordPress ecommerce plugins available, MarketPress has got to be the winner - easy to configure, powerful functionality, multiple gateways and more. A simply brilliant plugin!
Find out more

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.

The Nuts and Bolts

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

Featured Plugin - WordPress Facebook Plugin

Would you like to add Facebook comments, registration, 'Like' buttons and autoposting to your WP site? Well, The Ultimate Facebook plugin has got that all covered!
Find out more

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

Featured Plugin - WordPress Wiki Plugin

To get a wiki up and running you used to need to install Mediawiki and toil away for days configuring it... not any more! This plugin gives you *all* the functionality you want from a wiki, in WordPress!!!
Find out more

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.

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?

How Does It Respond?

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.

Featured Plugin - WordPress Newsletter Plugin

Now there's no need to pay for a third party service to sign up, manage and send beautiful email newsletters to your subscriber base - this plugin has got the lot.
Find out more

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

Featured Plugin - WordPress Membership Site Plugin

If you're thinking about starting a paid, or just private, membership site then this is truly the plugin you've been looking for. Easy to use, massively configurable and ready to go out of the box!
Find out more

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

Featured Plugin - WordPress Appointments Plugin

Take, set and manage appointments and client bookings without having to leave WordPress. Appointments+ makes it easy.
Find out more

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?

Comments (24)

  1. I hate this theme so much. I think there’s small aspects of it that look modern, but overall the impression I get from it is outdated and busy. What’s up with it being left-aligned? On my widescreen monitor, there’s about a third of the window that is just empty white space. I agree with you on the nice typography and color scheme, and I like how the post titles overlap the featured image on the default post layout, however the rest is ugly and lacks creativity. So those are my thoughts regarding the theme itself. As far as it being the DEFAULT theme for all of WordPress, you have to be kidding me. I’ve never actually used a default theme for a long term use, but it was always nice to have a clean, minimalist theme as the starting point with new installations of WordPress, or for using as a test environment for testing plugins, etc.

    I hate this new theme. Okay rant over.

  2. The theme sucks. You won’t catch me using it on any of my sites in the future! Heck, I don’t even use the previous ones except for Twenty Twelve, and only because it works great with a plugin I use for a particular purpose.

    I never have enjoyed the default themes much. Way too restrictive, so I’m working on a theme of my own that I’m called “Basic by Design”. I’m no programmer, so it’s going to be a learning experience.

  3. “For 2014, WordPress have broken away from previous defaults to produce a theme for a specific use, namely magazines.”

    Maybe a pretty neutral theme would be better – that crammed in look is not to everyones taste.

    And I thought that WordPress were moving towards a CMS type layout.
    Why not give us the choice – blog or business type CMS homepage?

    Fabulous in-depth review Chris as ever.

  4. Great review! Thank you for testing the theme for your readers. It is a flawed theme, I agree. First impression is that it is striking. But when I installed it using the beta tester plugin for localhost site, I saw my first impression was wrong. It might look good with their content, but not with mine.

    I am not likely to use the Twenty Fourteen theme in any of my sites. It has some nice features but those are cancelled by a fixed width layout which is left-aligned and not centered (!!!). Another negative is long page titles going over the sidebar. I was going to report about the long page titles but saw someone else did already. It’s not going to be fixed. I was laughing at what ends the makers of that theme would do so that the theme would be accepted into 3.8 http://core.trac.wordpress.org/ticket/25008

    The only WP default theme I use is the Twenty Twelve using a child theme to transform it to what I want.

  5. Regarding left-align:
    For the heck of it, I set the margin: auto; and, frankly, centering it doesn’t improve it as it is. The black of the left sidebar coming off of the (in my case) black-framed monitor works. If it was going to be centered, there would need to be a fade or something to make that look smoother.

    Regarding this theme not being everyone’s cup of tea:
    One thing I noticed is that all of the Twenty* themes are still shipping with core. If you’re new to WordPress, you have a handful of options: Twenty Twelve—which can be a great non-blog site theme. Twenty Thirteen if you want a blog that has more color to it. Twenty Fourteen if you want to go the magazine route, etc.

    The advantage is that it doesn’t matter if every theme is everyone’s desire, there’s an option for many different situations to start. If you don’t like it, the .org repo and the broader marketplace is there. If you do, great.

    • Agree, no theme is going to be to everyone’s liking and I think with all the WP defaults the approach has been to provide a fairly basic – but solid – theme for building on.

      TwentyFourteen is no different in that respect. What is different, perhaps, is the way the theme has been promoted. The tagline “a beautiful magazine theme” makes statements about how good the developers think it is and about its intended use.

  6. Great review Chris!

    I know that a number of people hate the theme but, to be honest, this is the best theme came from the main WP house yet.

    I’ll put design on the side this time because it could be pointless to discuss about different tastes etc.

    In my opinion, a theme coming with WP is just placeholder for the better, premium one :) At the end, we all wouldn’t have our lovely WP jobs if Matt do everything excellent. In fact, I don’t think that he wants that – in his and the WP.org best interest is to get more involvement of the community and that’s the right way of doing that for sure – make a space for improvements :)

  7. Like twenty thirteen, this theme seems to have a camp that loves it and a camp that totally hates it. I’ve already made a child theme for it on my personal blog, MichaelMusgrove.com and am enjoying using it. But I can see how purists (and developers) may not love it.

    Very nice writeup!

  8. 2011 was the ideal WP default theme.

    It had enough style to use out of the box, unlike 2012 which was way to bland and 2013 which was way too over styled.

    2012 was too bland; 2013 was too garish; 2014 is too specific. 2011 was just right.

    We might have got sick of the proliferation of 2011 sites, but damn, they were easier on the eyes than 2012, 13 or 14.

    Like 2011, WP default theme should always be clean, simple, classy, generic and usable out of the box. It should contain some nice default images but shouldn’t be too identifiable (like 2013 or 2014).

    Hopefully that is what Matt means he’s planning for 2015.

  9. “You can’t please everyone all of the time” springs to mind!

    With a default theme, you have three options:

    – Make a plain, boring, featureless theme defaulted to blog or pages view every time.

    – Make a “standard” theme aimed at one WordPress using one niche and stick with that every time, generally showcasing the same (or similar) WordPress features.

    – Create different themes that appeal to different WordPress using niches and showcase different WordPress features each time.

    To me I have to say that I think the third option above is the right way to go… And it appears that the WordPress devs agree.

    Anything they come up with isn’t going to be to everyone’s taste. I thought Twenty Thirteen was shocking initially – but then I saw why some people might like it even if I’d never use it. Twenty Twelve made me think “Really? 90’s retro may be alright for some things – but a forward thinking CMS?” – and then I grew to love the simplicity – again even if I’d never personally use it. Twenty Eleven was the last theme I’d personally use – until now.

    For some specific projects, I can see myself recommending Twenty Fourteen. The default theme of Multisite sites for example. No longer do I need to go to a third party theme – and either pay through the nose, use a free theme that messes up what is expected from “standard WordPress”, or use the default theme that was over simplistic and failed to showcase WordPress’s abilities enough.

    Even if I’m in the minority, I welcome Twenty Fourteen – and I hope that we see something new next year/release…. Even if I don’t personally like it – it will showcase different side to WordPress which will hopefully bring new people to use it. :-)

  10. Very helpful review. I have spent most of the day moving a WP site over to it and it looks much better. I can get a visitor seeing more content at a glance with this.
    I must get a tablet to see that view.
    The only problem I have had is the grid. I have had to upload larger images to accommodate this set up.

  11. Hi Chris. I’m a newbie at this and figured the default theme was a good one to start with; however, I really do need to be able to have different sidebar content on a few of my pages. Seeing as it’s been several months since this article was posted, do you know of any plugins that have been developed that allow one to assign different side bar content on different pages? If not, might you recommend a theme that does offer this feature?

  12. I was wondering if there is a way to have a post open up directly into a URL. I have a “subscribe to my newsletter image” in one of the post boxes in the header and would like clients to be able to go directly to my leadpage or the designated url . I tried setting this up through the featured image section and the page itself. Any advice would be appreciated!

  13. Hi Chris, this may be similar to Jennifer’s comment, but I’m also a newbie and need the simplest solution to these things! You said: “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.” That’s exactly what I want to do – use the full-width template on posts… Can you give me idiot instructions to the plugins I need please?! Thanks!

Participate