A Developer's Introduction to Twenty Seventeen Theme

A lot has been said about the Twenty Seventeen theme, so in this article I'm not going to create an entirely new list of awesome features and features. Rather, I will propose five brief tutorials designed at helping developers and experienced users get the best from the new WordPress standard theme. Through the child theme feature We will be able to:

•    alter the header on the front page.
•    create a custom video header control
•    add more sections to the homepage
•    create your own SVG icons into the menu of Social Icons menu
•    animate the front page scrolling and design a single page site

A Child Theme to Enhance The Twenty Seventeen Theme's Functionalities

/*
 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 header stylesheet contains the necessary information about the topic by way of commentaries. No additional tags are required or we'll include custom style declarations in our examples. Then, we need to enqueue both the parent's and the stylesheets of the child. The following functions can be added to 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 begin creating your own Twenty Seventeen theme.

Customizing the Front Page Header

Twenty Seventeen allows customizing the header from the functions.php file of a child theme, thanks to the twentyseventeen_custom_header_args filter. With this filter, we are able to pass to a callback function an array of the following arguments:

• ' default-image' ( string) URL for background image;
• ' default_text_color' ( string) color used for header text;
• ' width' ( integer) header width (defaults up to 2000);
• ' height' ( integer) header height (defaults to 1200);
• ' flex-height' ( bool) flex support for header height (defaults set to the true value);
• ' 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 file with functions:

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 was introduced in WordPress 4.7, and helps greatly in child theme development. It first searches within the child theme for the specific file and falls back to the theme that was the original one if the file is not found.

Note: to use the function get_theme_file_uri along with its counterpart function get_theme_file_path your child theme should be able to follow the parent's file structure.

Making Custom Header Video Controls For Headers

The header video is a WordPress core feature which is modified by Twenty Seventeen thanks to the WordPress header_video_settings filter. You can alter these settings again, returning the customized settings through the same filter. We can add this code in your 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. We then added our custom video controls. In this instance we've only used two words, however you get the point: You can apply this filter to replace default icons with the custom images you have created.

The Front Page is Getting More Sections. Front Page

Twenty Seventeen offers the static homepage, which is split into segments. Each section takes its content from an existing page, and is topped with a full-screen picture (the featured image of every page).

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 your child's functions.php file:

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

The picture below shows the latest Customizer Theme Options Panel.

Adding more SVGs

The support of SVG graphics is one of the most interesting features in 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.

If you'd like to include a link to your amazing Kickstarter website, but Twenty Seventeen isn't able to provide the corresponding SVG icon.
 First you need a customized SVG Sprite image file similar to the following:

The symbol element's id attribute determines the icon that is social and its value is later used in the code we write.
 Then we must add the brand new SVG Sprite in the webpage from the child theme's functions files:

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 major difference is in our custom function we employ get_theme_file_path to get the theme's SVG file.
 We can also add our Kickstarter icon to the array of social links that have been endorsed by the campaign:

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 on the social Links menu, and then jump to the page footer to appreciate the result of our efforts.

Designing a scrollable one-page website

However, even if you are using the Twenty Seventeen theme provides a multiple section front page animation, it isn't something that is included. The theme utilizes its jQuery ScrollTo plugin for an animated scrolling effect. Unfortunately, the animation is activated only when the user clicks on the navigation down arrow and it's not accessible on menu items. We're programmers and could give Twenty Seventeen additional capabilities. In this final example, we will extend the animated scrolling functionality so that the site admin could create an animated single page website.

Within 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 initial location into the child theme's corresponding folder.

We can now begin coding. In order to complete this project, we'll

• Force WordPress to open the kid theme's global.js file instead of the parent's original file
• add a specific CSS type to the menu link,
• Include an ID in every section on the top left corner of the page.
• Change the global.js file in order to achieve the effect of animation.

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 page you are currently viewing is the primary page WordPress queries the parent theme's global.js file. If the file is not there, WordPress loads the parent's global.js.

2. Adding a CSS Class on Menu Links

In order to add a CSS class to the menu a elements, we can use the nav_menu_link_attributes filter. 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 mark-up of the menu item is set to change in the following manner:

Section 1: Section 1
 

We can now easily choose any menu link from the script.

3. The addition of IDs in Front Sections on the Front Page

In order to allow scrolling on the page it is necessary to design menu link target pages by assigning an id attribute to each page. Copy and paste the parent's content-front-page-panels.php file from /template-parts/page/ into the same child theme's folder. Go to line 30 and change the following code:

 
  Now the front page sections have IDs that allow users to choose them as a target from the navigation menu. The new marking-up of the wrappers for sections:
 
 ...
 
  
   It is important to note that the value of the ID attribute is the post's the slug.
  
 
 
  
  
   The image shows the URL of the menu link
  
 
 
  4. Making changes to the global.js File
 
 
  Then, let's access the child theme's global.js file and define the variable as follows:
 
 $navMenuScrollDown = $body.find( '.nav-menu-scroll-down' ),
 
  Jump to line 213 and insert the code below:
 
 $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 examine whether the URL has a pound symbol. If it doesn't it returns. After that, we'll get the ID of the section we want to target to prevent default behavior and handle CSS classes. In the end, the scrollTo method moves the viewer to the desired section.
 
 
  
  
 
 
  Closing up
 
 
  Header media, front page sections, and SVGs are some of the most impressive features that The Twenty Seventeen theme provides to site admins to set-up professional and personal websites with ease. But the Twenty Seventeen theme is also an excellent tool for web developers due to the large quantity of filters that could be used in child themes in order to modify the design and appearance of any website. Have you built a Twenty Seventeen child theme yet? Are you able to suggest an additional idea to enhance default functionalities?
 
 
  
   Cut down on time, expenses and increase site performance:
  
  
   
    24/7 help and support 24/7 support from WordPress hosting experts 24/7.
   
   
    Cloudflare Enterprise integration.
   
   
    Reaching a global audience with 35 data centers across the globe.
   
   
    Optimization with our built-in Application Performance Monitoring.