1602 words - Reading time: 7 mn
Twenty Seventeen is WordPress most universal default theme: it can be used for blogs, magazines, corporate sites… and it's mobile first and lightweight. Few options in its standard version, but there's a lot of possible customizations, so you can make it unique. Let's see how.

This post is inspired from La Bible de Twenty Seventeen, which was first published on July 20, 2017 on Tout sur WordPress (All about WordPress) and rewrote on January 6, 2019.

When I wrote the original post, I was far from thinking that I’ll have thousands of readers and that I’ll have more than one hundred comments for French first edition (there are no more comments as I rewrote the post and included interesting comments in the post itself).

Sure, Twenty Seventeen has been WordPress default theme for over two years and has more than one million active installations. So why sould you use it?

Ok, it’s the default theme, but it’s not just a default theme. Unlike previous ones, it’s no longer blog oriented, even if it makes sense to use it for a blog.

In fact, Twenty Seventeen is the first multi purpose default theme WordPress offered us. Singers, musicians, town halls, companies use it for their websites.

So let me show you some…

Examples of use of Twenty Seventeen

Leïla Huissoud is a French songwriter performer. Here is her one page website:

Leïla Huissoud website
Leïla Huissoud website

There’s also a guitarist and composer, Laurent Boutros, who dressed his website with Twenty Seventeen, more exactly with a child theme I put online.

Laurent Boutros website
Laurent Boutros website

A Korean and Japanese specialties restaurant, Matsuba, used this theme too:

Matsuba website
Matsuba website

Here are some other websites using Twenty Seventeen :

Sarus humanitarian aerospace website
Sarus humanitarian aerospace website

sarus-aero.org

personligkraftutveckling.se

personlig kraft & utveckling
personlig kraft & utveckling

forumeficienciaenergetica.com.br

forum eficiencia energetica website
forum eficiencia energetica website

dein-nhwerk.de

You should find more, those are websites I found surfing the net or from comments in the original post.

Now that I’ve shown you some sites, let’s see…

How to customize Twenty Seventeen

The WordPress Codex dedicated page is a good start if you never used Twenty Seventeen Theme. Even though this page is about basic settings, not strictly speaking about customization, all you need to know about the theme itself is there.

In fact, there’s not a single way to customize it, there are many ways you can do it. First of all, and simpliest one:

Twenty Seventeen Child Themes

Dynamic Seventeen

The most interesting feature of this theme is the dynamic page template: using it, you can create a page with its own dedicated menu.

Delect

This child theme  with a wider layout than the parent’s one allows advanced colors settings and a customized copyright. That’s all, as far as I saw.

There’s also a pro version ($19) for this theme, with more features as two additional masonry styled layouts for your blog archives, four pages templates, advanced styling options, 20 sidebars positions…

Minimal 20/17

As the author says:

It removes the excessive padding from its parent and introduces a wider layout and better spacing. It also supports page builders and has two new page templates.

Winter Solstice

The header menu is right aligned and the arrow you can see on original theme on frontpage menu has been removed.

As you can see, child themes don’t change massively the user experience. If you want a fully customized theme, you’ll have to go further.

Another easy and complementary way to customize your theme is thru…

Twenty Seventeen dedicated plugins

Even if one of those plugins is not certified for WordPress last version, they’ll both work fine, I tested them with the latest version installed, without any bug or problem.

Advanced Twenty Seventeen

Once activated, the plugin will ask you for a child theme. As you probably know, there’s a bad idea to modify an original theme: all changes will be lost at first upgrade. So: if you have to make changes to your theme, you should create a child theme.

Advanced Twenty Seventeen Plugin warnings
Advanced Twenty Seventeen Plugin warnings

And of course, the plugin creator promote his own premium themes, sold on [eafl id=”1230″ name=”Themeforest WordPress Themes” text=”themeforest”] platform “if Twenty Seventeen does not meet your requirements” – as if such a thing were possible 😉

Anyway, this plugin allows tons of changes: typography (Google fonts, font size and color…), menu position (left / right / center) and background, layout (boxed / full width), footer background, copyright and many other settings.

Advanced Twenty Seventeen

Advanced Twenty Seventeen

Customize style of the Twenty Seventeen theme completely

saturnplugins

Customize Twenty Seventeen

Compared to the previous one, this plugin is very simplistic, you’ll find all options in a single tab of your WordPress customizer. It’s up to you to see which one is best for you.

Using Customize Twenty Seventeen you can customize some settings of your WordPress theme, mainly typography (you can choose different Google fonts for body, title, headings and menus) and menu position. It may be enough for you…

Customize Twenty Seventeen

Customize Twenty Seventeen

Customize Twenty Seventeen theme – add Google Fonts, use new templates and get other options to easily customize your site.

BoldThemes

Right now, your theme is not anymore the default WordPress theme you activated a few minutes ago.

And there’s a lot of changes you can still perform, using…

CSS code to customize Twenty Seventeen

For each CSS tip below, just copy / paste the code in style.css  of you child theme or in additionnal CSS in Customizer if you don’t use or need a child theme.

Sticky menu, even in mobile version

You want that the main menu always stays on top, paste this:

@media screen and (max-width: 767px) {
  .navigation-top {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
  }

  /* if you show the WordPress admin bar on website */
  .admin-bar .navigation-top {
    padding-top: 45px;
  }
}

Disallow sticky menu

If you dont’t want of a sticky menu, just add those lines:

.site-navigation-fixed.navigation-top {
  position: relative;
}

Resize the sidebar

Default sidebar is 36% wide (and 58% for main content); if you want to change those values, you can do it this way:

@media screen and (min-width: 48em) {
  .has-sidebar:not(.error404) #primary {
    width: 65%;
  }
  .has-sidebar #secondary {
    width: 31%;
  }
}

Center log, title and tagline

#masthead .wrap {
  text-align: center;
}

Resize logo

Default size is 350x80px. You can play with max-height and max-width to adjust the size.

@media screen and (min-width: 48em) {
  .custom-logo-link img {
  max-width: 700px;
  max-height: 160px;
  }
}

Equalize / resize the width of the footer areas

Widgets areas are inverse of main content: instead of 58/36%, they are 36/58%.

/* largeur identique */
@media screen and (min-width: 48em) {
  .site-footer .widget-column.footer-widget-1, 
  .site-footer .widget-column.footer-widget-2, 
  .social-navigation, .site-info {
    width: 47%;
  }
}

Or, you can play with in a tiled way:

@media screen and (min-width: 48em) {
  .site-footer .widget-column.footer-widget-1 {
    width: 31%;
  }
  .site-footer .widget-column.footer-widget-2 {
    width: 65%;
  }
  .social-navigation {
    width: 65%;
  }
  .site-info {
    width: 31%;
  }
}

Modify the width of pages and posts

The default maximum width is 740 pixels for pages and posts without sidebar, 1.000 pixels for posts with sidebar. Want to allocate more space to your content? Fill in the width  and max-width  properties with the value of your choice, in em, in pixels or in percentage, adjust the columns width and the internal margins using the padding  CSS property.

@media screen and (min-width: 48em) {
  .wrap {
    max-width: 1280px;
    padding-left: 3em;
    padding-right: 3em;
  }

 /* for pages / posts with sidebar */

  #primary {
    width: 70% !important;
  }

  .has-sidebar #secondary {
    width: 26% !important;
  }

  /* for pages / posts without sidebar */

  .single-post:not(.has-sidebar) #primary, 
  .page.page-one-column:not(.twentyseventeen-front-page) #primary, 
  .archive.page-one-column:not(.has-sidebar) .page-header, 
  .archive.page-one-column:not(.has-sidebar) #primary {
    width: 100% !important;
    max-width: 1280px;
  }
}

The above code snippets help customizing Twenty Seventeen, but there is still another way to customize it, it’s…

PHP code to customize Twenty Seventeen

The following functions are directly related to the theme, so you will save them in the functions.php  file of your child theme.

Add sections to the frontpage

You want more than 4 sections? Add this code:

function tsct_front_page_sections() {
    return 5; // allocate sections
}
add_filter( 'twentyseventeen_front_page_sections', 'tsct_front_page_sections' );

Change credits in footer

You may want to display your own credits instead of the default “Proudly powered by WordPress”. First, add this code in functions.php:

add_action('action_site_info', 'tsct_siteInfo');

function tsct_siteInfo() {
  $theme = wp_get_theme();
  $usr = get_userdata( 1 ); // id de l'administrateur du site
  echo '2017 - ' . get_bloginfo ( 'name' ) . ' ' . 
       '(Fièrement propulsé par <a href="' . esc_url( __( 'https://wordpress.org/', 'twentyseventeen' ) ) . '" target="_blank" rel="noopener">WordPress</a>)' .
       '<br />Design <a href="' . esc_html( $theme->get( 'AuthorURI' ) ) . '"  target="_blank" rel="noopener">' . esc_html( $theme->get( 'Author' ) ) . '</a> - Contenu  ' . $usr->user_nicename . ' ' .
       '(<a href="mailto:'. $usr->user_email .'" target="_top">Contact</a>)';
}

This done, create an empty template-parts/footer/site-info.php file in your child theme. Open it and copy this code inside:

<?php
/**
 * Displays footer site info
 *
 * @package WordPress
 * @subpackage Twenty_Seventeen
 * @since 1.0
 * @version 1.0
 */

?>
<div class="site-info"><?php do_action('action_site_info');?></div>
<!-- .site-info -->

Add sidebar to pages

Twenty Seventeen don’t allow sidebars for pages, just for posts. If you need them, you’ll have to add this code in functions.php:

function tsct_body_classes_child( $classes ){
if ( is_active_sidebar( 'sidebar-1' ) &&  is_page() ) {
        $classes[] = 'has-sidebar';
    }
    return $classes;
}
add_filter( 'body_class', 'tsct_body_classes_child' );

Copy page.php from Twenty Seventeen to your child theme. Edit the file and add this code between </div><!-- #primary --> and </div><!-- .wrap -->:

<?php get_sidebar(); ?>

If you want pages with sidebar and pages without sidebar, change the file name from page.php to page-with-sidebar.php and change * The template for displaying all pages by * Template Name: With Sidebar inside the file.

The end

That’s all folks! Now it’s up to you, you have all you need to customize Twenty Seventeen, no needs to buy a premium theme on themeforest or in some other shop 😉

You want more? Ask in comments, I’ll answer you as soon as possible!

Leave a comment

Leave a Reply