Twenty Seventeen
Twenty Seventeen is the new default theme for WordPress in 2017. Its business-oriented design highlights the new video headers, and has a front-page layout that can be created from multiple sections. The theme can be customized further using its custom color options, and adding a site logo, social menu, and widgets.
Contents
Quick Specs
- The main column width is up to 525px wide with the two column layout, or up to 740px wide with the one column layout.
- The sidebar column width is up to 326px.
- The recommended Featured Image size is 2000px wide by 1200px high.
- The recommended Header Video and Header Image sizes are 2000px wide by 1200px high.
Header Media
Twenty Seventeen supports both the Header Image [1] and the new Header Video [link to doc]. To modify either on your site, navigate to Customizer > Header Media.
For the Header Video, you have the option of uploading your own mp4 video, or linking to one hosted on YouTube. Smaller file sizes will help make sure your site is loaded quickly.
The Header Image can be used on its own to display a large photograph at the top of your site. It can also be used as a video fallback - if both a video and image are added, the image will be used as a placeholder to display while the video loads, and as a fallback on smaller screens where videos may be harder to serve over mobile networks.
Front Page
Twenty Seventeen allows you to build a striking front page comprised of content from different pages on your site. Each page’s featured image is highlighted, displayed at full screen size and with a fixed position. Twenty Seventeen has four different sections you can assign pages to.
To set this up, first navigate to Customizer > Static Front page, and set your site to use a static front page if you haven’t already.
Navigate to Customizer > Theme Options. Under each Front Page Section # Content header, select a page you’d like to display for that section.
If you haven’t created any pages yet, you can do that from the Customizer by clicking + Add New Page beneath one of the sections. This will allow you to create a new page from the Customizer, which you can later add content to.
For the best appearance, make sure each page includes a featured image, and some content.
You can also select your Blog Posts page, and the panel will display your three latest blog posts.
Once you’ve finished adding pages to the different sections, click Save & Publish.
If you want to change the number of the sections either you want to have more section or remove some, add this snippet to your theme's functions.php.
add_filter( 'twentyseventeen_front_page_sections', 'prefix_custom_front_page_sections' );
function prefix_custom_front_page_sections( $num_sections )
{
return 6;
}
By doing that, you will have 6 sections instead of the default 4.
Custom Colors
Twenty Seventeen includes three color options - the default light color scheme, a dark color scheme, and a Custom Colors scheme that can be adjusted to various hues using a slider.
To explore all the color options available, navigate to Customizer > Colors.
Language Support
Twenty Seventeen includes optimal font styles for many languages, thanks to feedback from the WordPress community. The theme uses Libre Franklin by default or https://github.com/impallari/Libre-Franklin and makes adjustments to the typography for the following alphabets:
- Arabic
- Chinese
- Cyrillic
- Devanagari
- Greek
- Gujarati
- Hebrew
- Japanese
- Korean
- Thai
Twenty Seventeen also removes its letter-spacing styles for all non-latin alphabets to improve legibility.
One and Two Column Layouts
On pages [2], Twenty Seventeen allows you to pick between a one and two column layout. This can be changed via Customizer > Theme Options. The theme defaults to the two-column layout, which displays the page title in one column, and the page content in the other.
Note: this feature only becomes available after setting a static front page.
When the one-column layout is selected, both the page title and content display in a wider single column, centered on the page.
Widgets
Twenty Seventeen includes a footer widget [3] area, where you can add widgets below the site’s content.
The blog index, archive, search, and single blog posts also include a sidebar widget area. For each, the content will display in one centred column until the sidebar widget is added. With the sidebar widget, the content will appear in one column, and the widgets in the other.
Pullquotes
Pullquotes can be used to direct your readers attention to a particular passage, or to add visual interest to your posts and pages. In Twenty Seventeen, you can pair a pullquote with an alignleft or alignright class to the blockquote element to highlight it further. Instructions on how to do this can be found here: https://codex.wordpress.org/Writing_Posts#Visual_Versus_Text_Editor An example would be:
<blockquote class="alignleft">This is my fabulous left-aligned pullquote.</blockquote>
When a two column layout is used (either by selecting via the Customizer for pages, or by adding a sidebar widget on posts), the pullquote aligned to the same side will display fully outside of the content area and below the second column. Note: this will only work when the pullquote appears in the content below where the second column ends.
Post Formats
Twenty Seventeen supports the following post formats:
- Aside
- Audio
- Gallery
- Image
- Link
- Quote
- Video
Add Social Icons
Twenty Seventeen includes a Social Icons Menu, where you can add links to your social media profiles that will be displayed as logos in the footer. If you’re not familiar with this functionality, please check out the documentation from Twenty Fifteen [4].
The following services are supported by Twenty Seventeen’s Social Icons Menu:
- Behance
- Codepen
- DeviantArt
- DockerHub
- Digg
- Dribbble
- Dropbox
- Flickr
- Foursquare
- GitHub
- Google+
- Meanpath
- Medium
- Periscope
- Skype
- SlideShare
- Snapchat
- SoundCloud
- Spotify
- StumbleUpon
- Tumblr
- Twitch
- Vimeo
- Vine
- VK
- WordPress
- Yelp
- YouTube
Support & Resources
Get community help with Twenty Seventeen in its forum.
Get tips for theming with Twenty Seventeen in this post from Make.wordpress.org by one of Twenty Seventeen's developers. You can also read the theme's changelog.
Tutorials: