Thoughts on the WordPress Twenty Fifteen theme

WordPress 4.1 was released last month, and along with it the Twenty Fifteen theme was launched. I’ve had a look at it to see what it can do.

First impressions

Twenty Fifteen has some passing resemblances to the previous theme from the WordPress.org team, Twenty Fourteen, with a left sidebar and widget area. But the look of the theme is very different.

At first glance, it is a very clean looking theme, though quite plain looking and barebones. The content is nicely centred in the browser as opposed to the left alignment of Twenty Fourteen (which I never really liked).

Typography

The theme uses the Noto Serif font as its primary typeface, with Noto Sans for metadata.

The standard font size is 19px, so it is very easy to read.

Navigation

Unusually, Twenty Fifteen has vertical rather than horizontal primary navigation. There are 2 menus – the primary navigation and social links menu.

Both sit in the sidebar on the left, the former a vertical menu and the latter a collection of social media icons underneath.

Main menu descriptions

You can add a description under your main menu items easily:

1. In Appearance > Menus, make sure the Description box under Show advanced menu properties is checked.
2. Add a short description in the box for the menu item(s) you want.

To add the social links

1. Go to Appearance > Menus.
2. Create a new menu and set it as the Social Links menu.
3. Add the links to your social media profiles in the Links section by typing in the URL for each of your social media profiles and adding each link to the menu.
4. Save the menu when you’re done. The theme is smart enough to put the correct icon in for each profile.

See the Twenty Fifteen guide for the full list of social profiles you can use.

Customization options

Most of the customization options are the same as for Twenty Fourteen. That is, from Appearance > Customize you can tailor the following:

• Show or hide the site title and/or tagline
• Select a background image for the page (and choose its position, whether it tiles and whether it’s fixed or scrolls)
• Set the menus
• Choose which widgets to display
• Set the front page to display posts or a static home page

There are a couple of differences from Twenty Fourteen. The main one is there are a number of predefined colour schemes to choose from. Aside from the default white/black/grey, you can choose from:

• Dark
• Yellow
• Pink
• Purple
• Blue

My favourite of these is the purple colour scheme.

The other difference is that changing the Header Image on Twenty Fifteen actually changes the background of the entire sidebar (on desktop). Only on a mobile device is there a header image.

Layouts

You need to love the layout of this theme in order to use it, as there is no way of changing it out of the box. There are no page templates.

It would have been nice to have the option to choose a right sidebar instead of the default left one, either globally or on a per-page basis.

Widgets

There is only a single widget area in the theme, in the sidebar below the menus. So if you were looking for header or footer widget areas, you’re out of luck, unless you add your own to a child theme.

Featured images

Featured images are supported in Twenty Fifteen. When added, they appear above blog posts.

Mobile responsiveness

Like most modern themes, Twenty Fifteen is responsive. The sidebar disappears at 954px width and is triggered by clicking on the hamburger menu icon.

The only downside I can see with this is that all sidebar content is shown before the page content. If you have a very long sidebar that’s a lot of links to scroll through. It would be more usual to show the menu first and have widgets displayed after posts/pages on a mobile device.

Accessibility

This is one area where Twenty Fifteen really scores. It’s been designed with accessibility in mind, has been tested by the Make WordPress Accessible team, and is one of the few themes to warrant the accessibility-ready tag.

The theme is fully keyboard accessible, including multiple levels of menus. Menu items with submenus show a down arrow when closed, and an up arrow when opened. The keyboard focus is shown as a grey box round the relevant item.

The theme supports WAI-ARIA, making use of roles.

Just one caveat if you want to use one of the colour presets, though. I tested the colours with the Colour Contrast Analyzer tool and the pink and blue colour schemes don’t meet WCAG colour contrast requirements.

I do wonder about the accessibility of the search box since it doesn’t have a Submit button, though that’s been a feature of the WordPress themes since Twenty Eleven. (It should be noted that the button has a class of screen-reader-text associated with it, which hides it from normal view. The submit button is read out to screen reader users.)

Add a submit button to the search box

If you want to add a submit button, here’s a way to do it:

1. Create a WordPress child theme.

2. Create a file called searchform.php and add it to your child theme. Include the following code:

<form role="search" method="get" id="searchform" action="<?php echo home_url( '/' ); ?>">
 <div><label class="screen-reader-text" for="s">Search for:</label>
 <input type="text" value="" placeholder="Search Site" name="s" id="s" />
 <input type="submit" id="searchsubmit" value="Search" style="margin-top: 8px;" />
 </div>
</form>

3.  In your child theme style.css, add the following code:

.search-form input[type="submit"], .widget .search-form input[type="submit"] {
padding: 5px;
}

This is the end result:

Overall

The WordPress.org themes are always well coded, and this one is no exception. I like the simplicity and the accessibility features in Twenty Fifteen.

It seems a good theme to use for bloggers who are looking for a clean and white design, without too much fuss.

I can’t see it being adopted by many businesses, as it lacks flexibility, and I suspect they want more bells and whistles in a theme.

What do you think? Please leave a comment below.

Category: WordPress Tags: accessibility-ready, mobile friendly design, responsive, theme, twenty fifteen