{"id":150603,"date":"2016-01-05T11:00:33","date_gmt":"2016-01-05T16:00:33","guid":{"rendered":"http:\/\/premium.wpmudev.org\/blog\/?p=150603"},"modified":"2022-03-25T02:03:02","modified_gmt":"2022-03-25T02:03:02","slug":"twenty-sixteen-review","status":"publish","type":"post","link":"https:\/\/wpmudev.com\/blog\/twenty-sixteen-review\/","title":{"rendered":"Twenty Sixteen Theme Guide: New Take on Old Favorite"},"content":{"rendered":"<p><a href=\"https:\/\/wordpress.org\/themes\/twentysixteen\/\" rel=\"noopener\" target=\"_blank\">WordPress Twenty Sixteen theme<\/a> is actively used on over 200,000+ sites <a href=\"https:\/\/wpmudev.com\/hosting\/\" target=\"_blank\" rel=\"noopener\">hosted by WPMU DEV<\/a>. This guide looks at the theme that has been described as &#8220;a modernized approach of an ever-popular layout.&#8221;<\/p>\n<p>Yes, it&#8217;s a blog theme. With its horizontal header and optional right sidebar, it&#8217;s reminiscent of the Twenty Ten theme. But while Twenty Sixteen&#8217;s design is certainly not unique or groundbreaking, it does offer a clean, polished and minimalist design that&#8217;s perfect for bloggers.<\/p>\n<ul>\n<li><a href=\"#introducing\">About WordPress Twenty Sixteen Theme<\/a><\/li>\n<li><a href=\"#elements\">Key Design Elements of Twenty Sixteen<\/a><\/li>\n<li><a href=\"#customizing\">Customizing Twenty Sixteen<\/a><\/li>\n<li><a href=\"#excerpts\">Excerpts, New Widget Areas, and Social Icons<\/a><\/li>\n<li><a href=\"#technical\">Technical Changes and Community Reaction<\/a><\/li>\n<li><a href=\"#directions\">New Directions in WordPress Theming<\/a><\/li>\n<li><a href=\"#solid\">Sweet Twenty Sixteen &#8211; A Solid Theme<\/a><\/li>\n<\/ul>\n<p>In this article, we&#8217;ll take a look at Twenty Sixteen&#8217;s primary features and how you can customize it to suit your own website.<\/p>\n<h2 id=\"introducing\">About WordPress Twenty Sixteen Theme<\/h2>\n<p>Twenty Sixteen was designed by Automattic&#8217;s Takashi Irie, who also designed the Twenty Fourteen and Twenty Fifteen default themes.<\/p>\n<p>Anyone taking an initial glance at the Twenty Sixteen\u00a0<a href=\"https:\/\/wordpress.org\/themes\/twentysixteen\/\" rel=\"noopener\" target=\"_blank\">preview page on WordPress.org<\/a> could be forgiven for coming down hard on this offering. Without much actual content to display, the theme looks minimalistic to the point of being rudimentary.<\/p>\n<p>But as Takashi points out in the theme&#8217;s release notes, the Twenty Sixteen is organized around a relatively small set of core concerns:<\/p>\n<blockquote><p>&#8220;Twenty Sixteen is a modernised approach of an ever-popular layout \u2014 a horizontal masthead and an optional right sidebar that works well with both blogs and websites. It has custom color options that allow you to make your own Twenty Sixteen. The theme was designed on a harmonious fluid grid with a mobile first approach. This means it looks great on any device.&#8221; &#8211; Takashi Irie.<\/p><\/blockquote>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/twenty-sixteen-demo.png\" alt=\"The default Twenty Sixteen demo.\" width=\"735\" height=\"557\" \/><figcaption class=\"wp-caption-text\">The somewhat uninspiring default Twenty Sixteen demo.<\/figcaption><\/figure>\n<\/div>\n<p>However, a quick look at the rather more polished demo pages for Twenty Sixteen <a href=\"https:\/\/twentysixteendemo.wordpress.com\/\" rel=\"noopener\" target=\"_blank\">over at WordPress.com<\/a> starts to show some of the theme&#8217;s power.<\/p>\n<p>That initially off-putting black surround border, for example, starts to look more like a tip of the design hat to popular blogging sites such as <a href=\"http:\/\/kottke.org\/\" rel=\"noopener\" target=\"_blank\">Kottke<\/a>\u00a0rather than a <a href=\"https:\/\/make.wordpress.org\/core\/2015\/08\/29\/twenty-sixteen-is-now-on-github\/#comment-27321\" rel=\"noopener\" target=\"_blank\">continental European death notice<\/a>.<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/twenty-sixteen-wordpress-com-demo.png\" alt=\"WordPress.com Twenty Sixteen demo.\" width=\"730\" height=\"735\" \/><figcaption class=\"wp-caption-text\">With a little more content, Twenty Sixteen starts to shine.<\/figcaption><\/figure>\n<\/div>\n<p>With some high-quality images and decent blocks of text to work with, it soon becomes clear that, while stripped down, Twenty Sixteen is indeed a clean, powerful take on modern blogging, which holds up well against the <a href=\"https:\/\/medium.com\/designing-medium\/death-to-typewriters-9b7712847639\" rel=\"noopener\" target=\"_blank\">typographic excellence<\/a> that competitors such as <a href=\"https:\/\/medium.com\" rel=\"noopener\" target=\"_blank\">Medium<\/a> have brought to the table.<\/p>\n<h2 id=\"elements\">Key Design Elements of Twenty Sixteen<\/h2>\n<p>If we fire up a local install of WordPress, we can start stepping through some of those points.<\/p>\n<p>For this review, I\u00a0simply downloaded a fresh copy of WordPress 4.4 and imported some test content from the <a href=\"https:\/\/codex.wordpress.org\/Theme_Unit_Test\" rel=\"noopener\" target=\"_blank\">Theme Unit Test page<\/a>, which is available to download from the WordPress Codex.<\/p>\n<p>As you can see, Twenty Sixteen is installed as the default theme:<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/twenty-sixteen-default-install.png\" alt=\"Twenty Sixteen default install in WordPress 4.4.\" width=\"735\" height=\"325\" \/><figcaption class=\"wp-caption-text\">Twenty Sixteen is the default theme in WordPress 4.4.<\/figcaption><\/figure>\n<\/div>\n<p>The first thing you notice is that the horizontal masthead, which disappeared from Twenty Fifteen&#8217;s blog-focused layout, is back and in this case is framed by the black colored border I\u00a0mentioned above.<\/p>\n<p>I\u00a0added in a few menu items, a header image (you&#8217;ve got dimensions of 1,200 x 280 pixels to play with here), and a tiled background image to our demo content below to give you an idea of how this looks in action. As you can see, the designers didn&#8217;t hold back on white space this time around:<\/p>\n<div  class=\"wpdui-pic-large   \" >\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1364x1364\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/twenty-sixteen-masthead.jpg\" alt=\"Menu and header image added to the Twenty Sixteen masthead.\" width=\"1364\" height=\"525\" \/><figcaption class=\"wp-caption-text\">Menu and header image added to the Twenty Sixteen masthead.<\/figcaption><\/figure>\n<\/div>\n<p>Twenty Sixteen gives you the choice of whether to go single-column or include an optional right-hand sidebar. If a single column is more to your taste, just leave the sidebar widget blank. Doing this will also give you the option to include an extra large featured image per post, which can be up to 1,200px wide.<\/p>\n<div  class=\"wpdui-pic-large   \" >\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-1364x1364\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/demo-featured-image.jpg\" alt=\"Overhanging demo featured image in action.\" width=\"1325\" height=\"759\" \/><figcaption class=\"wp-caption-text\">Overhanging demo featured image in action.<\/figcaption><\/figure>\n<\/div>\n<p>As you can see from the image above, these larger images (anything over 840px width) will overflow naturally to the left and create a pleasing bit of vertical rhythm in the main column. You&#8217;ll also see that post meta details have been nicely integrated in what is essentially a faux column inside the main content area that works particularly well on larger screen sizes.<\/p>\n<p>You&#8217;ll find the same effect in evidence with pull quotes \u2013 these have been elegantly styled and can be easily positioned by adding a class of either <code>alignleft<\/code> or <code>alignright<\/code> to a <code>blockquote<\/code> element. Aligning left will cause the text to overhang the main column and visually set your quote off a little more. Aligning right will nestle the quote nicely within the text block.<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/blockquote-left-align.png\" alt=\"Blockquote content left aligned.\" width=\"735\" height=\"425\" \/><figcaption class=\"wp-caption-text\">Pull quotes on display in Twenty Sixteen.<\/figcaption><\/figure>\n<\/div>\n<p>Speaking of text, the default typography and grid layout employed by Twenty Sixteen really starts to shine when you add longform content to your site.<\/p>\n<p>There&#8217;s plenty of room for text to breathe and it maintains its legibility admirably across all screen sizes. A line length of around 80 characters is in evidence on larger screens, and shrinks down well to around the 40 character mark on smaller devices, meaning your content should scan nicely regardless of what device it&#8217;s being read on.<\/p>\n<h2 id=\"customizing\">Customizing Twenty Sixteen<\/h2>\n<p>Twenty Sixteen ships with five default color schemes, which you can quickly switch between via the Customizer: default, dark, grey, red, and yellow.<\/p>\n<p>Depending on personal taste, the yellow and red defaults may be a bridge too far for many sites, but the default and dark options certainly look clean and crisp right out of the box.<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/twenty-sixteen-yellow.png\" alt=\"Twenty Sixteen yellow default color scheme.\" width=\"735\" height=\"544\" \/><figcaption class=\"wp-caption-text\">The yellow default color scheme in Twenty Sixteen.<\/figcaption><\/figure>\n<\/div>\n<p>As you&#8217;d expect from a default theme, the number\u00a0of items available to tweak using the Customizer is relatively limited. In addition to the various color schemes, you&#8217;ve got options for including header and background images, along with basic color control and menu and widget settings.<\/p>\n<h2 id=\"excerpts\">Excerpts, New Widget Areas, and Social Icons<\/h2>\n<p>Twenty Sixteen gives you a handy way of teeing up your posts with the addition of post excerpts. These enable you to follow up on the promise of a headline and introduce your main content in a visually distinct manner, something I&#8217;m personally a big fan of.<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/twenty-sixteen-excerpt.png\" alt=\"Twenty Sixteen excerpt.\" width=\"735\" height=\"186\" \/><figcaption class=\"wp-caption-text\">Excerpts box on the Twenty Sixteen back end.<\/figcaption><\/figure>\n<\/div>\n<p>Pop into preview mode and you&#8217;ll see your excerpt nicely tucked in underneath the main headline on the page, as shown in the image below.<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/excerpts-in-action.png\" alt=\"Excerpts in action below the headline.\" width=\"735\" height=\"378\" \/><figcaption class=\"wp-caption-text\">Excerpts in action below the headline.<\/figcaption><\/figure>\n<\/div>\n<p>Moving further down an individual post, you&#8217;ve also got two new widgets to play with below the content area in Twenty Sixteen. These offer\u00a0a natural place to include specific information such as related articles or content-specific calls to action such as <a href=\"http:\/\/www.authorityhacker.com\/content-upgrades\/\" rel=\"noopener\" target=\"_blank\">content upgrade offers<\/a>.<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/twenty-sixteen-content-widgets.png\" alt=\"Twenty Sixteen content widgets.\" width=\"735\" height=\"434\" \/><figcaption class=\"wp-caption-text\">Content widget areas available in Twenty Sixteen.<\/figcaption><\/figure>\n<\/div>\n<p>Finally, when it comes to encouraging your readers to engage across various social media, Twenty Sixteen has excellent support for including a full range of pre-made social icons in your footer via the Social Links menu.<\/p>\n<p>Setting this up is as simple as going to <strong>Appearance &gt; Menus<\/strong><em>,<\/em>\u00a0creating a new menu, filling it with links to your social profiles, and assigning it to your <strong>Social Links Menu<\/strong>.<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/adding-social-links.png\" alt=\"Adding social links in Twenty Sixteen.\" width=\"735\" height=\"635\" \/><figcaption class=\"wp-caption-text\">Adding social links in Twenty Sixteen.<\/figcaption><\/figure>\n<\/div>\n<p>Facebook, Flickr, Instagram, Twitter and Pinterest are all supported, and you can find a full list of further destinations that the social menu will automatically assign icons for over at the theme&#8217;s <a href=\"https:\/\/theme.wordpress.com\/themes\/twentysixteen\/\" rel=\"noopener\" target=\"_blank\">WordPress.com page<\/a>.<\/p>\n<h2 id=\"technical\">Technical Changes and Community Reaction<\/h2>\n<p>As with the release of any new default theme, there&#8217;s been a considerable amount of development\u00a0<a href=\"https:\/\/make.wordpress.org\/core\/2015\/10\/23\/under-the-hood-of-twenty-sixteen\/\" rel=\"noopener\" target=\"_blank\">under the hood<\/a>, which might not be initially apparent when looking at Twenty Sixteen in action.<\/p>\n<p>Developer Matt Cromwell has a <a href=\"https:\/\/www.mattcromwell.com\/what-i-learned-by-contributing-to-twenty-sixteen\/\" rel=\"noopener\" target=\"_blank\">useful listing<\/a> of some of the main items he came across as part of the process of contributing to the theme during its development. Standout points include integration with <a href=\"https:\/\/www.travis-ci.com\/\" rel=\"noopener\" target=\"_blank\">Travis CI<\/a> for developers, <a href=\"https:\/\/github.com\/WordPress\/twentysixteen\/pull\/360\" rel=\"noopener\" target=\"_blank\">ongoing accessibility improvements<\/a>, and optimized JavaScript handling.<\/p>\n<p>At the time of writing, Twenty Sixteen had already clocked up an impressive 200,000+ active installs and is maintaining a steady four star rating, indicating that initial community reaction is generally positive so far.<\/p>\n<p>The reaction from industry sites such as Torque has also been broadly positive, and the theme has even <a href=\"http:\/\/www.filterjoe.com\/2015\/12\/23\/grinch-changed-to-the-twentysixteen-wordpress-theme\/\" rel=\"noopener\" target=\"_blank\">won over some diehards<\/a> who were previously very much averse to considering default themes.<\/p>\n<h2 id=\"directions\">New Directions in WordPress Theming<\/h2>\n<p>With the arrival of the\u00a0<a href=\"https:\/\/wpmudev.com\/blog\/using-wordpress-rest-api\/\" target=\"_blank\" rel=\"noopener\">WordPress REST API<\/a>, much of what we know about WordPress as a platform is in a state of rapid change, and theming is no exception. It will be extremely interesting to see which direction Twenty Seventeen takes things.<\/p>\n<p>Without falling too far into the realm of crystal balls, it seems likely that the REST API will be at the core of future theming efforts and that JavaScript may well be <a href=\"https:\/\/wpmudev.com\/blog\/javascript-resources-wordpress\/\" target=\"_blank\" rel=\"noopener\">the primary language<\/a> employed down the line.<\/p>\n<p>Developer Tim Nash\u00a0<a href=\"https:\/\/timnash.co.uk\/lets-say-bye-bye-to-default-themes\/\" rel=\"noopener\" target=\"_blank\">made the case<\/a>\u00a0for using Twenty Seventeen as a showpiece example of this approach in mid-2015, and mooted the possibility of stepping away from default themes entirely in future releases.<\/p>\n<div  class=\"wpdui-pic-regular  \">\n<figure class=\"wp-caption aligncenter\" data-caption=\"true\"><img loading=\"lazy\" decoding=\"async\" class=\"attachment-735x735\" src=\"https:\/\/wpmudev.com\/blog\/wp-content\/uploads\/2015\/12\/rest-plus-react.png\" alt=\"The combination of REST and React shows where WordPress theming could be heading.\" width=\"735\" height=\"370\" \/><figcaption class=\"wp-caption-text\">The combination of REST and React shows where WordPress theming could be heading.<\/figcaption><\/figure>\n<\/div>\n<p>In the meantime, developer Chris Hutchinson from The Times has already shown one possible path into the future by <a href=\"https:\/\/medium.com\/@chrishutchinson\/building-a-better-wordpress-4b2a771b4d0b#.3mx3bt1q7\" rel=\"noopener\" target=\"_blank\">rebuilding Twenty Sixteen as a React-powered application<\/a>.<\/p>\n<p>The launch of Automattic&#8217;s desktop app <a href=\"https:\/\/developer.wordpress.com\/calypso\/\" rel=\"noopener\" target=\"_blank\">Calypso<\/a>\u00a0has shown just how much can be achieved via JavaScript on even the largest scale WordPress installs, and Twenty Sixteen may well go down as the last of its particular kind.<\/p>\n<h2 id=\"solid\">Sweet Twenty Sixteen &#8211; A Solid Theme<\/h2>\n<p>Default WordPress themes won&#8217;t always be a natural fit for many site owners, but they play a crucial role in showcasing the platform&#8217;s potential to old and new users alike, and often point towards where things are trending on the design front.<\/p>\n<p>Twenty Sixteen is a solid addition to the string of default theme releases, and the open nature of its development is an encouraging sign of the core team&#8217;s approach generally.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Another year, another shiny new default WordPress theme to install and get to know over the next 12 months. Twenty Sixteen has officially landed and has been described as &#8220;a modernized approach of an ever-popular layout.&#8221;<\/p>\n","protected":false},"author":4,"featured_media":150831,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"blog_reading_time":"","wds_primary_category":0,"wds_primary_tutorials_categories":0,"footnotes":""},"categories":[10468],"tags":[10352,9781],"tutorials_categories":[],"class_list":["post-150603","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-reviews-opinion","tag-twenty-sixteen","tag-default-theme"],"_links":{"self":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/150603","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/comments?post=150603"}],"version-history":[{"count":44,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/150603\/revisions"}],"predecessor-version":[{"id":208805,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/posts\/150603\/revisions\/208805"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media\/150831"}],"wp:attachment":[{"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/media?parent=150603"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/categories?post=150603"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tags?post=150603"},{"taxonomy":"tutorials_categories","embeddable":true,"href":"https:\/\/wpmudev.com\/blog\/wp-json\/wp\/v2\/tutorials_categories?post=150603"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}