Twenty Fifteen: vertical and effective

Last update: January 2019

Hypotheses offers its users the graphic themes developed by the WordPress team in priority, to ensure the long-term sustainability, homogeneity and flexibility of the platform. Find all the graphic themes proposed in the “Appearance” category of the House of blogs.

Like the other graphic themes available on Hypotheses, Twenty Fifteen is responsive, i.e. its display adapts to the size and type of your screen, which is a considerable advantage, especially for reading on smartphones and tablets.

Once the theme has been activated on your blog via the Appearance >Themes menu, you will find most of the configuration options in the Appearance > Customize menu.

A theme for screens of all shapes and sizes

responsive_mockup_tam020615
Example of a blog using Twenty Fifteen displayed on different sized screens.

A vertical header!

Twenty Fifteen focuses on making your content readable. It is different from other themes in that it has no horizontal header. Instead there is a left sidebar containing your menus and widgets as well as your blog’s name and subtitle. This makes the top section of the sidebar, displaying your blog’s name and subtitle, the de facto header, even though it is not situated at the top of the page …

You will notice that when you scroll down to the bottom of the content on your blog, the sidebar will also scroll down until you reach the bottom of the sidebar. It will then remain static even if you scroll further down on the main part of the blog.

Two menus to customize

Once you have created your navigation menu you place it in the sidebar. It is therefore positioned vertical to your blog.

In Twenty Fifteen it is also possible to add a description to the items in your menu. To do this, go to Appearance > Menus and click on the “Screen Options” tab in the top right of your screen. Click the “Description” box. Close this menu by clicking on “Screen Options” again. Now, when you display the details of any menu item (by clicking on the small arrow to the right of the rectangle showing the menu item), you will see a “Description” field. Whatever you write will be displayed underneath the item in the menu.

menus item description 2015
Example of a menu in which some items contain descriptions.

Underneath this menu you can also add a second menu for social media. To do this, just create a menu containing nothing but links to the social networks of your choice. You then need to place this menu in the “Social Links Menu” space. There’s no need to configure the icons in this menu: they will be displayed automatically because you have inserted links to your chosen social networks.

Social Links Menu 2015
Example of a menu made up of links to social networks.

Automatic icon display is only available for the following web services:

CodePen
Digg
Dribbble
Dropbox
Email (mailto: links)
Facebook
Flickr
Foursquare
GitHub
Google+
Instagram
LinkedIn
Path
Pinterest

Pocket
Polldaddy
Reddit
RSS Feed (URLs + /feed/)
Spotify
Skype
StumbleUpon
Tumblr
Twitch
Twitter
Vimeo
WordPress
YouTube

Paint it black … or yellow

On Twenty Fifteen, you can select one of six colour schemes by going to the Appearance > Customize > Colors menu. You can then adjust these colour schemes. You can change the colour of the following:

  • The background (i.e. the main zone of your blog);
  • The text in the left sidebar (including the name and subtitle of your blog);
  • The header background and sidebar background (the header is the space at the top of the left column displaying your blog’s name and subtitle).
six-couleurs-predefinies-2015
Example of the different colour combinations available on Twenty Fifteen.

You can also choose a header image (which will be the background image in the left sidebar) and a background image (which will be the background image in the main zone of the blog). To do this, go to the Appearance > Customize > Header Image / Background Image menus.

Please bear in mind that the images you choose must meet two criteria. First of all, their format (this is especially true in the relatively narrow left sidebar). It is therefore important to opt for portrait images to achieve the best visual results. The left sidebar is 248 pixels wide, while the main zone is 660 pixels wide. To ensure that your content remains legible, you should also try to use images in sober colours and make sure that they do not clash with the text colour. Lastly, remember to include credit information for the images you use (licence, specific user rights, author and, where applicable, a link to the original image). This information can be displayed on your blog’s “Credits” page, for example.

Header and background images 2015
Example of header and background images.

Optimize your featured images

As with many other themes, Twenty Fifteen allows you to use featured images in your posts (one featured image per post). To do this, add the image you have selected by going to the “Featured Image” section at the bottom right of the page where you edit a post. To make sure your featured images are displayed properly, choose images with the following dimensions (or close to these dimensions): 825 pixels wide x 510 pixels high.

Don’t forget to include the credit information for your featured image.

To learn more about this theme and its features, see Twenty Fifteen’s presentation in the Codex WordPress.

You now have everything you need to get started with Twenty Fifteen. For any questions regarding this topic, if you do not find the answer in this article, do not hesitate to call on the community of bloggers (hypocommunity[at]groups.openedition.org), who will certainly be able to help you in the handling and use of your blog. If you are not subscribed to the list, send us a request to hypotheses[at]openedition.org.

Featured image: Wall Street by Michael Aston (licence: Creative Commons by-nc)

This post is a translation of this one by Helen Tomlinson.

See you soon on Hypotheses!

Michel Tamarin

Chargé de projet web hypotheses.org

More Posts - Website

Follow Me:
TwitterLinkedInGoogle PlusYouTube


Michel Tamarin

Chargé de projet web hypotheses.org

You may also like...