WordPress TwentyFourteen Theme: A Flawed Magnificence

Love ‘em or hate ‘em, WordPress default themes are essential.They get routinely put in on each upgraded and new WordPress website, gaining large publicity.

For 2014, WordPress have damaged away from earlier defaults to provide a theme for a selected use, particularly magazines. And never simply any journal theme however a “lovely journal theme”.

And it definitely is gorgeous. However if you wish to use the theme you’re additionally going to should cope with its flaws.

The brand new WordPress default theme is gorgeous however has some vital flaws

TwentyFourteen is formally “an attractive journal theme“. A daring declare however there’s little doubt that visually it packs a far larger punch than the impartial TwentyTwelve and appears much better than any of its predecessors, specific the quirky TwentyThirteen.

In the event you haven’t seen it, go to the demo website now and spend 5 minutes taking part in with it.

Proceed studying, or bounce forward utilizing these hyperlinks:

Nuts and Bolts: TwentyFourteen Theme
TwentyFourteen Theme Responsiveness
Is It A Journal Theme?
Potential Enhancements

Nuts and Bolts: TwentyFourteen Theme

The structure of TwentyFourteen is an easy header, left-hand sidebar and footer configuration with an optionally available right-hand sidebar that aligns itself with the content material. The skinny header is fastened and completely seen.

The colour-scheme is black, white and inexperienced and the location makes use of the Lato font from Google.

Featured Content material drives
the slider and grid

The theme customizations are just about the identical as all different themes with the addition of the Featured Content material perform which permits content material to be featured on the house web page in both a slider or a grid. Content material is chosen both by specifying a tag or by making the content material “sticky”.

There are two menu places, one within the header and one within the left-hand sidebar and three widgetized areas – Major Sidebar, Content material Sidebar and Footer Space. The footer permits for limitless widgets to be added however the 4 is perfect. 

The theme gives an extra widget to the usual listing: TwentyFourteen Ephemera. That is really fairly a helpful widget and is used extensively within the Content material Sidebar within the demo however is let down a little bit by offering no choices to regulate the output.

The brand new ephemera widget is a helpful addition

What’s Good About TwentyFourteen

There’s a lot to be admired about this theme:

Nice use of fonts implies that even white textual content on a black seems to be good!

Shade scheme – regardless of reservations of black backgrounds, the black, white and inexperienced mixture works. The liberal use of white-space within the layouts helps significantly
Typography is great all through, with clear, crisp, professional-looking fonts that work nicely even when displayed as white textual content on a black background (not my favorite mixture)
Photos additionally look good, significantly the massive featured pictures on the submit pages
Styling on the tags – they seem like tags creating an prompt visible cue

Tags that seem like tags
And easy efficient submit
navigation

Put up navigation styling – merely stacking the navigation is far cleaner and aesthetically pleasing than the standard left and proper alignment

Put up metadata styling – sensible icons work nicely with the capitalized textual content
Fly-out menus work nicely within the left-hand margin and once more the white textual content on the inexperienced background is surprisingly efficient
Featured picture grid – extremely efficient and easy mechanism for highlighting posts
Ephemera widget – this could possibly be much more helpful if only some extra choices have been obtainable
Search habits – while it’s debatable whether or not a consumer needs to be made to click on to disclose a search enter field, I do just like the textbox showing beneath the search icon somewhat the latest annoying development of unveiling a textbox subsequent to the search icon

However There Are Drawbacks

At instances the wonder is simply pores and skin deep and the theme is just not with out its flaws:

Menus can fly-out of the web page boundaries

Slider – must have giant pictures (larger than 800px) to work correctly on desktop which could make utilizing the theme on an current website tough

Slider – doesn’t have autoplay performance!
Grid – would really like to have the ability to specify the configuration of the grid (i.e. variety of pictures per row) somewhat than leaving it to the responsive design
Featured Content material doesn’t help customized submit sorts – solely posts are chosen even when the customized submit kind helps the Tags taxonomy
Fly-out menus can’t be used for the right-most choices within the prime menu in any other case they “fly” outdoors of the boundaries of the web page
Content material sidebar is utilized to all content material – in order for you it on the house web page you get it on all posts and pages (though on pages you’ll be able to select the full-width template to take away the sidebar*)
Enormous hole on the prime of the “inner” pages – that is to accommodate the search bar however I’m undecided why it couldn’t have overlayed the search enter because it does on the house web page
Fastened max-width design however left-aligned somewhat than centered
Header is sort of brief – becoming an honest sized brand in there would possibly show difficult!
House web page – When itemizing posts and utilizing the grid, the featured picture of the primary submit is fights for consideration with the grid

The featured picture of a submit itemizing is actual eyeball competitors for the grid

Tangent : Why Don’t Posts Have Templates?

While this isn’t particular to TwentyFourteen it did crop up while I used to be taking part in with the Content material Sidebar and hiding it on pages by choosing the full-width template.

Why doesn’t WordPress permit for Put up Templates prefer it does for Web page Templates? It will be actually helpful to have the ability to choose templates for displaying posts in precisely the identical means as with pages and but that is at present solely doable by way of plugins.  A feature-request for TwentyFifteen, maybe?

TwentyFourteen Theme Responsiveness

Again to TwentyFourteen. It’s, naturally, a responsive theme however how nicely does it reply and what selections does it make? You would possibly ask why will we care so long as it responds however how the location responds to non-desktop shows could affect in your content material selections.

Tablets

Slider is arguably a greater possibility for a pill residence web page

In responding to pill shows, the theme hides the highest menu, changing it with the usual three-bar menu icon. Clicking on the icon, reveals the menu by means of a primary develop and isn’t as efficient or as aesthetically-pleasing because the search enter textbox overlay reveal.

The grid responds seamlessly, reconfiguring itself to be two pictures however you could take into account that in panorama solely 4 pictures will likely be obtainable, in portrait mode a customer will see six however that’s all.

The content material seems to be nice, with the typography and huge characteristic pictures excelling on the smaller display screen and making the studying expertise an actual pleasure.

There are three points although, all attributable to the transferring of the left-hand sidebar to between the content material and the footer.

Firstly, the efficient disappearance of the sidebar implies that the menu within the prime bar is more likely to be the place customers go searching for navigation. This just about forces you to make use of that top-menu as the location’s primary navigation which not solely reduces your choices however may additionally discover you operating into the fly-out problem highlighted beforehand.

Secondly, transferring the left-hand sidebar utterly adjustments its context when transferring between units (once more not a problem confined to TwentyFourteen). On the desktop, it is a crucial piece of actual property (all of us bear in mind our ‘F’ studying patterns) so content material is picked accordingly, however transfer it to the footer and that content material seems to be decidedly misplaced.

Thirdly, with the location’s tagline dwelling within the left-hand sidebar, it’s not instantly seen to pill customers which implies that new customers will solely have the location’s title and the 4 or six featured pictures (or only a single picture if you happen to go for the slider) to find out the aim and usefulness of the location. That strikes me as being fairly a job.

An answer can be to cover the left-hand sidebar altogether and for the menu icon on the highest bar to slide-in a selected sidebar (or on the very least the left-sidebar) permitting the location proprietor to determined what will get revealed on clicking the icon. This can be a method that works nicely on tablets and is turning into extra prevalent. It’s stunning that TwentyFourteen didn’t additionally take this path.

Mobiles

Giant menus may
take up greater than
one display screen on a cell

As with the tablets, the content material seems to be nice on a cell machine and when it comes to the pure mechanics of responding to the smaller display screen, the theme has no issues.

Nonetheless, the identical points highlighted above with tablets are additionally skilled on a cell. The truth is, the navigation problem is definitely accentuated as a result of restricted display screen dimension and the very actual risk {that a} menu of any size received’t match.

As well as, displaying featured content material within the grid format is just not well-suited to cell units the place the grid is diminished to only a single picture. With just one picture becoming on a display screen, there’s plenty of scrolling concerned to get previous the featured content material to some other content material, that means that even if you happen to use a static web page as type of “welcome” then it customers could nicely surrender earlier than they get there.

The slider, alternatively, works very well each on mobiles and tablets (higher in portrait mode because the content material beneath the slider is seen) presenting one thing of a quandry for TwentyFourteen homeowners with the grid performing much better on the desktop than the slider however the slider the higher selection for tablets and mobiles.

As with tablets, the slider is arguably a better option for the house web page for cell customers

Is It A Journal Theme?

It’s known as the “lovely journal theme” however is it really appropriate for magazines?

There’s no doubting that TwentyFourteen has a shiny, high-production look which may work nicely significantly for a writer with a prepared provide of top quality pictures.

The design is definitely extra minimal that a lot of the journal themes round, an strategy I like, and it could appear that the more than likely customers can be these publishers who deal with high quality (maybe longer kind) somewhat than amount. I do marvel how tough it could be to insert promoting with out breaking the high-production really feel of the location so maybe that is additionally of most curiosity to those that publish totally free or use a subscription mannequin.

The house web page is a matter although, particularly on non-desktop units. A website has to have the ability to inform its story, its objective, its raison d’être nearly instantly and my concern is that the design doesn’t permit this.

Publishers may also be postpone by how the theme responds to tablets, specifically, as it is a rising and more and more essential phase of their viewers.

Potential Enhancements

It’s a little bit harsh to speak about enhancements when the theme hasn’t even been launched but but when I needed to make use of TwentyFourteen, right here’s a listing of what I’d be customizing:

Including customized submit kind help to the Featured Content material
Permitting consumer to specify the variety of pictures in a grid row
Including the power for the slider to routinely transfer to the following slide
Skill to assign the Content material Siderbar to residence web page solely
Choice to specify a featured picture part for every platform (i.e. grid > desktop, slider > pill, cell)
Centering the design
Changing the left-hand sidebar to a slide-in sidebar and hooking it as much as the menu icon within the header

The Washup

TwentyFourteen is gorgeous. The colour-scheme, the typography, the prominence given to pictures, the liberal use of whitespace all contribute to a refined, high-production feel and look.

Whether or not it might used successfully out-of-the-box, although, is debatable. The best way the theme responds to tablets and cell units is a matter, particularly on the house web page, and the slider wanting higher on the smaller screens while the grid wanting higher on the bigger screens forces website homeowners make an pointless compromise.

It would sound harsh however I feel that TwentyFourteen falls a little bit in need of expectation. It’s definitely an enormous enchancment on TwentyThirteen however it’s definitely not premium and it could nicely battle to fulfill Matt Mullenweg’s need to have “a full 12 months of a default theme, to be loved for a 12 months”.

In fact, it is a free theme and WordPress default themes have by no means aimed to push the boundaries of theme design and improvement.

TwentyFourteen does probably not supply an answer that may be successfully used out-of-the-box. What it’s does do, although, is supply a major leg-up for these with entry to WordPress theme know-how who need to construct a high-quality journal website and are ready to iron out its kinks and work round its flaws.