How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)

logo How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)twenty-seventeen-wordpress-theme-1024x425 How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)

Another year, another official theme released by WordPress, this time of course it is Twenty Seventeen. For last year’s theme Twenty Sixteen, we did a comprehensive guide that showed you how to master it, or any theme.

With the things that have changed in the last year in WordPress, it seems like perfect timing to make another one on the Twenty Seventeen theme.

If you want to use this guide to set up a good looking version of the Twenty Seventeen theme on your live website, I would recommend using a (local) development version of WordPress, or a staged version of your site first.

So head over to the appropriate installation of WordPress, search for the theme and install it.

In this tutorial, we will cover three different ways of changing the way your site looks and we’ll separate them into three different difficulty categories:

  • Making the most of the WP customizer and some of the options of the theme. – Beginner
  • Changing a few parts of the design with basic CSS – Intermediate/Savvy beginner
  • Making a child theme and adding some useful functionality. Also making bigger changes to the design. – Intermediate

Beginner

Before we go into the advanced steps of messing around with our own code and the page templates of the theme itself, let’s take a look at the out of the box functionality.

Right now, my demo website looks like this. All I’ve done is install the theme, not bad, right?

twentyseventeenoutofthebox How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)

Getting Familiar With The New Customizer

First things first, let’s head over to the customizer by clicking the customize link in the top left of our admin bar.

customizer How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)

A few things have changed with the last few updates of the customizer. My favorite update in the most recent update (4.7 at the time of writing) is that there are clickable links next to all editable elements in the preview, that will take you where you need to go to edit that very element.

For example if I click the pencil button next to the headline, it immediately takes me to the customization menu for “Site Identity”, the appropriate section.

customizersitetitle How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)

Another handy update is there is now a live preview of any changes you make. Instead of constantly having to make small changes and then click preview after each one, you can now edit on the spot.

Changing or Removing The Header Image Or Using a Header Video

Out of the box, Twenty Seventeen looks a lot better than the themes of previous years. But there is one big problem. You can’t have the same header image as thousands of other websites.

Thankfully changing is as easy as pie. Simply click the edit this element pencil button in the top left corner, or shift click while hovering the header image.

This takes us to the header media section.

customizerheadermedia How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)

If you want to remove the header image, simply click hide image.

This leaves the theme looking like a bare bones blogging theme.

noheadertheme How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)

If you want to use your own header image, make sure that you use a HD one with similar dimensions. The theme advises that you use a 2000 x 1200 dimension image for your header.

There are a number of sites out there where you can find free stock photos. One of the best for HD images that are suitable for header image is Unsplash.com.

I scrolled through the top images at the moment, downloaded my favorite and cropped it to the recommended dimensions.

Then I simply clicked “add image” and uploaded it. My website then looked like this:

newheaderimage How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)

Same as the original look just different image.

However, if you upload a header image with different dimensions, your website won’t end up looking as good.

Because it is a hero image style header that resizes the image to make it full screen on computers, it stretches images of wrong dimensions and makes them look grainy.

Video Header

With the 4.7 update, WordPress now supports video headers. Adding one is as easy as copying and pasting a youtube URL or uploading a video (not recommended due to the server load of hosting your own video).

If you want to show a header video instead of an image: Click to hide the header image, and then enter the Youtube url of the video, and press enter.

Voila you now have a video header:

headervideo How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)

Custom Colors

Unfortunately the custom color options for the Twenty Seventeen theme are quite limited. All you can do is select either the standard light theme, or the dark theme and edit text colors.

If you select custom, you can choose a different color scheme for the text on your site, but it doesn’t let you choose background.

Of course, this is not really a problem for those of you willing to get your hands dirty with some CSS.

Intermediate

At this point, it helps if you are already quite familiar with WordPress, and know a thing or two about HTML and CSS. If you don’t, not to worry, all you really need is a willingness to learn and some patience.

CSS Only Changes

Another welcome addition that came in the big 4.7 patch, is the ability to add custom CSS directly in the customizer.

This means that you no longer need to use a plugin for this functionality. It also means that you get to see the effects of your changes in real time, making it easier to notice mistakes.

If you are not familiar with HTML and CSS at all, you might want to study up a bit. I recommend you read a few articles, or start messing around with Code Academy’s completely free course on HTML & CSS.

If you do know the very basics, you can follow along as it is.

How To Find The Right CSS Selector And Other Basics

Before you can make any changes to the CSS, you have to understand how to correctly target a html element with CSS.

If you are in Google Chrome, it already comes with Google Developer tools, and you don’t need to install any addons. If you are using FireFox, you would want to install Firebug or a similar plugin.

All you have to do is open up your website. Then, highlight, or hover over, the relevant part of your site. Finally, right click and select inspect.

inspectelement1 How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)

This opens up a tab below the website that shows the relevant line of source code. For example, if I inspect the headline of one of the widgets, this pops up.

inspectelement2 How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)

I can easily see that the CSS class is: widget-title.

There is also a box next to it that shows the CSS that is already applied to it.This is important, because when you work with custom CSS or child themes, you have to overwrite a lot of styles to get the look you desire.

This means two things; first of all, you have to be at least as specific as the original CSS is.

In this example, the CSS is targeting the element using h2.widget-title, so if I just use h2, or widget-title the original CSS will be more specific and the CSS won’t be applied like I want to the element I want.

Also you have to overwrite lines of CSS you don’t want. For example, if there is a left margin, but you want a right margin, you cannot simply add a right margin. You need to overwrite the left margin by adding :

margin-left: 0;

first.

Media Queries

Another important thing to look for is something called media queries. They are the lines of code that make themes “responsive” or “mobile-friendly” in CSS. Media queries in WordPress themes are usually used to set different width break points to apply unique styles to different devices.

So because I’m inspecting the element while the browser window is a certain width, those are the styles I see in the browser.

In this case a width over 48em.

 @media screen and (min-width: 48em)  h2.widget-title {  font-size: 11px;  font-size: 0.6875rem;  margin-bottom: 2em;  } 

There are also other media queries with different styles “hidden” for you to find if you scroll down the tab.

It’s important to work with media quieries correctly, or your site will not look good across all devices.
Now that we’ve covered some of the basics of working with CSS and WordPress, it’s time that we get on with a few experimental changes.

Adding A Background Image

Before we add a background image, you should adjust the color scheme to the colors of your picture. The picture I chose has relatively dark colors, so I chose the dark color scheme for bright text.

darkcolorscheme How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)

Then you simply add these few lines of code with the URL for the picture that you want to use to the additional CSS section of the customizer.

 .site-content {  background-image: url("REPLACE WITH THE URL OF YOUR IMAGE");  background-repeat: no-repeat;  background-attachment: fixed;  } 

additionalcss How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)

This way of adding a background image stops the image from repeating. It also fits it to the screen of the browser used to see the site.

All of a sudden, the website should look something like this:

backgroundimage How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)

If you want to, it’s also possible to add an opaque layer on top of the background image for better readability. You can do this by targeting the wrap layer, and adding an opaque rgba background color. (The first 3 numbers determine the color, the last number how solid the color is. 0 is invisible, 1 is 100% solid.)

.wrap { background-color: rgba( 0, 0, 0, 0.4)  }

After you have done that, it should look like this:

backgroundimageopaque How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)

Styling The Sidebar

We can also for example style up the sidebar a little bit.

If I want to apply changes to the entire sidebar, I use the .widget-area selector.

I could for example add a background color to the sidebar area.

 .widget-area {  background-color: #4859f1;  } 

That looks like this.

backgroundcolorsidebar How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)

Not the most amazing change, but you get the point.
I can also target specifically the widget titles and give them another background color.

h2.widget-title { background-color: #fff; }

That looks like this:

backgroundcolorwidgettitle How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)

We can also do something as simple as just increasing the padding or adding a margin between the widgets, by targeting the .widget elements.

.widget { padding-bottom: 6em; }  

sidebarmorepadding How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)

Or I can remove the padding completely, move the background color to only affect the individual widgets, and make it a margin instead.

.widget-area {}
h2.widget-title { background-color: #fff; } .widget { background-color: #4859f1; padding-bottom: 0; margin-bottom: 3em; }

That looks like this.

finalsidebarstyling How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)

This should give you an idea of the many very basic ways in which you can style your sidebar with CSS.

Now let’s tackle slightly bigger project together, moving the sidebar with CSS.

How To Move The Sidebar To The Left

In the Twenty Seventeen WordPress theme, the sidebar is on the right. With CSS, we can easily move the sidebar to the left, and the main content to the right.

In this case it’s important to target the correct media query. Here it’s min-width: 48em.
All we need to do is switch the floats around from the #primary and #secondary ids.

  @media screen and (min-width: 48em) {  .has-sidebar #secondary {  float: left;  }  .has-sidebar #primary {  float: right;  }  .has-sidebar:not(.error404) #primary {  float: right;  }  }  

And all of a sudden the sidebar is on the left! Almost like magic.

sidebarleft How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)

(If you use the wrong media query here, it will mess up how the website looks on certain devices. )

Working With A Child Theme

This is the part of the guide that might be slightly challenging for a complete beginner even if you are willing to learn.

If you are just starting out, be patient and explore things you don’t understand by yourself.

To create a child theme all you need to do is head over to the wp-content/themes folder. (If you are using a local development environment, you can just use explorer to do this, if you are using a staging server, you need to do this in a file manager or FTP client.)

Then create a new folder called twentyseventeen-child. Inside it, create a new file named style.css. (Make sure the file type is .css, that you don’t save it as style.css.txt If you use notepad, write file name: style.css, and save as type: all files.)

Then copy and paste this text into it and fill in relevant information as you go along.

 /*  Theme Name: Twenty Seventeen Child Theme  Theme URI: https://yourwebsite.com  Author: Your Name  Author URI: https://yourwebsite.com  Template: twentyseventeen  Description: Child theme for Twenty Seventeen.  Version: 0.1  License: GNU General Public License v2 or later  License URI: http://www.gnu.org/licenses/gpl-2.0.html  Tags:  Text Domain: twentyseventeen-child  */ 

Now create a functions.php file in the same folder with this code:

 <?php  add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );  function theme_enqueue_styles() {  wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );  }  

After doing this, head over to the WordPress admin under Appearance/Themes, and you should be able to see your child theme.

twentyseventeenchildtheme How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)

Go ahead and activate the child theme.

How To Create A Full Width Page Template

One thing that is maybe not appealing to everyone about twenty seventeen, is the design of their pages. The title alone takes up about 30% of screen on the side. With the margins on each side, there’s not that much space left for content, especially a combination of visual and text.

So we’re quickly going to create a full width template.

The first thing you need to do, is head over into your twentyseventeen theme folder, and copy the “page.php” file. Then paste it into your child theme folder. Finally rename it “page-full-width.php” and save the file.

Your child theme folder should now look like this:
Now all you need to do is open up your “page-full-width.php” file in an editor.

Change the line that says

* The template for displaying all pages

To

* Template Name: Full Width

Then all you need to do is add the class “page-full-width” to the wrap driv.

<div class="wrap page-full-width">

If you go to create a new page now, you should be able to select Full Width as a template.

Create a page using the Full Width template so that you can refresh and see if the changes you make to the CSS are working.

Take a look, right now it should still look like a standard page.

First we need to set the width of the header and content to 100%.

Because of the way the CSS is written, we need to be very specific, so you should select the html elements on the full width pages like this.

body.page-template-page-full-width #primary .page-full-width 

Then you simply set the width to 100% for both the entry-header and entry-content for the min 48em query.

The code should look like this:

@media screen and (min-width: 48em) { body.page-template-page-full-width .page-full-width #primary .entry-content { width: 100%; }  body.page-template-page-full-width .page-full-width #primary .entry-header { width: 100%; } }

If you look at your page now, it should show the header above 100% width content.

fullwidthpage How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)

Another thing you might want to do is increase the size of the header for your full width template. Again you have to be very specific with the CSS, I target the element like this,

body.page-template-page-full-width #primary .entry-header .entry-title

and I set a px font size and a rem font size like in the parent theme.

I set two separate ones, one for computer screens (above 48em) and one for all other screens.

body.page-template-page-full-width #primary .entry-header .entry-title { font-size: 3rem; font-size: 48px; }  @media screen and (min-width: 48em) { body.page-template-page-full-width #primary .entry-header .entry-title { font-size: 5rem; font-size: 80px; } }

Make sure to include this in the media query that is there already.

The final code should look like this.


body.page-template-page-full-width #primary .entry-header .entry-title {
font-size: 3rem;
font-size: 48px;
}

@media screen and (min-width: 48em) { body.page-template-page-full-width #primary .page-full-width .entry-content { width: 100%; }  body.page-template-page-full-width #primary .page-full-width .entry-header { width: 100%; }  body.page-template-page-full-width #primary .entry-header .entry-title { font-size: 5rem; font-size: 80px; } }

And the final result should look like this:

fullwidthpagefinal How To Master Twenty Seventeen (Or Any WordPress Theme in 2017)

This is just an easy example how you can create your own templates with designs that differ hugely from the original page designs of the theme.

It can be very useful for setting up landing pages or other content focused pages.

Further Learning:

Another year, still a lot to learn! There are a lot of things you can do with child themes, way too much to cover in just one post. So below I’ve listed some good resources that will help you get going in the right direction.

Conclusion

I hope you enjoyed this second installment of “How to Master … theme”. Even if you knew nothing about code or editing themes before reading this tutorial, I hope you are more familiar with the Twenty Seventeen Theme now. I also hope that you learned some general WordPress skills that you can use to work with other themes in the future.

Is there anything related to theme development or WordPress in general you’d like to learn more about? Let us know in the comments!

To show main source of content:
https://www.designbombs.com/master-twenty-seventeen-wordpress-theme/

%d bloggers like this: