Theming with Twenty Seventeen
In 4.7, WordPress gets a new default theme: Twenty Seventeen. Like all default themes, it’s easily customizable for users and developers. This post will cover developer features and a few tricks when customizing the theme.
Of note
- Twenty Seventeen only works on 4.7 and above.
- It uses the new video header and starter content features, each launched in 4.7.
- The theme also implements new theme functions to make child theming easier.
Override enqueued styles and scripts
With the use of get_theme_file_uri, introduced in 4.7, Twenty Seventeen lets child themes override styles and scripts with ease. For example, if you want to replace the theme’s global.js file, you can do so by including the same file in your child theme in the same path.
Filters
Twenty Seventeen includes a handful of filters, all of which are documented in line in the code.
Content width
The value is filterable in the event a child theme needs to change it.
function childtheme_content_width( $content_width ) {
if ( twentyseventeen_is_frontpage() ) {
$content_width = 960;
}
return $content_width;
}
add_filter( 'twentyseventeen_content_width', 'childtheme_content_width' );
Custom header settings
Like past default themes, Twenty Seventeen filters the arguments for add_theme_support( 'custom-header' );. These can be changed in a child theme. Here, we’ll add flex-width to the current args.
function childtheme_custom_header_args( $args ) {
$args['flex-width'] = true;
return $args;
}
add_filter( 'twentyseventeen_custom_header_args', 'childtheme_custom_header_args' );
Header video settings
The theme changes the default provided by Core, but that can be modified by a child theme. Here, we change the text on the button in a child theme:
remove_filter( 'header_video_settings', 'twentyseventeen_video_controls' );
function childtheme_video_controls( $settings ) {
$settings['l10n']['play'] = '__( 'Play my awesome video', 'childtheme' );
$settings['l10n']['pause'] = '__( 'Pause my awesome video', 'childtheme' );
return $settings;
}
add_filter( 'header_video_settings', 'childtheme_video_controls' );
Front page sections
Twenty Seventeen uses the Customizer to add sections to the front page. These are filterable with the twentyseventeen_front_page_sections filer. They can changed like so:
function childtheme_front_page_sections() {
return 6;
}
add_filter( 'twentyseventeen_front_page_sections', 'childtheme_front_page_sections' );
With 6 being a new number there. In this way, the number of sections can be adjusted in a child theme.
SVGs
One of the theme’s most notable behind-the-scenes features, the use of SVGs means better accessibility for icons, they look great on any device and they’re easier to customize.
First, the list of social link icons is filterable, so child themes can change it.
function childtheme_social_links_icons( $social_links_icons ) {
$social_links_icons['mysocialsite.com'] = 'mysocialsite';
return $social_links_icons;
}
add_filter( 'twentyseventeen_social_links_icons', 'childtheme_social_links_icons' );
All of Twenty Seventeen’s icons are decorative in nature. But if a child theme wanted to include an icon that needed to be described in an accessible way, it can thanks to built-in options.
These examples are documented in the code itself. However, for example:
Using a title:
<?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right', 'title' => __( 'This is title', 'childtheme' ) ) ); ?>
Another example with title and desc (description):
<?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right', 'title' => __( 'This is title', 'childtheme' ), 'desc' => __( 'This is longer desc', 'textdomain' ) ) ); ?>
For more information on SVG accessibility, see Using ARIA to enhance SVG accessibility.
Custom Colors
Like other default themes, this one comes with some color options so you can make the theme your own. Twenty Seventeen uses saturation to create a custom color scheme that will look great. That saturation level can be adjusted, like so:
function childtheme_custom_colors_saturation() {
return 25;
}
add_filter( 'twentyseventeen_custom_colors_saturation', 'childtheme_custom_colors_saturation' );
-
- Saturation at 25.
-
- Saturation at 50 (default).
-
- Saturation at 75.
-
- Saturation at 100.
So the lower the number there, the more muted a color appears, and the higher it is, the more intense a color becomes.
Enjoy customizing Twenty Seventeen and happy theming!
djsteveb 1:30 am on November 29, 2016 Permalink | Log in to Reply
glad to see ” all of which are documented in line in the code.”
thanks for the tips and early warnings!
I am sure there will be many that love the video header and many that calculate the waste of this. Without having looking at the code and such, but having some experience with video and wordpress I must ask..
Is there an option to easily have the video auto play or not play, and instead show a thumbnail with a play button?
Has someone gotten code to make the video auto-pause when scrolled out of view? I looked hard for this and asked for help in doing that with the flv-player plugin – but never got it working – hopefully others have figured it out by now.
Is the video going to be self hosted / in the install files for default wordpress or is it hot linked from elsewhere? One way equals bloat for installs, the other sacrifices privacy and puts our page load speed in the hands of third parties.
Are there options for having the video not load at all in different scenarios like cell phone screen size or 2g data connection?
Would love to see an option to have a gif (converted to webm perhaps) showing that there is a video to be played – click to download / stream / play – otherwise the bandwidth is saved for the end user.
Has anyone gotten anything like src set for video yet? Last version of wordpress has some auto magic for different image sizes for different screens right? Does this now work with video?
One theme I play with has a slider that pulls an mp4 hi rez when screen size is large enough, and then chooses to load a webm version if it detects a smaller screen size – would love to see this (or similar) options in wp core like how images are dealt with.
anyhow, love to see WP embracing video more by default – it’s great, but comes with some challenges and limitations – that I hope are mostly solved in the future. Also glad to see a focus on having the default themes made with developing in mind for the end users.. I disagree that all default themes are easy to manipulate for end users, certainly 2013 theme and those before were.. the last couple not so much imho.
thanks to all those who have been and are working on this! the default theme is seriously important for so many reasons!
djsteveb 5:28 am on November 29, 2016 Permalink | Log in to Reply
DOH! Seems many of these things have been considered and several answers to my concerns are in a previous post that I was unaware of here: https://make.wordpress.org/core/2016/11/26/video-headers-in-4-7/ – Glad to see so much consideration has already been done on most of these things!