The Developer's Introduction to Twenty Seventeen Theme

There's been a lot of discussion about this Twenty Seventeen theme, so in this piece, I'm not proposing a brand fresh listing of the most amazing options and options. Rather, I will propose five quick tutorials targeted for beginners and experienced users to benefit from the new WordPress Standard theme. Through the use of options like child themes, it will allow us to:

•       changes the header in the the front page.
•       create a custom video header control
•       Include additional sections on the homepage
•       create your individual SVG icons to the menus of Social Icons Menu
•       Animation of front page scrolling, creating an all-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 contains vital information about the subject via the comments. Tags aren't required or we'll utilize customized style declarations in our case. The stylesheets must be joined of the parent with the stylesheets for the child. The following functions could 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' );

It's time to begin by activating the child theme Then, we can begin to create 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. With this filter, we can offer the function using an array of callback arguments:

• ' default-image' ( string) URL of background image
• ' default_text_color' ( string) the text color used in headers;
• ' width' ( integer) header width (defaults in 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)

In this case you can insert this code in the file, using functions such:

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' );

This obtain_theme_file_uri function was added by WordPress 4.7 It's extremely beneficial when developing child themes. The function first looks within the child theme for the particular file , and then goes back to the theme initially selected when there's no theme.

the function called get_theme_file_uriget_theme_file_path

Custom video control for the Headers specifically 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 frequently and then return the customized settings using the exact filter. The code could be placed within 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. Then, we've added our customized video controls. The two words we've used are however, you'll be able to understand The concept is to use this filter to substitute normal icons for custom photos you've designed.

The Front Page is Getting More Sections. Front Page

Twenty Seventeen is a static home page, which is separated into sections. Each segment takes the content from the previous page and then is decorated by the full-screen picture (the principal image that is displayed 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. As an example to use this filter, add this code in within the children's functions.php file:

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

Below is an image of the latest options offered to customize the theme within the Panel.

In addition, you can create different SVGs.

The addition of SVG graphics is just one of the interesting aspects 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 in the Social Links menu in the below 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 trying to create an online hyperlink to your awesome Kickstarter site, but Twenty Seventeen cannot provide you with the appropriate SVG icon. You'll need to create your own SVG Sprite image file similar to:

It is the symbol element's ID attribute determines the value of the social icon. of this attribute will later be utilized in the codes that we type. Following that, we need to incorporate the most current SVG Sprite in the webpage by using 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. It is notable that with our own custom function. We use the function get_theme_file_path to obtain your theme's SVG file. You can also include our Kickstarter logo in the list of social links that were approved 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' );

Incorporate the Kickstarter item to on your social Links menu. After that, go down to the bottom of the page and see the results of our efforts.

A single-page design for a scrollable website

If you've decided to use Twenty Seventeen, even though it's not a multi-section design, it's a multi-section theme. Twenty Seventeen theme provides a animated multi-section front page. it's not an option. The theme utilizes its JQuery scrollTo plugin to provide an animated scrolling effect. The effect, however, is only activated only when the user presses down arrows to navigate and it isn't available on menu options. We are programmers, and we are able to provide 17 additional options. In this case we'll improve the scrolling animation feature so that the owner of the site can create an animated single-page site.

In The Twenty Seventeen theme the animation effect is controlled by global.js file, that is found within the /assets/js directory of the /assets/j folder. The initial step is to duplicate and copy global.js from its origin location into the theme's child theme's folder.

The time is now to get started with the program. For the sake of completing this program, it's our goal to

• The process of causing WordPress to open the theme's global.js file instead of the parent's original file.
• Apply a certain CSS style to the menu link
• Make sure you add the ID number of every section in the left upper edge of the page.
• Modify the global.js file to create the illusion of motion.

1. Encouraging 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 on is the primary page for your site, 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 the 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 marking-up for a particular menu item will be modified in accordance with the following procedure:

Section 1 1.

It's now simple to select any hyperlink in the script.

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

To allow scrolling across the pages It is crucial to create menu links on the pages that you intend to make available through assigning the 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. You must get to the 30th line. Change the code in the following manner:

The sections that appear on the homepage now feature IDs that permit users to pick sections for targets using the menu navigation. The wrappers now have new markings of sections ... It's important to remember that the reason for the ID attribute is in the title of the post. The image below shows how you can 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 will be returned. The next step is we'll identify the ID of the region we'd like focus on to end the default behavior and also to deal with CSS classes. ScrollTo is a technique that guides the user to the section they want to visit. The closing of head media section as well as front pages, SVGs and other sections are some of the most impressive attributes that The Twenty Seventeen theme provides webmasters with the possibility of creating personalized and professional websites with ease. It is also a great choice for web developers. Twenty Seventeen is an excellent tool for web developers due to the numerous filters you can use when creating child themes to change the style and appearance of any web site. Are you working on the development of a Twenty Seventeen child theme yet? Are you thinking of an alternative suggestion to improve the default functionality? Cut costs, time as well as the speed of your site. 24/7 support and assistance 24/7 from WordPress expert WordPress hosting specialists 24 hours every day. Cloudflare Enterprise integration. Global reach with 35 data centers around the world. Optimization through integrating Application control of performance.

This article was originally posted here

The article was published on this site

This post was first seen on here