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

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:

function childtheme_setup() {
    remove_filter( 'header_video_settings', 'twentyseventeen_video_controls' );
}
add_action( 'after_setup_theme', 'childtheme_setup' );

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' );

So the lower the number there, the more muted a color appears, and the higher it is, the more intense a color becomes.

You can also add new CSS to the existing CSS output for custom colors.

By adding a filter, child themes can add additional selectors onto the custom color scheme CSS. Like so:

// Add child theme selectors for color schemes.
function dynamic_seventeen_custom_colors_css( $css, $hue, $saturation ) {
	$css .= '
	.colors-custom .content-menu > article:not(.has-post-thumbnail),
	.colors-custom .content-menu > section:not(.has-post-thumbnail) {
		border-top-color: hsl( ' . $hue . ', ' . $saturation . ', 87% ); /* base: #ddd; */
	}';
	return $css;
}
add_filter( 'twentyseventeen_custom_colors_css', 'dynamic_seventeen_custom_colors_css', 10, 3 );

Enjoy customizing Twenty Seventeen and happy theming!

#4-7, #bundled-theme, #dev-notes, #twenty-seventeen

Twenty Seventeen: Agenda for Nov 4, 2016 Meeting

Here’s the agenda for today’s weekly meeting on Twenty Seventeen. It will last 30 minutes, and I’ll be around in the #core-themes channel for at least 30 minutes afterward to answer any questions.

Reminder: Meetings are every Friday at 18:00 UTC.

#4-7, #bundled-theme, #twenty-seventeen

Twenty Seventeen Meeting Notes: Oct. 21 2016

Here’s the meeting summary for this week. If I missed anything, let me know in the comments.

Housekeeping

Summary

  • General theme update: The theme merged to Core this week, and now has a demo. The site pulls updates from trunk every 10 minutes. All GitHub issues remaining that needed to be addressed were ported to Trac.
  • In the tickets, there are a lot of small issues on different devices. I encourage everyone to test and help on those if you have the appropriate devices.
  • #38375: Flatten/rename TwentySeventeen directory structure: The group decided to keep the assets directory as is and rename `components` to template-parts. The ticket will be updated.
  • #38390: Twenty Seventeen: Playlists don’t render on blog/archive pages: The group decided the best option here for now is to update the core function get_media_embedded_in_content() to check to make sure there’s actually a src in the tag before pulling out content. The ticket will be updated. @joemcgill offered to help there.
  • The group discussed video headers some, #38172. A new patch has been added that helps mitigate large file sizes, but should be tested. Adding the functionality to add videos from a URL, like YouTube, would help this feature progress. It still needs more work though.
  • #38426: Twenty Seventeen: Improve user and developer experience with the customizer integration: This ticket needs to be addressed, but best to do it there since it covers a lot.

 

#4-7, #bundled-theme, #twenty-seventeen

Twenty Seventeen: Agenda for Oct 21, 2016 Meeting

Here’s the agenda for today’s weekly meeting on Twenty Seventeen. It will last 30 minutes, and I’ll be around in the #core-themes channel for at least 30 minutes afterward to answer any questions.

Reminder: Meetings are every Friday at 18:00 UTC.

#4-7, #bundled-theme, #twenty-seventeen

Twenty Seventeen: Merge Proposal for 4.7

A note from @helen: Before we get into the proposal itself, I’d like to officially introduce its author, @davidakennedy, as a committer for bundled themes. We really should have done this ages ago, but now he’ll get to make a big splash with Twenty Seventeen. Congrats, David! 🎉


twenty-seventeen

The team behind Twenty Seventeen has reached that point that we’re ready to propose Twenty Seventeen as the new default theme for WordPress in 4.7. It’s an ambitious theme that focuses on a creative home page and an easy site setup experience for users.

Like last year, with Twenty Sixteen, the development process happened on GitHub. The theme will be merged into WordPress from the beta period on, and development will move to Trac. Some remaining tickets will move over to Trac at that time.

Features of Twenty Seventeen

Created with the feedback on previous default themes in mind, and the desire to reach a new audience, Twenty Seventeen was designed for business websites. It offers:

  • multiple sections on the front page, selected in the Customizer.
  • a striking asymmetrical grid.
  • custom color schemes, built on top of a monochromatic foundation, and adjustable via a hue picker.
  • different headline placement for pages, changeable in the Customizer, via theme options.
  • a great experience in many languages, thanks to language-specific font stacks.
  • SVG icons (a first for a default theme).
  • support for custom logo, custom header image and many post formats.
  • the use of new functions in Core for making child theming easier.

Contributions

As usual, a default theme couldn’t happen without the community. This year, Twenty Seventeen has benefited from 57 amazing contributors so far (up from 38 at this point last year). They have helped with:

  • triaging issues.
  • providing code reviews.
  • testing and recommending language specific font stacks.
  • improving the theme’s accessibility.
  • browser and device testing.
  • numerous bug fixes, code tidying and countless improvements.

Testing, Feedback and Next Steps

While contributors have tested Twenty Seventeen on various devices and browsers throughout the development process, edge cases still exist. Please test Twenty Seventeen in as many different environments as you can.

Until the merge deadline, contributors to Twenty Seventeen will work on the Core Merge milestone in GitHub, knocking out as many issues as possible.

A big thank you to everyone that has helped make Twenty Seventeen come to life.

#4-7, #bundled-theme, #twenty-seventeen

Twenty Seventeen: Agenda for Oct 14, 2016 Meeting

Here’s the agenda for today’s weekly meeting on Twenty Seventeen. It will last 30 minutes, and I’ll be around in the #core-themes channel for at least 30 minutes afterward to answer any questions.

  • General theme update.
  • Flexbox.
  • Open floor.

Reminder: Meetings are every Friday at 18:00 UTC. Twenty Seventeen Features meeting every Tuesday at 17:00 UTC.

#4-7, #bundled-theme, #twenty-seventeen

Twenty Seventeen Meeting Notes: Oct. 7 2016

Here’s the meeting summary for this week. If I missed anything, let me know in the comments.

Housekeeping

Summary

The group:

  • gave an update on the theme’s progress. The theme’s initial design implementation is merged and everyone should focus on testing.
  • discussed issue on SVGs instead of icon fonts. @melchoyce has decided on Font Awesome for SVGs, so implementation was discussed. A few fallback methods were discussed, like a simple text fall back or CSS image fallback, but some testing will be needed. A pull request should be worked on next week.
  • highlighted other issues that the community is encouraged to comment on and test (both have pull requests):

#4-7, #bundled-theme, #twenty-seventeen

Twenty Seventeen: Agenda for Oct 7, 2016 Meeting

Here’s the agenda for today’s weekly meeting on Twenty Seventeen. It will last 30 minutes, and I’ll be around in the #core-themes channel for at least 30 minutes afterward to answer any questions.

  • General theme update.
  • There isn’t much that hasn’t been already triaged, so that will be skipped.
  • SVGs instead of icon fonts.
  • Open floor.

Reminder: Meetings are every Friday at 18:00 UTC. Twenty Seventeen Features meeting every Tuesday at 17:00 UTC.

#4-7, #bundled-theme, #twenty-seventeen

Twenty Seventeen Features Meeting Notes: Oct. 4 2016

Here’s the summary for this week. The meeting was busy, so feel free to add anything missed in the comments.

Housekeeping

Summary

The group:

  • discussed #37974 (Add multi-panel feature to pages through add_theme_support) for the majority of the meeting. The goal was to find a minimum viable product that could be developed in the time left.
  • decided to shoot for this feature to be 1. limited to the front page only. 2. exist in the Customizer 3. provide basic markup, created by Core.
  • decided this story board stood out as the strongest to be iterated on and mocked up as a design.
  • decided live preview in the Customizer wasn’t critical at the current time.
  • @helen and I will work on marshaling people to help with the project.
  • @karmatosed will work on the initial mock-up of the feature.
  • briefly discussed #38172 (Enable video headers in custom headers) It also needs to have a minimum viable product defined and those interested were encouraged to comment on the ticket with that in mind.
  • brought up #19627, and that could be worked on but it’s not a priority over the other major features for Twenty Seventeen.

Next steps

  • For Add multi-panel feature to pages through add_theme_support, the mock up will be created and developers are needed to work on it.
  • For Enable video headers in custom headers, a clearer scope needs defining and more developers are needed to work on it. A basic patch exists for this ticket. 

Call for help

Twenty Seventeen needs you. Home pages should be fun to create and a heck of a lot easier. Headers can be even more captivating. If you’re interested in working on either of these projects, please let me or @helen know.

#4-7, #bundled-theme, #twenty-seventeen

Twenty Seventeen Meeting Notes: Sept. 30 2016

Here’s the meeting summary for this week. If I missed anything, let me know in the comments.

Housekeeping

Summary

The group:

  • gave an update on the theme’s progress. Lots of PRs merged this week, plus the design implementation should be done early next week. From @laurelfulford: “I’m aiming for Monday at the latest to have the design PR ready to merge. There will still be minor issues, but it’s at the point where it’ll benefit from everyone else’s eyes.”
  • labeled a handful of issues on GitHub that hadn’t been triaged yet.
  • discussed issue on fonts and non-latin fallbacks. It now has a list of alphabets the theme aims to support. Next steps include coming up with font stacks for each choice and figuring out implementation strategies.

#4-7, #bundled-theme, #twenty-seventeen