Switching to Twenty Fourteen

Last update: February 2018

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 Fourteen 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.

Here are two examples of research blogs that have adopted the Twenty Fourteen graphic theme:

After Hueman, Twenty Fourteen is the closest graphic theme to a magazine layout with its slideshow and article grid. This enables you to showcase, on the home page of your blog, the articles that you think are the most important. This theme places a strong emphasis on graphics and illustrations. This is an asset if you have the time and desire to choose illustrations, but can be time-consuming; without iconography, this graphic theme loses much of its interest.

twenty-fourteen-grille

You can also read Karim Hammou’s post (in French) to get an idea of how to use and configure Twenty Fourteen.

General aspects

First of all, the header image (sometimes called “banner”). If you have just changed the theme, you may be disappointed: the header image you used with the previous theme is not necessarily reused by default.

You must then return to the menu Appearance > Customize > Header image and choose an image by clicking on “Add a new image”. You then have the choice between uploading a new image file from your computer or choosing an image already present in the media library of your blog. The Twenty Fourteen graphic theme recommends the choice of a 1260 by 240 pixel header image.

Note: As with any image published in your blog, check before publishing your header image that you have the necessary rights to do so, and enter the credits for this image in the “Credits” page of your blog.

Adding a header image with the Twenty Fourteen theme

If you have integrated the title and subtitle of your blog into the header image, you may not want to display the same title and subtitle as text on the blog. Under no circumstances should this information be deleted from Settings > General or Appearance > Customize > Site Identity. This would removes the “Title” and “Subtitle” metadata from your blog and greatly hinders its proper referencing and indexing in search engines and databases. In Appearance > Customize > Site Identity, you can simply uncheck “Show site title and description”, which hides this data without deleting it.

Menus

By default, this theme uses a single menu composed of the different pages and subpages of your blog. It is located at the top, just below the header image. The menu items are aligned on the right.

menu

You can customize this menu. To do this, go to the Appearance > Menus and create a new menu or choose an existing menu to assign it the “Top Primary Menu” location (red box). Another available menu location, “Secondary menu in left sidebar” (green box), will be positioned on the left side of your blog.

2menus
Menu locations for the Twenty Fourteen graphic theme

Featuring posts on the homepage

This is obviously the main advantage of the Twenty Fourteen theme: visually featuring several posts on your blog’s homepage. But, as mentioned above, this option is time-consuming and, if used too hastily, can make your blog less visually attractive. After this word of warning, let’s now turn to setting up the theme.

diaporama
Slide show of iconographic tickets highlighted on the home page of a Twenty Fourteen blog

The principle is simple: if an article is indexed with a certain keyword (otherwise called “tag”), it will be featured as a headline.

By default, the presentation mode is the grid (as in the first image of this post). To choose between grid presentation and slideshow (as in the image above), use the Appearance menu > Customize > Featured Content. On the left is a configuration menu. On the right, you can see the effects of configuration changes directly on the blog’s homepage.

It is then possible to choose between “Grid” or “Slideshow”. The “Tag name” field allows you to define the keyword that will be used to highlight an article.

Featured articles customization

Once these parameters have been set, the last notes indexed with the chosen tag will automatically appear in the featured area of your blog (“Grid” or “Slideshow”).

Note: if there is no ticket matching the defined tag, the “sticky posts” will be displayed instead. Articles can be sticked on top of the homepage by checking the Visibility > Edit > Stick this post to the front page in the “Publish” block in the article editing interface.

All you have to do now is add “featured images” to your articles to avoid displaying a dull homepage. To do this, go to the editing interface of each featured article, and assign them a featured image by clicking on “Set featured image”.

Add a featured image to an article

For the display to be optimal, you must pay attention to the size of the image you are going to use. With the “Grid” option, this image should ideally have a size of 672 by 372 pixels. If you have chosen the “Slideshow” option, it must be 1038 by 192 pixels for the display to be correct. Think about optimization: prefer.jpg format and a resolution of 96 DPI for a lighter image. In his post about Twenty Fourteen, Karim Hammou offers a visual summary of the different image sizes used by Twenty Fourteen for the “featured images”:

Les trois tailles auxquelles sont utilisées les « Images à la une » dans Twenty Fourteen - (Karim Hammou, Creative Commons by-nc-nd)
The three sizes used for featured images on Twenty Fourteen – Karim Hammou, Creative Commons by-nc-nd

Widgets

Twenty Fourteen provides three widget areas:

  • a primary sidebar (on the left) (red box on the screenshots below);
  • a right sidebar, curiously named “Content Sidebar” in the backspace (green box on the screenshots below);
  • a “Footer Widget Area” (blue box on the screenshots below).

widgets-lateraux-public
widgets-pdp-public
Color customization

You can customize the colors used in Twenty Fourteen. This is done in the Appearance menu > Customize > Colors.

  • Accent Color corresponds to the color of the selected links and menus (in red in the image below);
  • Contrast Color corresponds to the widget column and the thumbnails of the featured articles (in black in the image below);
  • Background color finally corresponds to the fill color on the right if the reader has a large screen (orange in the image below).
Customizing colors with Twenty Fourteen

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

You now have everything you need to get started with Twenty Fourteen. 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: Fourteen by Mark Gaw (licence: Creative Commons by-nc)

Cite this article as: François Pacaud, "Switching to Twenty Fourteen," in The house of blogs, 03/10/2014, https://houseofblogs.hypotheses.org/69.

François Pacaud

Responsable du service blogging scientifique / Head of science blogging department (OpenEdition)

More Posts

Follow Me:
TwitterFacebookLinkedInFlickr


François Pacaud

Responsable du service blogging scientifique / Head of science blogging department (OpenEdition)

You may also like...