WordPress.org

Make WordPress Core

Tagged: bundled-theme Toggle Comment Threads | Keyboard Shortcuts

  • David A. Kennedy 12:22 am on November 29, 2016 Permalink |
    Tags: , bundled-theme, ,   

    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!

     
    • 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!

    • tobifjellner 7:09 am on November 29, 2016 Permalink | Log in to Reply

      Hi. It seems you pasted the same image four times, when attempting to illustrate the saturation setting.

    • Samuel Wood (Otto) 7:41 pm on December 17, 2016 Permalink | Log in to Reply

      Note in your example of removing the parent theme’s filter on “header_video_settings”, you have an order of operations issue.

      Child theme’s functions.php files load and run before parent theme’s functions.php files do. So, in order for a child to remove a filter that is added by a parent, then the remove_filter call should be located in a function that is hooked to after_setup_theme.

      Otherwise, the child will call remove_filter first, before the parent adds that filter in the first place. Which means both filters will be added, and the changes the child is attempting to make will have no effect.

    • i-createweb 12:04 pm on December 29, 2016 Permalink | Log in to Reply

      I am trying to create an image.php file, with corresponding template-part for Twenty Seventeen. I can’t get the image, full size, to appear.

      This is not doing it. I used the content.php code to start with, so I see the title and the comment, footer, header, but no image on the image attachment page.

      Sorry if this is not the correct place to post this, but I was hoping to find this code in this post.

    • i-createweb 8:22 am on December 30, 2016 Permalink | Log in to Reply

      Thanks, Hal-elf! Big fan.

      • i-createweb 8:25 am on December 30, 2016 Permalink | Log in to Reply

        I actually accomplished it. I took code from twentysixteen image.php file and used that. It worked!

        *correction: Half-elf.

    • mattshepherd 9:16 pm on January 5, 2017 Permalink | Log in to Reply

      Assuming I’m a giant idiot and understand almost none of this, is there somewhere I can just straight-up download the proper style.css and functions.php files to make a twentyseventeen child theme?

    • scott9s 3:51 am on January 13, 2017 Permalink | Log in to Reply

      I tried using the content width function, Does it even work?

      I looked through the theme code, and I can’t see it being applied or used anywhere.

    • ShanghaiTimes 1:31 pm on January 13, 2017 Permalink | Log in to Reply

      This is really interesting. Thanks. I’ve been toying about with a child theme here, and finding out a few things that are different than they used to be.

      Can’t locate the fix to remove “Howdy” though.

      Also, probably relating to a comment above, if I copy functions.php into the child directory, my site goes blank? completly.
      Remove function.php from the child directory, and the site comes back.

  • David A. Kennedy 4:35 pm on November 4, 2016 Permalink |
    Tags: , bundled-theme,   

    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.

     
  • David A. Kennedy 11:14 pm on October 21, 2016 Permalink |
    Tags: , bundled-theme,   

    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.

     

     
  • David A. Kennedy 5:49 pm on October 21, 2016 Permalink |
    Tags: , bundled-theme,   

    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.

     
  • David A. Kennedy 9:56 pm on October 18, 2016 Permalink |
    Tags: , bundled-theme,   

    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.

     
    • hiddenpearls 10:28 pm on October 18, 2016 Permalink | Log in to Reply

      is very happy to take part in making this awesome theme ready for such a big audience.
      Congrats Theminator @davidakennedy

    • Mark Root-Wiley 11:13 pm on October 18, 2016 Permalink | Log in to Reply

      This is very exciting! Is there a public live beta version of this site available for easy front-end testing (especially on mobile devices?)

    • Tara 12:39 am on October 19, 2016 Permalink | Log in to Reply

      How about creating the next theme designed ONLY for blogging websites (NOT business)!

      • Aaron Jorbin 3:22 pm on October 19, 2016 Permalink | Log in to Reply

        There are a number of default themes that have blogging as a main goal. Twenty Fifteen and Twenty Thirteen are two that I really like.

      • Knut Sparhell 5:07 pm on October 19, 2016 Permalink | Log in to Reply

        Most of the Twenty* themes are for excellent for blogging. Twenty Seventeen is the first one I personally see as a not-so-good-for-simple-blogging Twenty-theme. I would recommend both Twentu Fifteen and Sixteen as a simple, light-weight and modern themes for blogging. Twenty Ten and Eleven are technically a bit old, and old fashioned today, so forget them, if not for “retro” look.

    • Matt Mullenweg 2:41 pm on October 25, 2016 Permalink | Log in to Reply

      It is kind of shocking how clunky (and slow) the UI for panels and even things like changing the logo is compared to Squarespace or Wix. At least it’s possible to create an interesting one-page site now, but I wouldn’t expect anyone to be able to figure out the steps without a detailed guide or tutorial. I think the customizer is probably fundamentally broken as a foundation we can build a next-generation WP editing experience with.

      • Nick Halsey 5:26 am on October 26, 2016 Permalink | Log in to Reply

        #38426 makes the “panels” experience in the theme much faster and smoother by adding support for selective refresh and simplifying the control organization. Paired with an upcoming commit/post about visual edit icons, there are big improvements here in 4.7 and we’re getting closer and closer to being able to completely reimagine the “customizer” as a fully-integrated front-end-native framework for live previewing every aspect of a site. The technical aspects are nearly there in core; now we need design/UX brainstorming and themes fully supporting selective refresh to take it to the next level.

      • Weston Ruter 9:56 pm on November 28, 2016 Permalink | Log in to Reply

        @matt In terms of preview experience, I agree that the full-page refresh experience and even the newer selective refresh preview mechanism are (much) slower than desirable. In the end, these are in place for backwards compatibility for WordPress’s theming system which fundamentally depends on PHP rendering. However, to quote myself on a WPSE answer I just wrote:

        In closing, if WordPress themes could just be implemented with something like React we could avoid adding special support for selectively refreshing elements on the page since the changes to the state would automatically cause the desired changes in the DOM. Since we’re not there yet (although prototypes are being worked on for this) we have to settle for the next best experience for quickly refreshing parts of a page with the minimal extra effort for developers: selective refresh.

        In terms of a clunky UI, it’s true that the “Customizer” UI needs iterating. Having all of the controls for manipulating changes being located in a panel and not inline with the elements being edited is often disjointed. We’re improving this a bit in 4.7 with the visible edit shortcuts. But in many cases, having inline editing is certainly more intuitive for users. Inline editing in the customizer is prototyped and as of 4.7 this won’t even require you to be at customize.php: we’ll be able to allow users to start new customizing sessions from the frontend.

        All of this to say that the underlying customize API is not fundamentally broken. The full/selective refresh previewing mechanisms are certainly fundamentally broken, but the customizer as a framework for managing, staging/previewing, drafting, iterating, batching, and publishing a site’s state is very much in line with what we need in a next-generating WP editing experience.

        • Matt Mullenweg 9:45 pm on November 29, 2016 Permalink | Log in to Reply

          It seems like we’re conflating possible solutions into the problem. Many platforms offer real-time, fast editing and previewing of themes without requiring them to be written in React.

          What makes you want to break out the customize API from everything we’re shipping built on top of it, and clarify that the former is not broken?

    • long7time 8:44 pm on January 3, 2017 Permalink | Log in to Reply

      Can you edit the paragragh or text alignment in twenty seventeen so that is center align as opposed to right aligned?

  • David A. Kennedy 4:38 pm on October 14, 2016 Permalink |
    Tags: , bundled-theme,   

    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.

     
    • Joy 5:11 pm on October 14, 2016 Permalink | Log in to Reply

      I’m pretty new to Slack, so it took me awhile to find where the meeting actually is
      http s://wordpress.slack.com/messages/core-themes/
      and not
      http s://wordpress.slack.com/archives/core-themes

  • David A. Kennedy 10:33 pm on October 7, 2016 Permalink |
    Tags: , bundled-theme,   

    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):
     
  • David A. Kennedy 3:48 pm on October 7, 2016 Permalink |
    Tags: , bundled-theme,   

    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.

     
  • David A. Kennedy 10:46 pm on October 4, 2016 Permalink |
    Tags: , bundled-theme,   

    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.

     
    • Nick Halsey 12:45 am on October 5, 2016 Permalink | Log in to Reply

      On #37974, “decided live preview in the Customizer wasn’t critical at the current time” is in conflict with “decided to shoot for this feature to be … 2. exist in the Customizer”.

      To be clear, if it’s in the customizer it needs to support live preview with selective refresh transport at a minimum. My suggestion there was that it may be more appropriate as part of the content editing flow given the restriction to pages for now.

      I can help with video headers development, particularly on the customizer side. Let me know when and exactly what you’d like me to work on there so we don’t patch at the same time.

    • Ahmad Awais 10:39 pm on October 5, 2016 Permalink | Log in to Reply

      Looking forward to helping maintain code standards and Customizer panels in TwentySeventeen.

  • David A. Kennedy 10:40 pm on September 30, 2016 Permalink |
    Tags: , bundled-theme,   

    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.
     
c
compose new post
j
next post/next comment
k
previous post/previous comment
r
reply
e
edit
o
show/hide comments
t
go to top
l
go to login
h
show/hide help
shift + esc
cancel
Skip to toolbar