Bending The 2017 Theme To Your Will

Don't get excited! This post is not about how you can spend this year manipulating the media to brainwash the general public. There's plenty of talk about that just a Google search away, and if you want to be part of the experiment just log in to Facebook.

No, this is far less (or more, depending on your viewpoint) interesting. I'm developing a web site currently and wanted to put something together quickly. The new Twenty Seventeen theme matched the aesthetic needed and has some other interesting features like the ability to 'deep link' to homepage sections. I watched it get introduced at the State of the Word and it definitely looked like a theme with more features (and opinions) than the previous default WordPress themes.

I decided to use it for this project, which I'm doing on my own and designing as I go from a rough layout sketch. I based the layout on the Twenty Seventeen theme, but I've still had some issues making the changes I want. I therefore thought I'd document it here in case it saves someone else some time!

General Setup

Being a good WordPress citizen, I'm producing this theme as a child theme, rather than hacking around with the theme code. I've often used other starter themes like Underscores where it can be more valid to edit the theme code directly, but if you want to keep on an upgrade path (generally a good thing for site security) then creating a child theme is the way to go!

For the initiated, and as the name suggests, a child theme is a setup that allows you to extend a theme by overriding files and using the WordPress hooks system to inject your custom code at the right points.

Setting up a child theme for Twenty Seventeen is the same process as outlined on the Codex. I fell foul of not RTFM and copied in the code to en-queue the child theme's styles with a dependency on the parent theme's style sheet and didn't update the $parent_style variable to:

$parent_style = 'twentyseventeen-style';

I had de-queued the Twenty Seventeen style but as it's set as a dependency on a number of other CSS files it just gets en-queued again. The Codex document explains this in reasonable detail, so how I missed it, I'm not sure! Anyway, just in case someone else finds they've got two copies of the Twenty Seventeen styles loaded on each page, this is the problem.

Fonts

My new theme has some different fonts to those used in Twenty Seventeen so I set about working out how to override those. The font styles are setup in two places. One for the editor styles and the other for the theme itself.

I started by making my version of the twentyseventeen_fonts_url function, which constructs a Google Fonts URL with the fonts and weights required. I'm using a couple of weights of Poppins and Pacifico for this project, so the function in my child theme's functions.php looks like this:

function mb_fonts_url() {
    $fonts_url = '';
    $font_families = array();
 
    $font_families[] = 'Poppins:300,700';
    $font_families[] = 'Pacifico';
 
    $query_args = array(
        'family' => urlencode( implode( '|', $font_families ) ),
        'subset' => urlencode( 'latin,latin-ext' ),
    );
 
    $fonts_url = add_query_arg( $query_args, 'https://fonts.googleapis.com/css' );
 
    return esc_url_raw( $fonts_url );
}

We then have to de-queue Twenty Seventeen's version of this font URL and en-queue ours to replace it:

function mb_scripts(){
    wp_dequeue_style( 'twentyseventeen-fonts');
    wp_enqueue_style( 'mb-fonts', mb_fonts_url(), array(), null );
}
add_action('wp_enqueue_scripts','mb_scripts',11);

The 11 parameter in that call to add_action ensures that our hook gets run after the Twenty Seventeen one. WordPress loads a child theme's functions.php file before its parent's. This allows a theme to wrap functions in an if statement like:

if ( ! function_exists( 'theme_special_nav' ) ) {
    function theme_special_nav() {
        //  Do something.
    }
}

So a child theme can override the function simply by defining it (taken from the Codex document). In this instance we take a different approach and make sure that the parent hook has run before ours so the twentyseventeen-fonts available before the call to de-queue it.

We then need to add some code to our styles.css so these fonts get used. All the base font declarations are in one part of the Typography section of Twenty Seventeen's style sheet. I copied them over and adapted the code to cover the body and heading fonts:

body,
button,
input,
select,
textarea {
    font-family: "Poppins", sans-serif;
    font-weight:300;
 
}
 
h1,
h2 {
    font-family: "Pacifico", script, serif;
}
 
h3,
h4,
h5,
h6 {
    font-weight: 600;
}
body,
button,
input,
select,
textarea {
    font-family: "Poppins", sans-serif;
    font-weight:300;
 
}
 
h1,
h2 {
    font-family: "Pacifico", script, serif;
}
 
h3,
h4,
h5,
h6 {
    font-weight: 600;
}

I'll change the use of Pacifico as it's too small at the moment, and I don't think it's the right font for some of the heading styles, but I think this serves well as a demonstration.

Editor Styles

Twenty Seventeen helpfully includes a style sheet so the visual editor uses the same fonts while you're writing. I wanted to change this too, and noticed the theme loaded the editor-styles.css during the after_theme_setup hook. These styles are not queued using the same mechanism as the front end, and the only WordPress function I could find to remove these CSS files, removed them all! I'm not sure if this will be an issue (perhaps with some plugins) but it's ok for my purposes.

function mb_theme_setup(){
    //Need to check if this is going to takeaway other stuff that's needed!
    remove_editor_styles();
    add_editor_style( array( 'assets/css/editor-style.css','css/editor-style.css', mb_fonts_url() ) );
}
add_action('after_setup_theme','mb_theme_setup',11);

The loading of an editor style sheet looks in the child theme directory first before falling back to the parent. That means that WordPress loads the original editor-style.css file first, then my child theme's file with the necessary style overrides. The contents of which is something along the lines of:

body,
button,
input,
select,
textarea {
    font-family: "Poppins", sans-serif;
    font-weight:300;
 
}
 
h1,
h2 {
    font-family: "Pacifico", script, serif;
}
 
h3,
h4,
h5,
h6 {
    font-weight: 600;
}

Again I register the hook with a priority of 11 to ensure that it runs after Twenty Seventeen's.

What's next?

Phew, that was a lot of setup and explanation about fonts! I've just been fighting the header and how the theme displays the logo, so I'll document that next along with changes I'm making to the navigation. Until then, feel free to get in touch with any comments or suggestions.