A Developer's Introduction To Twenty Seventeen Theme

A lot has been said concerning this Twenty Seventeen theme, so in this article I'm not planning to make a completely new list of awesome options and features. Rather, I will propose five brief tutorials designed at helping developers and experienced users make the most of the new WordPress standard theme. By using the child theme feature It will allow us to:

•       change the header in the header on the front page.
•       create a custom video header control
•       add more sections to the homepage
•       create your personal SVG icons into the menus of Social Icons Menu
•       animation of the front page scrolling, and create a one page website

A Child Theme for Enhancing the Twenty Seventeen theme's functionality.

/* 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 essential information on the subject via comments. No additional tags are required or we'll use customized style declarations in our example. We must join the stylesheets of the parent and the stylesheets for the child. The following functions may be added to the child'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, then begin creating your custom Twenty Seventeen theme.

Customizing your 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 can pass the function a callback array of these arguments:

• ' default-image' ( string) URL of background image
• ' default_text_color' ( string) color for text in headers;
• ' width' ( integer) header width (defaults from 2000);
• ' height' ( integer) header height (defaults between 1200 and 1200);
• ' flex-height' ( bool) Flex support for header height (defaults set to the actual height);
• ' 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)

For an example, we can put the following code into the file using 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 added in WordPress 4.7 It is extremely helpful when developing child themes. The function first looks within the child theme for the specific file and falls back to the original theme first one in case the theme does not exist.

the function called get_theme_file_uriget_theme_file_path

The creation of custom video controls for Headers 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 yet again and return your customized settings using the same filter. You can include 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. We've utilized two words, but you'll get the idea: You can apply this filter to substitute default icons with the custom images you've made.

The Front Page is Getting More Sections. Front Page

Twenty Seventeen offers the static homepagethat's divided into segments. Each segment takes the content from a previous page and then is decorated by a full-screen image (the main image on 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. For example, we can include the following code to your child's functions.php file:

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

Below is a picture of the latest options for Customizer Theme in the Panel.

In addition, you can add additional SVGs

The support of SVG graphics is one of the more interesting aspects of Twenty Seventeen. The theme provides a good number of SVG icons, grouped in /assets/images/svg-icons.svg sprite file. You can see SVG icons in the Social Links menu in the footer of the page. 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.

You're looking to add an online link to your fantastic Kickstarter website, however Twenty Seventeen isn't able to give you the suitable SVG icon. First you need a customized SVG Sprite image file similar to:

The symbol element's id attribute is what determines the icon which is social, and the value is later used for the codes we write.
    In the next step, we need to incorporate the brand-new SVG Sprite in the webpage using the functions of the child theme's 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 the function get_theme_file_path to obtain your theme's SVG file.
    We can also add our Kickstarter logo to the list of social links that have been endorsed through the Kickstarter 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' );

Include the Kickstarter item to on your social Links menu. Then, jump to the page footer to view the outcome of our effort.

Designing a scrollable one-page website

Even if have chosen to use Twenty Seventeen, even though the Twenty Seventeen theme provides a multi-section front page animation but it's not an option that's included. The theme uses its JQuery ScrollTo plugin for an animated scrolling effect. However, the effect will only activate when the user clicks on the down arrow to navigate and it's not accessible on menu items. We are programmers, and we could offer Twenty Seventeen additional capabilities. For this last example we'll expand the animation scrolling feature in order that the admin of the site could design an animated single page website.

Within the Twenty Seventeen theme the animation effect is controlled by global.js file, located in the the /assets/jsin the /assets/js folder. The first step is to copy and paste global.js from its original location to the child theme's corresponding folder.

It's time to begin programming. For the sake of completing this project, we'll

• Forcing WordPress to load the kid theme's global.js file instead of the parent's original file.
• Include a certain CSS type for the menu link
• Make sure to include an ID for each area in the upper left corner of the page.
• Modify the global.js file to create the illusion 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 watching is your primary page WordPress queries the parent theme's global.js file. If it isn't present, WordPress loads the parent's global.js.

2. The addition of an CSS Class for the Menu Links

In order to add a CSS class to the menu a elements, we can use the nav_menu_link_attributes filter. Within 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 marking-up for the menu item is determined to be changed in the following manner:

Section 1: Section 1.

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

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

For scrolling across the page, it is essential to create menu links for the pages you want to target 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 modify the code as follows:

Now the front page sections include IDs that permit users to pick them as a target from the navigation menu. New markings for the wrappers of sections: ... It is important to note that the significance in the ID attribute is the post's the slug. This image displays how to access 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 not, it will return. In the next step, we'll find the ID of the area we'd like to focus on to stop default behavior, and handle CSS classes. The scrollTo method guides the user to the desired section. Closing up header media, front page sections and SVGs are a few of the most impressive features that The Twenty Seventeen theme provides administrators of websites with the ability to create professional and personal websites easily. The Twenty Seventeen theme is also an excellent device for web developers thanks to the abundance of filters that could be used to create child themes to change the layout and look of any site. Have you built a Twenty Seventeen child theme yet? Do you have an additional idea to enhance default functionalities? Reduce costs, time and the performance of your website: 24 hour help and support 24 hours a day from WordPress hosting experts 24/7. Cloudflare Enterprise integration. Reaching a global audience with 35 data centers across the world. Optimization with our integrated Application performance monitoring.

Article was posted on here