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 going to create a brand fresh list of amazing possibilities and options. Rather, I will propose five quick tutorials targeted for helping experienced and novice users make the most of the new WordPress Standard theme. Through the use of features like child themes it will allow us to:

•       alters the header on the header of the front page.
•       create a custom video header control
•       Add additional sections to the homepage
•       create your personal SVG icons to the menus of Social Icons Menu
•       Animation of front page scrolling to create a single page website

A Child Theme to Enhance 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 provides vital information regarding the subject through comments. Additional tags are not required or we'll utilize custom style declarations as in our case. We must join the stylesheets of the parent and the stylesheets of the child. The following functions may be included in the 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 first, and then start creating your personal 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. By using this filter, we can provide the function with a callback array of these arguments:

• ' default-image' ( string) URL of background image
• ' default_text_color' ( string) the color of text used in headers;
• ' width' ( integer) header width (defaults since 2000);
• ' height' ( integer) header height (defaults between 1200 to 1200);
• ' flex-height' ( bool) Flexible support for header height (defaults are set at 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 with functions like:

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 It's extremely useful in the development of child themes. It first searches within the child theme for the specific file and falls back to the theme that was originally used first one in case there is no theme.

the function called get_theme_file_uriget_theme_file_path    

The creation of custom video control to control Headers designed for Headers

The header video is a WordPress core feature which is modified by Twenty Seventeen thanks to the WordPress header_video_settings filter. The settings can be changed repeatedly and return your customized settings using the exact filter. This code can be included in the functions.php of 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. After that, we have added our customized video controls. The two words we've used are however, you'll be able to understand The idea is that you can use this filter to substitute standard icons for the customized images you've created.

The Front Page is Getting More Sections. Front Page

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

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

Below is an image of the most recent options available to Customizer Theme in the Panel.

In addition, you can create other SVGs.

The inclusion of SVG graphics is one of the many interesting elements that is a part of Twenty Seventeen. The theme provides a good number of SVG icons, grouped in /assets/images/svg-icons.svg sprite file. There are SVG icons within the Social Links menu in the bottom section of this 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 hyperlink to your fantastic Kickstarter website, but Twenty Seventeen isn't able to give you with the appropriate SVG icon. You'll need to create a custom SVG Sprite image file similar to:

It is the symbol element's ID attribute determines the social icon The value of the attribute is later used for the codes we write. The next step is that we need to incorporate the latest SVG Sprite in the webpage with the help in the theme's child 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. There is a major difference in our custom function we employ the function get_theme_file_path to get the theme's SVG file.
    You can also include our Kickstarter logo onto the social link list that were approved through this 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' );

Incorporate the Kickstarter item to on the social Links menu. Then, jump to the page footer to see the results of our effort.

The design of a one-page scrollable website

If you've decided to use Twenty Seventeen, even though it's not a multi-section theme, the Twenty Seventeen theme provides a multi-section animated front page, this isn't an option included. The theme utilizes the JQuery ScrollTo plugin for an animated scrolling effect. The effect, however, is only activated only when the user presses the down arrow to navigate and is not available in menu items. We are programmers, and we can provide seventeen additional features. In this final example, we'll enhance the scrolling animation feature so that the administrator of the website can design an animation-based single-page website.

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

The time has come to get started with the program. In order to finish this project it is our intention to

• Inducing WordPress to load the child theme's global.js file, instead of the parent's original file.
• Use a specific CSS kind to the menu link
• Be sure to add the ID number for each section on the left upper corner of the page.
• Edit the global.js file in order to achieve an illusion of animation.

1. Inducing WordPress to download 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 web page you're viewing is the primary page of yours, WordPress calls the theme's global.js file. If this file doesn't exist, WordPress loads the parent's global.js.

2. The addition of a 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. Inside 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 particular menu item is determined to be altered according to the following method:

Section 1: Section 1.

It is now easy to select any hyperlink in the script.

3. Identifications are added to the Front Sections of the Front Page

For scrolling across the page, it is essential to make menu links for those pages that you intend 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. Make sure you go to line 30. alter the code in the following manner:

These sections on the front page now have IDs that allow users to select sections as targets from the navigation menu. The wrappers now have new markings of sections ... It is important to note that the purpose of the ID attribute lies in the post's the name. This picture shows how to get to the menu link. 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'll return. In the next step, we'll identify the ID of the area we'd like to concentrate on in order to end the default behavior and to handle CSS classes. The scrollTo technique guides the user to the desired section. Closing up head media sections, front pages and SVGs are some of the most impressive attributes that The Twenty Seventeen theme provides webmasters with the ability to create professional and personal websites easily. It is also a great choice for web developers. Twenty Seventeen theme is also an ideal tool for web developers thanks to the abundance of filters that can be utilized in creating child themes that alter the design and layout of any site. Are you working on a Twenty Seventeen child theme yet? Do you have an additional idea to enhance default functionalities? Reduce costs, time as well as the speed of your site: 24/7 support and assistance 24/7 from WordPress hosting experts 24 hours a day. Cloudflare Enterprise integration. Reaching a global audience with 35 data centers across the globe. Optimization by integrating Application monitoring of performance.

This article was originally posted here

Article was posted on here