IEWP Twenty Seventeen Child Theme

This post supplement’s Joseph Dickson’s Child Theme talk at the Inland Empire Meetup on July 3rd, 2018

Concepts used in this presentation include

  • style.css and functions.php usage
  • Repeated post content under every post using WP_Query
  • Removing Google Fonts & Replacing it with a local hosted font
  • Adding custom shortcodes

IEWP Child Themes presentation (Libre Office Impress .opd file)

Twenty Seventeen Child IEWP JD (Child Theme .zip file)

Twenty Seventeen Empty Child

I created this child theme purely for educational and experimental purposes.

This simple child theme that does nothing. It’s an empty stylesheet, and has a functions.php file that imports the parent and a placeholder screenshot.png.

Feel free to download it, add your custom code. The Twenty Seventeen theme remains stock and will receive updates and pass those along to the child theme.
twentyseventeen-empty-child.zip

Remove Comments

A simple plugin I created to disable commenting on attachment pages, posts and standard pages.

Even if commenting is allowed on a post, page or set to be allowed within the site’s discussion settings it will disallow comments.

This is particularly useful if you want to disable comments globally and don’t want to bother with individual settings.

pz-disable-comments

As always no warranty is provided or given, use at your own risk.

Working with WP Query

For today’s presentation please download the theme boiler-plate if you’d like to follow along on your computer. This theme requires the Twenty Seventeen theme to function.

How to remove Google Fonts from the Twenty Seventeen theme

WordPress uses Google Fonts to provide Libre Franklin a versatile sans serif font in the Twenty Seventeen theme.

However, There are practical reasons not to rely on third party font hosting. Local development while disconnected from the internet, privacy concerns, unreliable access to Google services, or perhaps you just want to minimize your reliance on a third-party resources whenever possible.

In this post I’ll show you how to remove Google Fonts from the Twenty Seventeen theme and replace it with a locally hosted version. Libre Franklin is licensed under the SIL Open Font License and self hosting is permitted.

To begin I suggest installing Privacy Badger or another browser plugin that will allow you to easily see what third party services are connected to your website.

Precautions

This sort of development can easily break your website. Do not attempt to do this in a live production environment. I strongly suggest using Desktop Server or a local testing environment.

Lets Get Started

You may want to disable Avatar Display in Settings > Discussion to remove Gravitar support so it doesn’t appear in Privacy Badger as a possible tracker.

Create a Child Theme

It’s good practice to Create a Child Theme whenever making customizations to an existing theme. If you haven’t done this before read up on the process before proceeding.

Our child theme will require only two files. style.css and functions.php everything else will be inherited from Twenty Seventeen.

style.css
An example of my Twenty Seventeen Child theme style.css

Now create an empty functions.php file. We’ll be doing all our work in that file.

<?php
add_action( 'wp_enqueue_scripts', 'twentyseventeen_child_enqueue_styles' );
function twentyseventeen_child_enqueue_styles() {
        wp_enqueue_style( 'twentyseventeen-style', get_template_directory_uri() . '/style.css' );
        wp_enqueue_style( 'twentyseventeen-child-style', get_stylesheet_directory_uri() . '/style.css' );
}
/* Remove Google Fonts from being imported from Google:
 * This will remove Franklin Libre and any other Google fonts
 * imported from the partent theme.
 * https://codex.wordpress.org/Function_Reference/wp_dequeue_style
 * */

add_action( 'wp_print_styles', 'remove_google_fonts', 1);
function remove_google_fonts() {
   wp_dequeue_style( 'twentyseventeen-fonts' );
}
/* A child theme's functions.php runs before the parent.
 * To remove a filter you have to run it later during init
 * */
function remove_google_fonts_preconnect() {
    remove_filter('wp_resource_hints', 'twentyseventeen_resource_hints');
}
add_filter('init', 'remove_google_fonts_preconnect');


/* Disable prefetch of Google Fonts API and s.w.org
 * https://wordpress.org/support/topic/remove-the-new-dns-prefetch-code/
 * https://developer.wordpress.org/reference/functions/wp_resource_hints/
 * Remove broken call to Google API
 * Remove call to WordPress.org for Emoji support
 * Remove it one step after the fonts '2'
 * */
remove_action( 'wp_head', 'wp_resource_hints', 2 );

/* Remove Parent Theme's editor style that imports the Google Fonts API
 * */
add_action( 'admin_init', 'my_remove_parent_styles' );
function my_remove_parent_styles() {
        remove_editor_styles();
?>
  1. un-click Avatar Display in Settings > Discussion
  2. Create a child theme
    1. In functions.php do the following
    2. dequeue google fonts or any other tracking scripts.
      1. https://codex.wordpress.org/Function_Reference/remove_action
    3. Remove Google Fonts Preconnect filter as it’s no longer needed
    4. use init so it runs after the parent theme scripts load
    5. Remove prefetch of google fonts and WordPress.org
    6. Remove post editor styles that also pull in google fonts
      1. https://core.trac.wordpress.org/ticket/36778?cversion=0#trac-change-9-1488153907292022

Notes

Not all fonts permit self hosting in their license agreement, please refer to your license agreement before substituting your favorite typeface.