A Developer’s Introduction to the Twenty Seventeen Theme

Updated on December 15, 2017

With the release of WordPress 4.7, also came the new Twenty Seventeen theme. More than all its predecessors, the new default theme is highly customizable for both users and developers, it’s easy to use, and perfectly suitable for both personal and professional purposes. Moreover, it is great when it comes to site performance, as Brian explains in How to Score 100/100 in Google PageSpeed Insights with WordPress.

The Twenty Seventeen theme provides the perfect dress for new amazing WordPress features like the customizable video header. Moreover, it provides theme specific features like front-page sections, SVG icons support, visible edit icons in the Customizer.

Much has already been written about Twenty Seventeen theme, so in this post I won’t make a new list of its cool features and functionalities. Rather, I will propose five small tutorials aiming to help developers and advanced users to get the most from the new WordPress default theme. Thanks to a child theme, we will:

A Child Theme to Enhance Twenty Seventeen Theme Functionalities

I will assume you are familiar with child theming in WordPress. If you’d need a refresher, take the time to have a read at our WordPress Child Theme – Getting Started Guide. When you’re done, create a new folder in /wp-content/themes/ directory with a unique and recognizable name like twentyseventeen-child. In this folder, create the following style.css:

/*
 Theme Name:   Twenty Seventeen Child
 Theme URI:    http://example.com/
 Description:  Twenty Seventeen Child Theme
 Author:       Your Name
 Author URI:   http://example.com
 Template:     twentyseventeen
 Version:      1.0.0
 License:      GNU General Public License v2 or later
 License URI:  http://www.gnu.org/licenses/gpl-2.0.html
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  twentyseventeen-child
*/

The stylesheet header provides the required details about the theme in the form of comments. No additional tags are required, nor we’ll add custom style declarations in our examples. Following, we have to enqueue both the parent’s and the child’s stylesheets. Let’s add the following function into the child theme’s functions.php file:

function childtheme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', 
    get_template_directory_uri() . '/style.css' );

  wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( 'parent-style' ),
    wp_get_theme()->get('Version')
  );
}
add_action( 'wp_enqueue_scripts', 'childtheme_enqueue_styles' );

Let’s activate the child theme and start customizing Twenty Seventeen.

One of the most appealing features of the Twenty Seventeen theme is the full screen header on the front page. In the Customizer Header Media section you can set one or more background images, or a background video.

header video in twenty seventeen theme

Twenty Seventeen allows to customize the header from the functions.php file of a child theme, thanks to the twentyseventeen_custom_header_args filter. Through this filter we can pass to a callback function an array of the following args:

  • default-image‘ (string) background image URL;
  • default_text_color‘ (string) color of the header text;
  • width‘ (integer) header width (defaults to 2000);
  • height‘ (integer) header height (defaults to 1200);
  • flex-height‘ (bool) flex support for header height (defaults to true);
  • video‘ (bool) video support (defaults to true);
  • wp-head-callback‘ (string) Callback function used to style the header image and text in the blog (default value is twentyseventeen_header_style)

As an example, let’s add the following code to the functions file:

function my_custom_header_args( $args ) {
  $args['default-image'] = get_theme_file_uri( '/assets/images/header.jpg' );
  return $args;
}
add_filter( 'twentyseventeen_custom_header_args', 'my_custom_header_args' );

The get_theme_file_uri function has been introduced in WordPress 4.7, and helps us a lot in child theme development. The function first search the child theme for the specified file, then falls back to the parent theme if no file has been found.

Note: to use get_theme_file_uri and its companion function get_theme_file_path the child theme should respect the parent’s file structure.

Setting Custom Header Video Controls

The header video is a WordPress core feature which is modified by Twenty Seventeen thanks to the WordPress header_video_settings filter. We can modify these settings again, returning a customized list of settings through the same filter. Let’s add the following code into the child theme’s functions.php:

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', 'twentyseventeen-child' );
  $settings['l10n']['pause'] = __( 'Pause', 'twentyseventeen-child' );
  return $settings;
}
add_filter( 'header_video_settings', 'childtheme_video_controls' );

First, we have removed the twentyseventeen_video_controls function attached to header_video_settings filter. Then, we have added our custom video controls. In this example, we’ve just used two words, but you get the point: you can use this filter to replace default icons with your custom graphics.

Adding More Sections to the Front Page

Twenty Seventeen provides a static front page divided into sections. Each section takes its content from a static page and is surmounted by a full screen image (the featured image of each page).

Theme options

Front page sections can be configured in the Customizer Theme Options panel

By default, Twenty Seventeen admits up to four sections, but we can add an arbitrary number of sections thanks to the twentyseventeen_front_page_sections filter. As an example, let’s add the following line in the child theme’s functions.php file:

add_filter( 'twentyseventeen_front_page_sections', function(){ return 6; } );

The image below displays the new Customizer Theme Options panel.

Additional sections

An enhanced version of the Theme Options panel

Adding more SVGs

The support of SVG graphics is one of the most interesting features of Twenty Seventeen. The theme provides a good number of SVG icons, grouped in /assets/images/svg-icons.svg sprite file. We can appreciate SVGs in the Social Links menu in the page footer. We can replace these icons or add our custom social icons thanks to the get_theme_file_path core function and the twentyseventeen_social_links_icons filter.

Twenty Seventeen footer

Twenty Seventeen footer

Suppose you’d like to add a link to your amazing Kickstarter project page, but Twenty Seventeen does not provide the corresponding SVG icon.
First you need a custom SVG sprite file like the following:

<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-kickstarter" viewBox="0 0 16 16">
<path d="M6.406 5.453L9.34 1.2C9.895.4 10.61 0 11.49 0c.715 0 1.335.254 1.86.762.522.51.784 1.117.784 1.826 0 .523-.138.986-.416 1.386L11.073 7.82l3.235 4.102c.323.408.485.886.485 1.433 0 .724-.254 1.345-.763 1.865-.508.52-1.124.78-1.848.78-.793 0-1.398-.258-1.814-.774l-3.962-4.944v2.726c0 .778-.135 1.383-.405 1.814C5.51 15.607 4.8 16 3.86 16c-.855 0-1.518-.29-1.987-.866-.44-.532-.66-1.237-.66-2.114V2.91c0-.83.224-1.516.67-2.055C2.348.285 2.995 0 3.82 0c.786 0 1.44.285 1.964.855.292.316.477.635.554.96.047.2.07.572.07 1.12v2.518z"/>
</symbol>
</defs>
</svg>

The symbol element’s id attribute identifies the social icon and its value will be used later in our code.
Now we have to include the new SVG sprite into the page from the child theme’s functions file:

function childtheme_include_svg_icons() {
  // Define SVG sprite file.
  $custom_svg_icons = get_theme_file_path( '/assets/images/svg-custom-icons.svg' );

  // If it exists, include it.
  if ( file_exists( $custom_svg_icons ) ) {
    require_once( $custom_svg_icons );
  }
}
add_action( 'wp_footer', 'childtheme_include_svg_icons', 99999 );

This function is much like the corresponding twentyseventeen_include_svg_icons function defined in Twenty Seventeen’s functions.php file. The main difference is that in our custom function we are using get_theme_file_path to get the child theme’s SVG file.
Finally, we can append our Kickstarter icon to the array of supported social link icons:

function childtheme_social_links_icons( $social_links_icons ) {
  $social_links_icons['kickstarter.com'] = 'kickstarter';
  return $social_links_icons;
}
add_filter( 'twentyseventeen_social_links_icons', 'childtheme_social_links_icons' );

Add the Kickstarter item to the Social Links menu and jump to the page footer to appreciate the result of our work.

kikstarter

A customized Social Links menu

Building a Scrollable One-page Website

Even if the Twenty Seventeen theme provides a multiple section front page, animated scrolling is not a feature. The theme uses the jQuery ScrollTo plugin to create an animated scrolling effect. Unfortunately, the animation is activated only when the user clicks on the navigation down arrow, and is not available for menu items. But we’re developers and we can give Twenty Seventeen more powers. So, in this last example, we will extend the animated scrolling functionality so that the site admin can build an animated one page website.

Navigation menu in twenty seventeen theme

When the user clicks on the arrow icon in the navigation menu, the front page scrolls down to the first page section

In the Twenty Seventeen theme the animation effect is controlled by the global.js file, placed in /assets/js/ folder. So, our first task is to copy and paste global.js from its original location to the child theme’s corresponding folder.

File structure

The file structure of the child theme

Now we can start coding. To accomplish this fnal task, we will

  • force WordPress to load the child theme’s global.js file instead of the original parent’s file,
  • add a specific CSS class to menu links,
  • add an ID to each section in the front page,
  • modify the global.js file to get the animation effect.

1. Forcing WordPress to Load the Child Theme’s global.js File

Let’s modify the childtheme_enqueue_styles function defined in our first example as follows:

function childtheme_enqueue_styles() {
  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );

  wp_enqueue_style( 'child-style',
    get_stylesheet_directory_uri() . '/style.css',
    array( 'parent-style' ),
    wp_get_theme()->get('Version')
  );

  if( is_front_page() ){
    wp_enqueue_script( 'twentyseventeen-global', get_theme_file_uri( '/assets/js/global.js' ), array( 'jquery' ), '1.0', true );
  }
}
add_action( 'wp_enqueue_scripts', 'childtheme_enqueue_styles' );

If the current page is the front page, WordPress enqueues the child theme’s global.js file. If it does not exist, WordPress loads the parent’s global.js.

2. Adding a CSS Class to Menu Links

In order to add a CSS class to the menu a elements, we can use the nav_menu_link_attributes filter. Add the following code in functions.php:

function childtheme_theme_menu_class($atts, $item, $args) {
  if( is_array( $atts ) ) {
    $atts['class'] = 'nav-menu-scroll-down';
  }
  return $atts;
}
add_filter('nav_menu_link_attributes','childtheme_theme_menu_class', 0,3);

The menu item mark-up will change as follows:

<li id="menu-item-96" class="sections menu-item menu-item-type-custom menu-item-object-custom menu-item-96">
  <a href="/kinsta/#section-1" class="nav-menu-scroll-down">Section 1</a>
</li>

Now we can easily select any menu link from a script.

3. Adding IDs to Front Page Sections

In order to make the page scrollable, we have to create menu link targets by providing an id attribute to each section. Copy and paste the parent’s content-front-page-panels.php file from /template-parts/page/ into the same child theme’s folder. Then go to line 30 and change it as follows:

<div class="panel-content" id="<?php echo get_post()->post_name; ?>">

Now the front page sections have IDs that allow us to target them from the navigation menu. Here is the new mark-up of the section wrappers:

<div class="panel-content" id="section-1">...</div>

Note that the value of the id attribute will be the post slug.

Navigation

The image shows the URL of a menu link

4. Modifying the global.js File

Now let’s open the child theme’s global.js file and declare the following variable:

$navMenuScrollDown = $body.find( '.nav-menu-scroll-down' ),

Jump to line 213 and add the following code:

$navMenuScrollDown.click( function( e ) {
  // grab target URL
  var url = $(this).attr("href");
  // get # position
  var index = url.indexOf("#");
  if(index  == -1){
    return;
  }
  // extract the target id value
  var targetId = url.substring(index);

  e.preventDefault();
  // remove classes from any menu list items
  $("a[href*='#']").parent().removeClass("current-menu-item current_page_item");
  // add classes to current menu item
  $(this).closest("li").addClass("current-menu-item current_page_item");

  // scroll down
  $( window ).scrollTo( targetId, {
    duration: 800,
    offset: { top: menuTop - navigationOuterHeight }
  });
}); 

In this function we checks whether the URL contains a pound character. If it doesn’t, the function returns. Following, we get the target section id, prevent default behavior, and handle CSS classes. Finally, the scrollTo method moves the viewport to the target section.

Download here the child theme developed in this post.

Wrapping up

Header media, front page sections, and SVGs are some of the most exciting features the Twenty Seventeen theme provides to site admins to set-up personal and professional websites with ease. But the Twenty Seventeen theme is also a great tool for developers, thanks to a good number of filters that can be used in child themes to customize the look and feel of any website. Have you built a Twenty Seventeen child theme yet? Would you suggest any further idea to enhance default functionalities?

This article was written by Carlo Daniele
Carlo is a freelance front-end designer and developer. When he writes articles and tutorials, Carlo mainly deals with web standards, but when he plays with websites his best workmate is WordPress.

Hand-picked related articles

  1. Gravatar for this comment's author
    claudio r January 27, 2017 at 7:55 am

    Hi Carlo, i’ve try also with this code but no way to load the parent style… any idea? grazie

    1. Gravatar for this comment's author
      claudio r January 27, 2017 at 9:32 am

      update: maybe just renaming the file from function.php to functions.php can help :)

      1. Gravatar for this comment's author
        Carlo Daniele January 28, 2017 at 7:10 am

        Hi Claudio. Did you find any bug in the attached child theme? It works fine for me and the functions.php file name is correct (see image below).

        https://uploads.disquscdn.com/images/5ef895cbac5619fbe0bf189a29ac9705e66a012a552b1577f17f87410d0be073.png

        1. Gravatar for this comment's author
          claudio r January 29, 2017 at 2:38 pm

          Carlo no… easy :) I’m talking about my child theme that I developed from scratch

  2. Gravatar for this comment's author
    Augusto Vin February 1, 2017 at 11:37 pm

    Hi Carlo, I am want to make an array of videos for the header , but i cant find where to place it. Any idea ?

    1. Gravatar for this comment's author
      Carlo Daniele February 7, 2017 at 8:19 am

      Hi Augusto. Out of the box, WordPress does not allow to pass an array of videos. But you can do anything in WordPress. Actually, it would be a great topic to dive into, but I think it would require a lot of reading, coding and testing. Here are two essential resources:
      https://developer.wordpress.org/themes/functionality/custom-headers/
      https://make.wordpress.org/core/2016/11/26/video-headers-in-4-7/

      1. Gravatar for this comment's author
        Augusto Vin February 7, 2017 at 9:21 am

        Thanks a lot Carlo I can imagine the system it self dosnt allow an array of videos I want to have a new video everytime the site is refreshed So if I can have ten reference calling the videos from u tube and a snippet picking randomly one of those videos Maybe I ll have something. ha
        I have to check ur references an work
        Thanks !:)

        1. Gravatar for this comment's author
          Carlo Daniele February 7, 2017 at 11:57 am

          Great! Keep us posted! I think it would be an amazing feature for a child theme.

  3. Gravatar for this comment's author
    Frank Noack February 8, 2017 at 9:21 am

    Hello Carlo, Can I set the audio on for the Header Background Video?

    1. Gravatar for this comment's author
      Carlo Daniele February 8, 2017 at 11:25 am

      Hi Frank,
      video settings are defined in wp-includes/js/wp-custom-header.js. Embedded video properties are declared from line 276:

      video.id = ‘wp-custom-header-video’;
      video.autoplay = ‘autoplay’;
      video.loop = ‘loop’;
      video.muted = ‘muted’;
      video.width = this.settings.width;
      video.height = this.settings.height;

      As you can see, the video.muted prop is set to muted. This means that the header video does not support audio.

      The same is for YouTube videos (same script, line 378):

      onReady: function( e ) {
      e.target.mute();
      handler.showControls();
      },

      You
      could dequeue ‘wp-custom-header’, then enqueue a custom script which
      overrides default settings. Actually, it could be difficult to mantain
      this feature in the long term, because core scripts could change over
      time, but it is possible.
      Have a look at the source code of this plugin: https://github.com/bradyvercher/custom-header-vimeo
      It appends a custom script in case ‘wp-custom-header’ exists. You can use the plugin as base to enable audio in your header video.

      1. Gravatar for this comment's author
        Frank Noack February 8, 2017 at 11:44 am

        Many Thanks Carlo

  4. Gravatar for this comment's author
    vince February 25, 2017 at 8:41 am

    Hi, how can I place the logo on navigation bar and move the logo &header text on the center of the picture

    1. Gravatar for this comment's author
      Carlo Daniele February 26, 2017 at 9:26 am

      Hi. To add icons to the navigation menu follow this path:
      1) Go to admin menus screen and select the nav menu.
      2) Open the screen option tab and check the CSS classes option
      3) Add a “Home” menu item, then add a CSS class to the item (i.e. class=home)
      4) Save data and jump to the theme customizer
      5) Check Additional CSS and add the following block:


      .main-navigation .home {
      width: 4em;
      background: url(url_to_your_logo.png);
      background-repeat: no-repeat;
      background-position: center;
      background-origin: border-box;
      background-size: 46px 46px;
      text-indent: -9999px;
      }

      Have a look at the image below.

      https://uploads.disquscdn.com/images/404f59c7647f37d8e7beeba8f7c9ea5495a7d97043abec13b6a48e4383b3ef28.png

      In the Customizer’s Additional CSS section you can add all CSS you need to move logo and text as well.

  5. Gravatar for this comment's author
    Greg Umstead March 12, 2017 at 9:46 am

    I’ve successfully created a restaurant site using the 2017 theme with sections such as menu, gallery, events, contact. My problem is I really need two sets of this (one for each location) and some sort of branded front page to pick which location. It appears the “The Front Page” concept is baked into the page data and used to filter which page shows upon entry as well as which pages make its sections, and out of the box, there can only be one of these.

    What strategy could I use to enable multiple SPA look pages per location with a location selector up front?

    1. Gravatar for this comment's author
      Carlo Daniele March 14, 2017 at 8:30 am

      Hi Greg.
      It’s a good question from you! It focuses on what I consider a limit of Twenty Seventeen: the front-page template is hard to duplicate.
      You’d need a new page template, but it would not be enough because you should add a new section to the theme customizer, register new filters (the front page sections are filtered through
      twentyseventeen_front_page_sections), declare custom styles, add the header video feature to the custom page template. It’s really a hard work to deal with.

  6. Gravatar for this comment's author
    Adonis Paxon March 13, 2017 at 6:07 pm

    Adding more SVGs… Stuck, Pls Help*

    Alright, so I am stuck on this process. Some of the things that I am trying to wrap my head around is the actual icon, and then the location of the SVG file.

    I can create an SVG file, it is as simple as putting the code into a text file and renaming it.
    Q. What shall I Rename it to? I have Tried: ‘svg-custom-icons.svg’
    Q. Which Folder Shall I place it in? I have tried Both the ‘twentyseventeen-child’ as well as the folder which also hosts the original svg: ‘WordPress/themes/twentyseventeen/assets/images/’

    Is there a part of the Actual Code in the Script that Needs to be altered or changed to point to the right location & What about the Actual Icon? do I need to make it on Photoshop put it in a folder etc.

    Thank you for all of your help. I really want to Nail this process before moving forward to the Fun Part of the Building One Page Scrollable website*

    1. Gravatar for this comment's author
      Carlo Daniele March 15, 2017 at 8:35 am

      Hi. You need an SVG sprite like svg-icons.svg file located in assets/images folder. Open it in your plain text editor and dive into the mark-up. You should create a sprite having the same structure. Take these icons:

      <symbol id="icon-deviantart" viewBox="0 0 18 32">
      <path class="path1" d="M18.286 5.411l-5.411 10.393 0.429 0.554h4.982v7.411h-9.054l-0.786 0.536-2.536 4.875-0.536 0.536h-5.375v-5.411l5.411-10.411-0.429-0.536h-4.982v-7.411h9.054l0.786-0.536 2.536-4.875 0.536-0.536h5.375v5.411z"></path>
      </symbol>
      <symbol id="icon-medium" viewBox="0 0 32 32">
      <path class="path1" d="M10.661 7.518v20.946q0 0.446-0.223 0.759t-0.652 0.313q-0.304 0-0.589-0.143l-8.304-4.161q-0.375-0.179-0.634-0.598t-0.259-0.83v-20.357q0-0.357 0.179-0.607t0.518-0.25q0.25 0 0.786 0.268l9.125 4.571q0.054 0.054 0.054 0.089zM11.804 9.321l9.536 15.464-9.536-4.75v-10.714zM32 9.643v18.821q0 0.446-0.25 0.723t-0.679 0.277-0.839-0.232l-7.875-3.929zM31.946 7.5q0 0.054-4.58 7.491t-5.366 8.705l-6.964-11.321 5.786-9.411q0.304-0.5 0.929-0.5 0.25 0 0.464 0.107l9.661 4.821q0.071 0.036 0.071 0.107z"></path>
      </symbol>

      Notice the symbol element, the id and the viewBox attributes. You should reproduce this structure. WordPress will identify the icon from the id attribute, so you should set an id whose value starts with icon- and ends with the name of the actual icon.

      It’s not important which name you choose for your SVG file. Just define it in your code with the following line:

      $custom_svg_icons = get_theme_file_path( '/assets/images/svg-custom-icons.svg' );

      In the code above the SVG sprite is located in /assets/images/, but you can choose a different folder. You just need to include the file using get_theme_file_path.

      You can duplicate the structure of the attached child theme

      And, if you’d need further information about SVG sprites, have a read at this great tutorial from Sara Soueidan

  7. Gravatar for this comment's author
    James Burke March 17, 2017 at 4:33 am

    Here’s a simple request – what’s the easiest way to increase the size of Page Titles? I have a Child Theme installed. Here’s the code from doing an “Inspect” Room Features – seemingly it’s the H1 properties I need to change. many thanks.

    1. Gravatar for this comment's author
      Carlo Daniele March 17, 2017 at 9:24 am

      It’s quite straightforward. Open the child theme’s stylesheet and add the following block of declarations:

      .single-post .entry-title, .page .entry-title {
      font-size: 36px; // default value
      font-size: 2.625rem; // default value
      }

      Adjust the font size as needed. You can test your edits in the theme customizer before you save any changes

  8. Gravatar for this comment's author
    Gabriel Lana March 20, 2017 at 11:53 am

    Hi, what would be the most “theme-friendly” way to set up a custom font using Twenty Seventeen Theme? Regards

    1. Gravatar for this comment's author
      Carlo Daniele March 21, 2017 at 11:10 am

      Hi Gabriel. We have an in-depht guide to local fonts in WordPress (and Twenty Seventeen) here on Kinsta blog https://kinsta.com/blog/local-fonts/

  9. Gravatar for this comment's author
    Gav March 22, 2017 at 12:35 pm

    Hi,

    How can we have the huge header like in the picture attach below
    for all the pages or something that we can change huge header for ever page.
    It will be a great help :) Thanks

    1. Gravatar for this comment's author
      Carlo Daniele March 26, 2017 at 10:10 am

      Hi Gav. I replied to a similar question in this comment http://disq.us/p/1gzewrs
      The front page template is hard to duplicate. You have to create a custom page template in your child theme reflecting the structure of the header.php template, which includes header-image.php and site-branding.php template parts.
      I replied to a similar question in this comment http://disq.us/p/1gzewrs

  10. Gravatar for this comment's author
    lisa May 4, 2017 at 5:29 pm

    HI – how do I change the line height of the h1, h2, h3, etc. There is so much space before and after the lines. Thanks so much.

    1. Gravatar for this comment's author
      Carlo Daniele May 6, 2017 at 11:56 am

      Try to identify the CSS declarations you need to change using the browser’s inspector. Then copy and paste them into the Additional CSS section of the Theme Customizer, and change their values accordingly.
      As an example, the white space below h2 titles depends on the margin-bottom property of the header element wrapping post titles. You can reduce this space with the following declaration:
      .page.page-one-column .entry-header, .twentyseventeen-front-page.page-one-column .entry-header, .archive.page-one-column:not(.has-sidebar) .page-header {
      margin-bottom: 2em;
      }

  11. Gravatar for this comment's author
    Dan Richardson May 4, 2017 at 9:35 pm

    Hi,

    I am having a one page nav issue, in particular when you set the static page to say a page called home, the panel id isn’t set. Its only set for the other pages that are included in the one page layout. For example:

    [code]
    HOME PAGE

    &lt;article id=&quot;post-80&quot; class=&quot;twentyseventeen-panel post-80 page type-page status-publish hentry&quot;&gt;
    &lt;div class=&quot;panel-content&quot;&gt; // This is missing an id? Set ‘home’ page as static front page
    &lt;/div&gt;&lt;!– .panel-content –&gt;
    &lt;/article&gt;

    ABOUT PAGE

    &lt;article id=&quot;panel1&quot; class=&quot;twentyseventeen-panel post-9 page type-page status-publish hentry&quot;&gt;
    &lt;div class=&quot;panel-content&quot; id=&quot;about&quot;&gt;
    &lt;/div&gt;&lt;!– .panel-content –&gt;
    &lt;/article&gt;
    [/code]

    1. Gravatar for this comment's author
      Dan Richardson May 4, 2017 at 11:28 pm

      I worked out a solution, there are div’s above the first content-panel that use any of the following id’s: main, primary or content. I just used those references instead, Cheers!

      1. Gravatar for this comment's author
        Carlo Daniele May 6, 2017 at 11:36 am

        Hi Dan, you’ve found the solution. The front-page content is wrapped within a main element with id=”main”. It’s your target if you need to link to the top of the page

  12. Gravatar for this comment's author
    Leigh May 22, 2017 at 5:09 am

    Hello,

    Is it possible to change the front page header image into a section, keeping the behaviour the same? I.e. To have pricing plan tables in there instead of an image?

    Thanks

    1. Gravatar for this comment's author
      Carlo Daniele May 24, 2017 at 12:59 pm

      The custom header is generated by two template part files:
      template-parts/header/header-image.php
      template-parts/header/site-branding.php
      You could duplicate these files in your child theme and change them as needed

  13. Gravatar for this comment's author
    Lucas Cedyas May 22, 2017 at 7:30 am

    Sorry. my precedent question could be discarded. Your scrollable one page system works really perfectly! It was a plugin I installed and removed before that messed up my database!
    The effect is fantastic on twentyseventeen, I think its even better than the jquery scrolls on html that are heavy to load!
    Thank you for sharing your knowledge with all of us sir!

    1. Gravatar for this comment's author
      Carlo Daniele May 23, 2017 at 7:05 am

      Glad to be of help

      1. Gravatar for this comment's author
        Lucas Cedyas May 23, 2017 at 7:57 am

        Thank you again Carlo.
        The scroll works for all the pages inclusive “home”, I used your answer to another question, but set “#page” instead of “main” as target. This way it shows the whole header.
        I met an issue though. When the page is at toggle button width, on-click on menu, the menu items are expanded.
        When I choose a menu item the page scrolls there very well. The problem is that the toggle rmains expanded and won’t collapse.
        I removed the plugin and it worked well, I put it back and it stopped collapsing the menu again.
        Its an issue because I would like to fix the menu on top…
        here’s my webbsida:
        dboops.com
        T´WOuld be great if you could help on this one!

        1. Gravatar for this comment's author
          Carlo Daniele May 25, 2017 at 1:31 pm

          You should overwrite 2 files from your child theme: header.php and style.css.
          In header.php you have to move the following line below the div.navigation-top block:
          <?php get_template_part( 'template-parts/header/header', 'image' ); ?>
          Then you should re-declare each occurrences of the CSS position and bottom properties of the div.navigation-top element, and set their values to fixed and auto respectively.
          Note that I’ve not tested this code, so check it at different screen resolutions

          1. Gravatar for this comment's author
            Lucas Cedyas May 27, 2017 at 8:48 pm

            Ciao Carlo
            Well, I didn’t sleep but I did it. Thanks again.
            The Jquery menu of twentyseventeen is weird. There’s a problem (maybe a bug) with the menu when it refers to local anchors (#).
            The toggle-menu won’t collapse. Maybe you noticed this.
            It’s a problem if one needs the menu on top. For the css I did as you told me, and it worked, I tried it on several different machines and different browsers.
            So the menu is up and “fixed”.
            The biggest problem was the (ul > li) that didn’t collapse and stay in the way until I click on the button again.
            Tried many tricks with js, none worked. The button itself was hiding!
            the last resort was to “virtually” click on it. So I used jquery in your script at this level.
            ————————————————————————
            $(this).closest(“li”).addClass(“current-menu-item current_page_item”);
            $menuToggle.trigger(‘click’);

            // scroll down

            ——————————————-
            It seems working perfectly, we will see later if its stable.
            Next challenge: sliding the “header image” and featured images with text on them extracted from posts with a “view” query…

            Thanks again Carlo! It was a great help!
            Check out the site, its up! :)

  14. Gravatar for this comment's author
    Lucas Cedyas May 22, 2017 at 7:34 am

    hmmm… I will not hesitate to ask for help again :)
    I want to put the site-navigation on top in absolute, and put the arrow at fixed (0, 0). it worked partially. The problem is with the arrow that I would like to use as a “go to top” thing…

  15. Gravatar for this comment's author
    Dave May 23, 2017 at 9:16 am

    Is there a quote missing in the Building a Scrollable Onepage Website? When modifying the content-front-page-panels.php file you use the following:

    <div class="panel-content" id=post_name; ?>”>

    Should there be another quote right after id=, that is:

    <div class="panel-content" id="post_name; ?>”>

    Thanks for the helpful post!

    1. Gravatar for this comment's author
      Dave May 23, 2017 at 10:04 am

      Just saw the download link – looks like the quote is indeed missing.

      1. Gravatar for this comment's author
        Carlo Daniele May 24, 2017 at 12:46 pm

        I’ve just updated the post. Thank you for pointing it out, Dave.

  16. Gravatar for this comment's author
    Vivek Kumar May 23, 2017 at 7:48 pm

    I am trying to add text overlay on the featured image and trying to use it like page header. Unfortunately, I am not successful. I tried several things after researching over the internet as well as WordPress forum. I am fairly new to the WordPress. Would you be able to give me insight about approaching and obtaining desired result.
    Thanks -Vivek

  17. Gravatar for this comment's author
    Travis May 27, 2017 at 4:17 pm

    Hello. I’m not very good with WordPress, and I’m looking for a way to stop the Parallax images from being darkened while scrolling down. Anyone know how to accomplish that?

  18. Gravatar for this comment's author
    julien bouchez June 2, 2017 at 7:02 am

    Hi,
    I am mainly interested in you Scrollable One-page feature.

    So far, I have :
    – downloaded and activated your child theme
    – populated the sections with pages (Work, About, …)

    I am in the process of building the navigation menu with custom links.
    In you example, you use “/kinsta/#section-1”

    Can you please tell me what I am supposed to use instead of “kinsta” ?

    Regards

    1. Gravatar for this comment's author
      Carlo Daniele June 3, 2017 at 6:51 am

      Hi Julien,
      In my example, kinsta is the WordPress folder name. if your installation resides in the root directory, you should remove the /kinsta/ part from the URL.

  19. Gravatar for this comment's author
    Sergio June 5, 2017 at 3:27 pm

    Hi Carlo, first, thanks for the article. I’ve put it to good use and have learned a good amount from it. I seem to be having an issue with style.css files. The child theme’s functions.php loads both the parent’s and child’s, but the original functions.php loads the child’s style.css again (line 415). This is apparent when looking at dev tools. there are 3 links in the header with ids of “parent-style-css”, “child-style-css” and “twentyseventeen-style-css”.

    If I remove:

    wp_enqueue_style( ‘child-style’,
    get_stylesheet_directory_uri() . ‘/style.css’,
    array( ‘parent-style’ ),
    wp_get_theme()->get(‘Version’)
    );

    Then the parent functions.php loads the child style.css and vise versa. Does that make sense? Or should it be written differently?

    Thanks again!

  20. Gravatar for this comment's author
    Shane Taylor June 27, 2017 at 7:47 pm

    I got this to work, but every time I click on a menu item to smooth scroll down, I get the following error in the console:

    Uncaught TypeError: Cannot read property ‘indexOf’ of undefined
    at HTMLLIElement. (global.js?ver=1.0:217)
    at HTMLLIElement.dispatch (jquery.min.js:3)
    at HTMLLIElement.r.handle (jquery.min.js:3)

  21. Gravatar for this comment's author
    Ed August 24, 2017 at 9:08 am

    In “Site Identity” Customizer, there is only 1 textbox for Tagline.

    I’d like to add another textbox for a second Tagline.

    How can I modify “Site Identity” Customizer to add a second textbox field for Tagline? Then display this second Tagline on the site itself.

  22. Gravatar for this comment's author
    Mark December 11, 2017 at 4:23 am

    thanks for this, works well.
    I’ve been trying to add to .js to highlight menu items on scroll without success.

    Could you make a suggestion as to how to achieve this?

Leave a Reply to James Burke Cancel reply

Use WordPress?

Join 20,000+ others who get our FREE weekly newsletter with WordPress tips on how to drive more traffic and revenue to your business!

You have Successfully Subscribed!

Send this to a friend