How To Customize Twenty Seventeen WordPress Theme Using a Child Theme

How To Customize Twenty Seventeen WordPress Theme Using a Child Theme

Don’t you just love it when you can tweak something to make it even better? That is exactly what you’ll learn today. You’ll learn to Customize the WordPress Twenty Seventeen Theme by creating a custom child theme.

WordPress Theme Twenty Seventeen

Twenty Seventeen is a beautiful, sleek and responsive theme that sports a modern look that will make a good base for product showcase or any business website. Learn to customize Twenty Seventeen WordPress theme in this blog.

Before you learn how to setup a child theme, let us learn why child theme is important.

Responsive Customizable theme

Why create a child theme?

If you modify a theme directly and it’s updated, then your modifications will be lost. A theme upgrade replaces all the files in the theme directory. By using a child theme (which puts all your changes in a different directory), you will ensure that your modifications are preserved.

Am sure you have faced the situation when you want to make a change on your website, which is not possible with your theme options or theme customizer.

You may want an unique template, modify the standard styles or add new widgets to your theme. It would seem straightforward to dive in and make changes to the theme you’re using. Though you may feel it’s an easy thing to do, it brings its own problems over time. Your theme might not be compatible with latest WordPress in the future. The theme being used might have future security fixes or features that you would want. If you upgrade the theme, you will lose the changes you had done.

So, how do you do the changes safely? What’s the recommended way?

Child Themes… Yes, It’s a recommended way to customise your existing WordPress theme. You can safely upgrade the parent theme without losing your changes. With a child theme, you also reuse the existing features of the parent theme. Also, you can inherit the appearance or modify it according to your requirements.

Creating a Child Theme For Twenty Seventeen WordPress Theme

At the bare minimum, a WordPress child theme needs 2 files (style.css and functions.php). These files need to be in a directory/folder. Open /wp-content/themes/ in your WordPress installation folder and create a new folder for your child theme (twentyseventeen-child). You can name the directory to anything you want.

Twenty Seventeen theme | folder structure

In the directory created, you can make your style.css file. You can add the following header and modify it as per your needs.

/*
Theme Name: twentyseventeen-child
Theme URI: http://example.com/twentyseventeen-child/
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: one-column, two-columns, right-sidebar, flexible-header, accessibility-ready, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready
Text Domain: twentyseventeen-child

*/
@import url("../twentyseventeen/style.css");

Every style.css file in WordPress needs information at the top in block comments section for WordPress to understand about the theme. For a child theme, the main change you need to see is the value in the “Template” Tag. This shows that the theme is a child theme. The Template: tag needs to have the value of the parent theme (twentyseventeen). The parent folder name needs to match this value. Also, note that this is case-sensitive, so if you put any capitals (For e.g. TwentySeventeen) in the name it will not work.

The last line (starting with @import), imports your parent theme stylesheet (CSS file) into the child theme.

If you want to have a screenshot to identify your theme in the Theme Switcher area or WordPress Admin Dashboard, you can add a file called as screenshot.png in your child theme folder.

With only these changes your bare minimum child theme is ready. If you want to enable the theme, go to Appearance » Themes where you will see Twenty Seventeen Child Theme. You need to click on activate button to start using the child theme on your site.

Twenty Seventeen theme | Activate child theme

How to Customize Twenty Seventeen Child Theme for business

You can categorize your changes into 3 parts. One is for the basic appearance of the theme like colors or alignment (like margin, padding etc.) also commonly called as CSS changes, the other 2 are for the functionality like new templates or functions (either PHP or js changes). These are changes to be done in the styling or the CSS part.

When working with CSS, it’s always helpful to have a working knowledge of inspector tools, like Chrome Developer Tool or Firebug (For Mozilla Firefox). You can use the inspect feature of these tools and hover the mouse over the website area where you want to make the change. Once you click on the area where you want to make the change, the bottom section of the tool splits up, you can view the CSS on the right-hand side section. You can also modify the CSS rules on the right-hand side window and see the changes reflected on the viewing window.

Firebug inspection tool..

Once you have decided which CSS property you want to change, you can copy the CSS rule to the style.css file in your child folder. After saving the changes in the twentyseventeen-child/style.css file, you can see the changes when you refresh your browser.

Override enqueued styles and scripts

TwentySeventeen Theme works with WordPress 4.7 and above. It uses get_theme_file_uri function (introduced in WP 4.7). This function searches for the file in the child stylesheet directory first. This helps you to override a complete script or style in your child theme folder.

For e.g. If you want to replace global.js file, with your own, you can take a copy of global.js (from the twentyseventeen theme) and copy it to (twentyseventeen-child/assets/js folder). You can modify the global.js file with your changes now.

Making use of Theme Filters to modify default values

You can change width, front page sections, header settings, SVG’s, etc.

Code to modify width

function twentyseventeen_childtheme_content_width( $content_width ) {
    if ( twentyseventeen_is_frontpage() ) {
        $content_width = 960;
    }
    return $content_width;
}
add_filter( 'twentyseventeen_content_width', 'twentyseventeen_childtheme_content_width' );

Front Page Sections

function twentyseventeen_childtheme_front_page_sections() {
    return 5;
}
add_filter( 'twentyseventeen_front_page_sections', 'twentyseventeen_childtheme_front_page_sections' );

Custom header settings

function twentyseventeen_childtheme_custom_header_args( $args ) {
    $args['flex-width'] = true;
    return $args;
}
add_filter( 'twentyseventeen_custom_header_args', 'twentyseventeen_childtheme_custom_header_args' );

SVGs

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

Custom Colors

function twentyseventeen_childtheme_custom_colors_saturation() {
    return 40;
}
add_filter( 'twentyseventeen_custom_colors_saturation', 'twentyseventeen_childtheme_custom_colors_saturation' );

How To Achieve Parallax Image Effect

In order to achieve parallax image effect, you’ll have to follow 2 simple steps:

  1. Creating a page for each homepage section
  2. Adding a featured image to each page

Creating a page for each homepage section

First of all you’ll have to create few pages such as about page, blog page, service page, etc on the front page section.

To do so, go to pages>>add new

Parallax effect | add pages

Adding a featured image to each page

Next, you’ll have to assign a featured image to each page that’ll be a part of your front page section. These images will change simultaneously with the sections of your front page as you scroll (parallax effect).

Remember that Twenty Seventeen theme uses images that are 2000 pixels wide by 1200 pixels tall. Any image close to this size shall work well.

To add featured image go to page>>edit>>set featured image

Parallax effect | setting featured image

After you’re done adding the images, you can see the parallax scroll effect of your Twenty Seventeen theme as you scroll down.

Customize Twenty Seventeen WordPress Theme using the customizer

If you don’t want to setup a child theme and simply want to customize the theme with what’s available, you can do it with the help of customizer. No coding needed.

Customize Twenty Seventeen WordPress theme using its custom color options, adding a site logo, social menu, widgets, header and footer. This theme is very easy to customize.

Some of the dimensional specs of Twenty Seventeen theme are-

Main column width: up to 525px wide for two column layout, or up to 740px wide for one column layout.

Sidebar column width: up to 326px

Featured Image size: 2000px wide by 1200px high (recommended)

Header Video and Header Image size: 2000px wide by 1200px high (recommended)

Body font size: 16px (same as Twenty Sixteen)

Header Video and Image

This theme brings your site to life with header video and alluring header images. You can modify these by navigating to Customizer > Header Media. The header video supports mp4 format. You could also link to a video hosted on Youtube. Make sure that the video size is small so that it loads quickly.

Twenty Seventeen theme | Header video and image

Front Page

With the Twenty Seventeen theme, you can create a beautiful and striking front page comprising of content from different pages on your site. Four different sections are available to assign pages in this theme.

For setting this up, navigate to Customizer > Static Front page, and set your site to use a static front page if you haven’t already.

Twenty Seventeen theme | Front Page

For selecting a page you’d like to display for a section, navigate to Customizer > Theme Options. Under each front page section #, you can select the page that you would like to display.

Twenty Seventeen theme | Theme Options

Suppose you haven’t created a page yet, you can do so by clicking + Add New Page beneath one of the sections in the customizer.

Click Save & Publish, one you’ve finished adding a page to the different sections.

There are 4 default sections available, but what if you want 6? You can simply add the following snippet to your theme’s functions.php as a result of which two additional sections will be added.

Twenty Seventeen theme | Increase Columns

Twenty Seventeen Theme Custom Colours

There are three colour options available with this theme. Namely, light color scheme (default), a dark color scheme, and a Custom Colors scheme that can be adjusted to various hues using a slider. Navigate to Customizer > Colors, to explore all the available colour options. Twenty Seventeen Theme Custom Colours enable you to style your website in an amazing combination of colours.

Twenty Seventeen theme | light colour
Twenty Seventeen theme | dark colour
Twenty Seventeen theme | custom colour
Twenty Seventeen theme | header text colour

Languages Supported

Twenty Seventeen theme uses Libre Franklin by default and makes adjustments to the typography for the following alphabets: Arabic, Chinese, Cyrillic, Devanagari, Greek, Gujarati, Hebrew, Japanese, Korean, Thai.

Page Layouts

Twenty Seventeen theme provides two-page layout options – single column and two column. You can change the page layout by navigating to Customizer > Theme Options. Two-column layout is by default, it has page title in one column and page content in the other.

One column layout..

Twenty Seventeen theme | one column layout

Two column layout..

Twenty Seventeen theme | two column layout

Twenty Seventeen Theme Widgets

Twenty Seventeen Theme Widgets include footer widget area and sidebar widget area. The footer widget area will enable you to add widgets below the site’s content. A Sidebar widget is included in blog index, archive, search, and single blog posts.

You can choose from two types of widget areas namely, footer one and footer two. Footer One takes up one-third of the footer space. Footer Two takes up two-thirds of the footer space.

Overall, Twenty Seventeen is a powerful theme, and setting up its child theme will enable you to utilize it at full potential. Every default theme of WordPress keeps on getting better with time. Twenty Seventeen is an amazing theme for portfolio, business, corporate type of websites. Go ahead and customize Twenty Seventeen WordPress theme.

If you liked this article, please comment and share! 🙂

Recommended reading: How To Make A WordPress Site More Interactive Using Plugins

3 Comments on “How To Customize Twenty Seventeen WordPress Theme Using a Child Theme

  1. Many thanks for the detailed tips – much appreciated.

    Any idea how to add a call to action button in the centre of the homepage? I’ve tried all sorts of plugins, but since the homepage is not a page in WordPress, I can’t put the HTML anywhere (or would I need to create a child page and then edit the HTML directly?).

Leave a Reply

Your email address will not be published. Required fields are marked *

*

This site uses Akismet to reduce spam. Learn how your comment data is processed.