Overriding and Resetting Twenty Seventeen

I'm continuing the theme of double meanings with these post titles. So far 2017 isn't shaping up as bad as I feared but lots of people seem to be suggesting that we're doomed in some way, the media (mainstream and social) is manipulating us more than ever before, and something about society and politics needs rebuilding from scratch. Some of that is probably true, but just in case you're living in a permanent state of fear, I'd encourage you not to panic. Why not take your mind off it by building a web site?

Was that a good segue? No, I didn't think so, but thought I'd get back on topic regarding my creation of a Twenty Seventeen child theme for a project I'm working on.

Can You Make My Logo Bigger?

After setting things up and changing some global aspects like fonts, I turned by attention to the header of the pages. Twenty Seventeen refers to this as site-branding. You can have a large cover image or video, on the front page, which shrinks to a smaller banner on subsequent pages. Being a generic theme, the logo image is optional, and the theme uses some nice typography to display the site's title and description. For my purposes, and I'd argue most business sites, the branding is all about the logo, so I needed to set things up to display the it more prominently.

Template Parts

The template parts are well thought out in the Twenty Seventeen theme. In case you don't know, WordPress allows theme developers to break their templates up in to parts which aids reuse of code, but also allows a child theme developer to override aspects without having to copy over large chunks of code. The get_template_part function that facilitates this does the equivalent of a PHP require, but looks for variations on the file name and location based on a hierarchy it generates from the parameters. Some more details of this are on the codex, and there's an interesting discussion on Stack Overflow on how to organise these files.

The branding of the theme is self contained in template-parts/header/site-branding.php. You may find that you can control everything you need using CSS, but I wanted to add some extra links on the front page, and to get my styling right I ended up needing an extra container div. If you want to override this code in the child theme too, then you need to recreate the directory structure and a file of the same name. I just copied the file over so I had the original code to base my changes on.

I also wanted to include a smaller version of the logo in the navigation bar when it becomes fixed to the top of the window. On the front page of the site there's a navigation arrow to scroll to the content. This disappears at that point, so I knew the bulk of what I needed here was already implemented.

The navigation is another template part template-parts/navigation/navigation-top.php which again you can override by copying over to the child theme using the same directory structure. Within that file there's a section that displays the navigation arrow on the front page. I added my logo image and link in at this point:

...
    <?php if ( ( twentyseventeen_is_frontpage() || ( is_home() && is_front_page() ) ) && has_custom_header() ) : ?>
        <a href="#content" class="menu-scroll-down"><?php echo twentyseventeen_get_svg( array( 'icon' => 'arrow-right' ) ); ?><span class="screen-reader-text"><?php _e( 'Scroll down to content', 'twentyseventeen' ); ?></span></a>
    <?php endif; ?>
    <a class="menu-logo" href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="<?php echo get_stylesheet_directory_uri(); ?>/images/logo-abbr.png" alt="<?php bloginfo( 'name' ); ?>"></a></h1>

I named my logo image logo-abbr.png and put it in the images directory of my child theme. You could also use the theme's custom_image here but I wanted a different version of the logo that worked better at this smaller size. We just need a bit of CSS to style it now:

.main-navigation a.menu-logo {
    display: none;
    position: absolute;
    right: 0;
    top:0;
    max-width:71px;
    padding:0.2em;
}

This will vary for you depending on your image and any other tweaks you've made to the navigation. You'll note I'm hiding it with display: none so you won't be able to see it yet! Luckily Twenty Seventeen uses a bit of JavaScript to add a class to the navigation container when it becomes fixed. Studying the code I saw the class site-navigation-fixed added to the navigation and allowed the navigation arrow to be hidden.

We can use the same mechanism to show our logo by adding the following CSS to our theme:

.site-navigation-fixed .main-navigation a.menu-logo {
    display:block;
}

Now our logo will appear as the user scrolls down the page. I'm thinking I might add a little CSS transition to make its appearance a bit less jarring!

Overriding CSS

Some of the specificity I've just used in the CSS above probably isn't needed, but that's one of the issues I'm coming up against with adapting Twenty Seventeen.

I recently watched a course on SMACSS by Jonathan Snook, and one wise piece of advice he gave about organising CSS is that if you're ever having to reset a rule then you should treat that as a bad smell.

There's lots of CSS in Twenty Seventeen that I'm having to fight in this way. Big long selectors involving multiple classes, not() directives and setting things like colours globally on hover states. It's leading to lots of headaches. Don't get me wrong, Twenty Seventeen is a good, well written theme, but I find it interesting that the problem of organisation and extensibility of CSS isn't solved yet, even on high profile projects like the default WordPress theme. And please nobody mention BEM, looking at that syntax makes my eyes bleed. It's like a useless version of Hungarian notation for CSS.

The Journey Continues

I realise that I haven't covered much here and there's a lot of opinion in this post, but as I continue to develop this child theme I'll share any problems I come up against, and my solutions, in case it helps anyone else. The CSS problem though is one that I think I could only solve by rewriting large sections of the theme, and even then I'd probably end up in a similar situation!