Update: We just published an comprehensive guide on How To Master Twenty Seventeen (Or Any WordPress Theme in 2017).

In this post we look at how to bend the twenty sixteen theme to your will, both inside and outside the admin area and customizer.

If you’re new to WordPress, working with a well documented theme like Twenty Sixteen or any of the other official WordPress themes, can really help your learning curve.

In this tutorial, we will cover three different areas to learn to master, and we’ll separate them into three different difficulty categories.

  • Learning to use the WP customizer and some of the options of the theme. – Beginner
  • Changing a few design things with basic CSS using a custom CSS plugin. – Intermediate/Savvy beginner
  • Making a child theme and adding some useful functionality. – Savvy Intermediate

Beginner

Let’s start from the beginner level. We will make some changes to the look of the site, and make use of some of the cool functionality that comes with the twenty sixteen theme.

Setting Up A Social Menu

The Twenty Sixteen comes with a sleek social menu included, that automatically shows icons for each social network instead of text.

To make use of this menu, head over to appearance > menus, and create a new menu called ‘Social Menu’ or whatever other name you might want it to have.

creating a social menu in the Twenty Sixteen WordPress Theme

Then fill it with custom links to your different social media pages. Make sure that you write the social network names out correctly, because if you don’t, the link will be shown as just a general icon, not the specific icon for that particular social network. If you write ‘Google plus’ instead of ‘Google+’, that also happens.

Social menu settings Twenty Sixteen WordPress Theme

Once you’ve finished adding your custom links, and written in the text correctly, set the location of your menu to ‘Social Menu’ and it will show up in the footer of the page.

Make Twenty Sixteen Your Own With Customizer + A Few Lines Of Basic CSS

social links menu in footer Twenty Sixteen WordPress Theme

Using The Customizer

Now that our social menu is up and running, it’s time to familiarize us with the customizer. The WordPress customizer is where you can change things in the design of different themes. Some themes allow you to customize everything, some themes just allow the bare minimum. Twenty Sixteen is not the most customizable theme ever, but you do have some nice options that you might want to explore. Head over to appearance -> customize.

If we want to set up a background image we can.

setting up a background image in the Twenty Sixteen WordPress Theme

We can set our color scheme to dark, that looks like this:

changing the color scheme image in the Twenty Sixteen WordPress Theme

Or you might want to set a header image instead, that would look like this:

header image in image in the Twenty Sixteen WordPress Theme

Intermediate/Savvy Beginner: Changes With CSS

This is where we start to really gain a lot of control over how our website looks. Don’t worry. Even if you know nothing about CSS or HTML, I’ll show you how to use a Custom CSS plugin to make easy changes without having to mess with child themes or the source code of the theme.

How To Make Twenty Sixteen Opaque/Transparent On Top Of A Beautiful Background Image

opaque background on image image in the Twenty Sixteen WordPress Theme

I’m sure you’ve seen websites that are made from transparent elements on top of a background image. With Twenty Sixteen, we can do most of the ‘hard work’ easily from within the customizer, and we only need to add one single line of custom CSS to complete the design.

Let’s start by adding a suitable background image for this. (A good place to find large, high resolution images perfect for this kind of thing, for free, is Unsplash.com. I used this image for this tutorial.)

Once you’ve decided on a picture and uploaded it, make sure you set the ‘Background Attachment’ setting to fixed. This gives the image a fixed position, meaning that it doesn’t move when you scroll, the page content will scroll on top of the fixed image.

Note that this will stretch the image to fit the screen, so you should use a high resolution image for this.

After you’ve done this, head over to the colors section of the customizer, and select the Scheme ‘dark’. Dark elements usually look better when made opaque on top of a background image, in my opinion. (Although it depends on the image you choose and your preference.) I’ve shown how to do this above in the beginner section on the customizer.

Right now it still doesn’t look like much right? But that’s about to change with one single line of CSS. If you already have Jetpack, then go to appearance -> CSS. If you don’t have Jetpack and don’t want to use it, you can install the simple custom css plugin.

Head over to appearance > CSS/Custom CSS and then add this tiny css snippet to make the main part of your site opaque.

.site {
opacity: 0.8;
}

That makes the site look like this.

Opaque Twenty Sixteen

Around 0.8 is enough, because it makes the text opaque too, and any more than that makes it hard to read. 0.2 looks like this.

too opaque Twenty Sixteen

If you want a more opaque container, but you want to maintain readability you can instead make only the background opaque by using this snippet.

.site {
background-color: rgba(38, 38, 38, 0.3);
}

opaque background on image image in the Twenty Sixteen WordPress Theme

This targets only the background color of the main site element, so you can go all the way down to 0.3 and 0.2 without making the text unreadable. If you choose a picture with very few colors in the content area, you can even set the opacity to 0, which makes the background 100% transparent.

transparent background Twenty Sixteen WordPress Theme

If you want to go for this kind of design, one thing to note is that, as you can see, the background image is what really carries the look. So, spending some time on finding the right one for your website/topic is well worth it in the long run. If you want to go with completely transparent, finding an image with few colors (at least in the areas where text is placed) is important.

Moving The Sidebar To The Left

Because the sidebar and main content elements are positioned using CSS, we can easily move the sidebar to the right.

A tool that comes in extremely handy if we want to change the CSS of a website, is the google chrome inspect functionality. If we inspect the sidebar and content elements we see that their classes are sidebar and content-area.

This is what the content area should look like when inspected:

inspecting content area of Twenty sixteen

This is what the sidebar should look like when inspected:

inspecting sidebar of Twenty Sixteen

(If this confuses you, you should read more about using Chrome developer tools with WordPress here.

We also see that there are multiple styles applied in different media queries. (If you don’t know what a media query is, it’s basically a way to tell the browser to only apply certain styles depending on how big the screen/browser window is.)

In this case, we can see that the positioning styles are applied at the 56.875em minimum width breakpoint.

The code that we need to change is this:

@media screen and (min-width: 56.875em)
.sidebar {
float: left;
margin-left: 75%;
padding: 0;
width: 25%;
}
.content-area {
float: left;
margin-right: -100%;
width: 70%;
}

We just need to switch the lefts with rights, and overrule existing margins, and we have moved the content to the right, and the sidebar to the left.

@media screen and (min-width: 56.875em) {
.sidebar {
float: left;
margin-right: 75%;
margin-left: 0;
}

.content-area {
float: right;
margin-right: 0;
margin-left: -100%;

}
}
Enter this piece of code into the Custom CSS under appearance, save it, then update your site, and you should see the sidebar on the left, and content area on the right, like this:

opaque left sidebar Twenty Sixteen WordPress Theme

If you don’t overrule the existing margins, WordPress will still pull them from the original style file, and it will mess up the positioning of your content and sidebar.

Also, if you don’t include the @media query, you will overrule location placement for other screen sizes, and will mess up what the page looks like on phones/tablets.

If you don’t add the media query, the page will look like this on small screens:

left sidebar unresponsive Twenty sixteen

Instead of like this:

left sidebar responsive Twenty Sixteen

Styling The Sidebar

If you want to style the sidebar, you have a few different areas to target. Again, the Chrome developer tool inspect is our best friend. If we inspect the different things in the sidebar area, we find a few different elements that we can target.

.sidebar {

}

If we want, we can set a unique background color for the sidebar to make it stand out, although it doesn’t go that well with the default theme design.

background-color: #ccc;

.widget {

}

Here we can change margins/padding or fonts for the widget.

.widget-title {

}

In the widget title, one of the things we can do, is set a background color and change the alignment of the text to center.

background-color: #ccc;
line-height: 2em;
text-align: center;

That will look like this:

styling widget titles Twenty Sixteen

We might want to remove the border above each title and let the title with the new background color be act as the separator. We can do this by adding:

border-top: 0;

To the .widget selector, to override the default style. Which will look like this:

styling widget titles with no top border for widgets in Twenty Sixteen

I’ll be the first to admit that this doesn’t look much different/better from the original in this instance, but depending on the color scheme you go with, it is a nice option to be aware of.

Intermediate: Some Ideas For Things To Do With A Twenty Sixteen Child Theme

A child theme is something that we can use to not only create a design that’s completely our own, but we can add extra functionality that we might need for our particular website. Here I’ll cover quickly how to set up a child theme for twenty sixteen, and a few options you have for customizing.

How To Set Up And Use A Child Theme For Twenty Sixteen

Setting up a child theme is super easy, and a better way to make significant changes than to simply edit files through the editor.

Create a folder called twentysixteen-child.

Then you just need to create a style.css file with this code (or you can copy paste this from the Twentysixteen style.css file, and add this line: “Template: twentysixteen”):

/*
Theme Name: Twenty Sixteen Child Theme
Theme URI: https://yourwebsite.com
Author: Your Name
Author URI: https://yourwebsite.com
Template: twentysixteen
Description: Child theme for Twenty Sixteen. Twenty Sixteen is a modernized take on an ever-popular WordPress layout — the horizontal masthead with an optional right sidebar that works perfectly for blogs and websites. It has custom color options with beautiful default color schemes, a harmonious fluid grid using a mobile-first approach, and impeccable polish in every detail. Twenty Sixteen will make your WordPress look beautiful everywhere.
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: black, blue, gray, red, white, yellow, dark, light, one-column, two-columns, right-sidebar, fixed-layout, responsive-layout, accessibility-ready, custom-background, custom-colors, custom-header, custom-menu, editor-style, featured-images, flexible-header, microformats, post-formats, rtl-language-support, sticky-post, threaded-comments, translation-ready
Text Domain: twentysixteen-child

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you’ve learned with others.
*/

And a functions.php file 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 adding these two files to a folder, you can zip the file, upload it and unzip the folder to wp-content/themes/ with ftp. (I wholeheartedly recommend setting up a local development environment though.) After you do this (or if you’ve put it inside the theme folder of your local WordPress install), head over to appearance -> themes, and you should see the Twenty Sixteen Child Theme pop up as an option:

twenty sixteen child theme

When using a child theme, it’s always a good idea to keep the styles in the child theme, as you have full control over it anyway, rather than keeping it in a custom css plugin. So take the styles from the appearance -> custom css section and copy them into the style.css file in your child theme. Then delete the custom css styles from the plugin.

A thing to note is that if you want to transfer over your styles, the customizer will override the changes you make to the background colors or fonts in the theme if you set your color scheme to anything other than default. For example, we set it to dark before when we were using the Custom CSS plugin for our styles right. If you did that, if you take a look at your site now it should just look like the color scheme dark, without transparency at all.

broken transparency child theme Twenty Sixteen

This means that if we want the opaque background, we need to head over to the customizer again, and set the color scheme to default. This lets us set our rgba colors for our site, but it makes our site look like this because all the font colors are back to default.

Twenty Sixteen Child Theme transparency problems

So now we need to get to work using the chrome inspect tool, and writing some simple css. For example if we want the opaque or transparent background and white text, we need to change the font colors to white or lighter colors manually in our child theme’s style.css file. Once you’re finished (depending on your color choices), your site might look like this.

childthemetransparentfixed

To achieve this look, I styled these elements:
body, button, input, select, textarea {
color: #fff;
}

a {
color: #b3ffff;
}

.site-branding .site-title a {
color: #66b2ff;
}

.site-description {
color: #ccc;
}

.entry-footer a {
color: #ccc;
}

.entry-title a{
color: #66b2ff;

}

.main-navigation .primary-menu > li a{
color: #b3ffff;
}

.widget {
border-color: #fff;
}

Using The Header Image To Send Visitors To A Landing Page

Back inside the customizer, we can set a header image for our site. Because the header image links to the home url by default, we can easily set up the header image to, for example, lead to a landing page instead.

You might for example set your header image to a banner with a special offer, like this:

header image with special offer Twenty Sixteen WordPress Theme

Then we can copy the header.php file into our child theme folder.

Then we open it up, and all we need to do is to add ‘landing'(or whatever slug your landing page has) to this line of code after the /, inside the single quote.

<a href="<?php echo esc_url( home_url( '/landing' ) ); ?>" rel="home">

If you want to link to an external url, then you can change the line of code to:

<a href="http://othersite.com/landingpage">

However, if you want to use a landing page on your own site, there is one issue. If we click through to the landing page, the ad/special offer header is still there.

You might not want this, so we will wrap the whole header section with an if !is_page(‘landing’) : statement. (The ! means not. So basically you are telling WordPress, if it’s not the landing page, display the header image.) The whole block should look like this:

<?php if ( !is_page('landing') ) : ?>
<?php if ( get_header_image() ) : ?>
<?php
/**
* Filter the default twentysixteen custom header sizes attribute.
*
* @since Twenty Sixteen 1.0
*
* @param string $custom_header_sizes sizes attribute
* for Custom Header. Default '(max-width: 709px) 85vw,
* (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px'.
*/
$custom_header_sizes = apply_filters( 'twentysixteen_custom_header_sizes', '(max-width: 709px) 85vw, (max-width: 909px) 81vw, (max-width: 1362px) 88vw, 1200px' );
?>

<!-- .header-image -->
<?php endif; // End header image check. ?>
<?php endif; // End page exclusion ?>

After you’ve done this, if you click through to your landing page, you should no longer see the header image.

landing page with no header in Twenty Sixteen WordPress Theme

Making A Full Width Landing Page Template

First we’re going to copy over the page.php file into our child theme, and rename it page-landing.php.

The first thing we’re going to do, is replace the comment that says “This is the template for all pages” with a line that says “Template Name: Landing” then we remove the <?php get_sidebar(); ?> function.

Now if you go to your landing page you should see that there is no sidebar showing, but your content is still only filling up 70% of the space. (If your slug is something other than yoursite.com/landing you might need to set the page template to landing.)

There are two ways to set the width to full, either we can inspect the landing page and find the page id in the body class (or see the id in the url when we edit the page), and use that to qualify our content-area element, or we can make our own special class for the element.

You can see that in my case, the page id is 82. So to change the width of the content area only on my landing page, I can write this:

.page-id-82 .content-area {
width: 100%;
}

Or you can set an extra class for the content-area element in the page-landing.php file like this:

<div id="primary" class="landing-content content-area">

And target it like this:

.landing-content {
width: 100%;
}

Either of these approaches should lead to a full-width content container, making it a truly full-width page.

fullwidthlandingpage

Further Learning:

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

Even if you knew nothing about code or editing themes before reading this tutorial, I hope you’ve gotten more familiar with the Twenty Sixteen Theme, and hopefully have learned some skills that you can use to work with other themes in the future.

Is there anything related to theme development 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-sixteen-wordpress-theme/