This post is inspired from Personnaliser Twenty Seventeen – astuces, bouts de code et extensions, which was first published on July 20, 2017 on Tout sur WordPress (All about WordPress).

When I wrote this post, I was far from thinking that I’ll have thousands of readers and that I’ll have dozens of comments – only for French edition.

Sure, Twenty Seventeen is WordPress default theme for over a year 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-aero.org

Sarus humanitarian aerospace website

Sarus humanitarian aerospace website

personligkraftutveckling.se

personlig kraft & utveckling

personlig kraft & utveckling

forumeficienciaenergetica.com.br

forum eficiencia energetica website

forum eficiencia energetica website

dein-nhwerk.de

dein Nähwerk website

dein Nähwerk website

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 those plugins are untested with your version of WordPress, they’ll work fine, I tested with WordPress 4.9.4 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 themeforest platform 😉

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.

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…

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:

Disallow sticky menu

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

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:

Center log, title and tagline

Resize logo

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

Equalize / resize the width of the footer areas

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

Or, you can play with in a tiled way:

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.

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:

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 :

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

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:

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

If you want pages with sidebar and pages without sidebar, change the file name from page.php  to page-with-sidebard.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!

 

Categories: Themes

Leave a Reply

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

Comment moderation is enabled. Your comment may take some time to appear.

%d bloggers like this: