Twenty Fourteen Responsive WordPress Theme Review

twenty fourteen themeTo start off the new year I decided to play with the new Twenty Fourteen WordPress theme. It is fully responsive and aimed towards online magazine web sites.  After some initial exploring and figuring out the new features, I was pleased with this theme. Here is the demo website you can use to try all the page and post types, http://twentyfourteendemo.wordpress.com. I won’t go into all the features and page types here, that site is a good resource for that. I will point out some great features and a couple of bugs fixes.One feature I liked was being able to set “featured” posts to display on the home page by using a pre-determined tag, they suggest using “featured”. It is a very easy way to feature the posts. In the past I would create custom fields and write PHP functions to display the posts.  This saves me having to do that programming. Also with these featured posts, you have the option to display the posts’ images in a grid format or slider format (jQuery lightbox slideshow). In the past I have found that getting the right jQuery lightbox can be tricky (it can conflict with other jQuery code in WordPress), so having this built in and working is a refreshing change.

The top menu swaps into a nice compacted responsive drop down menu when viewing the theme in tablets or smart phones. For developers, the media queries are very easy to follow in the style.css file.

The theme comes with 3 default pages: default, contributor and full width page. The full width page template is a bit deceiving.  I initially thought it would remove the left side widget area (not sure I like the left side yet), instead it creates a page with a full width header image, yet still keeps the widget area on the left.  Also, with the contributor and full width pages, the top title and featured image get cut off at the top.  This can be fixed in the CSS on line 3220 by changing the margin-top: –48px to margin-top: 0px. I imagine they will fix this bug in the first update. The tag is a bit long:

Change

.full-width .site-content .has-post-thumbnail .entry-header, .full-width.singular .site-content .hentry.has-post-thumbnail {
margin-top: -48px;
}

to

.full-width .site-content .has-post-thumbnail .entry-header, .full-width.singular .site-content .hentry.has-post-thumbnail {
margin-top: 0px;
}

The Twenty Fourteen theme is left aligned as well (I personally do not like this). It is an easy fix to center align your page. On line 805, the  .site tag can be modified, add margin: 0 auto.

Change

.site {
background-color: white;
max-width: 1260px;
position: relative;
}

to

.site {
background-color: white;
max-width: 1260px;
position: relative;
margin: 0 auto;
}
As I start to customize this theme more and dig into it with a real web design situation, I will discover new features and bugs and add them to this list. Overall though, I am pleased with the theme and will use it immediately for my base code of new themes.
3.5/5 stars