Customising WordPress Theme Twenty Seventeen

Every year, WordPress comes out with a default WordPress theme. This year 2017, WordPress came out with – your guess is right – Twenty Seventeen.

This article is about how I customised WordPress theme Twenty Seventeen for my site amikvs.org. First, let me talk about a bit of what’s new with WordPress 2017. Immediately following that is my own customisation of WordPress Twenty Seventeen.

What’s New With 2017

The main feature of WordPress Twenty Seventeen is the use of a header video on the front page of your website. The featured image is immersive that it occupies the entire width of your screen (referred to as hero images).

WordPress 2017 focuses more on business sites. It features multiple sections on the front page which you can use to showcase your portfolio, featured items, etc. Twenty Seventeen works on any device.

This site – 2017.wordpress.net – shows an example of a site built with WordPress Twenty Seventeen.

Introducing Header Video

A video on the front page of your site is a good way to attract viewers because of motion. Use a header video that is related to your site or a product. Use subtle and soft music. Some viewers do not like loud sounds because they annoy them. With WordPress Twenty Seventeen, you have no problem with that because it mutes the audio.

WordPress Twenty Seventeen recommends a video size of 2000 x 1200 pixels. In order not to confuse you how is that set, most video editors have a default of 1080p, which means 1920 (width) x 1080 (height) pixels. If it is not the default, usually it is among the choices asked upon creating a new video, so just select 1080p. Settle on this size and you are already safe. Moreover, that’s the maximum dimension that YouTube can accommodate.

The header video is responsive that it covers the entire screen of any device or computer display. However, in order not to distort (video stretched ugly) its aspect ratio, the video produces pillar boxes, if the screen is too wide for its height, or letter boxes if the screen is too tall for its width. Pillar boxes are black vertical bars that appear on the sides of the video. Letter boxes are black horizontal bars that appear at the top and bottom of the video.

Most preferably, upload your video via YouTube and enter its URL in the customizer header settings rather than upload it natively on your site. Your video loads faster via YouTube compared to a video that you uploaded directly on your site. For now, WordPress 2017 accommodates only YouTube videos.

Native Video vs YouTube Video

The recommended video dimension is 2000 x 1200 pixels in order for the video to cover the entire with of the screen. YouTube accommodates only up to 1920 x 1080 (1080p). As a result, if you are going to use a video header via YouTube, your video header will show pillar boxes (black empty space on both sides of the video). Even if you tweak the YouTube URL by specifying the width and height to 2000 x 1200, the settings are ignored. In some cases, maximizing your browser to full screen may do the trick. However, you cannot expect all users to do that for you.

As a remedy, or to take advantage of a 2000 x 1200 video, you must upload it to your site via WordPress media library, however —

  • Your video must be less than 8 MB. This is the maximum size that WordPress can allow you to upload.
  • Your host server must be able to stream your video.
  • Not all bandwidths are created equal. Internet users with low bandwidth might not be able to see your video. I tried a 5 MB video but it couldn’t play. So keep your video as light as possible. The video used for the demo site 2017.wordpress.net  was only 3.9 MB and 17 seconds long.
  • Your video editor must allow a customized 2000 x 1200 aspect ratio settings if you want to adhere to this recommended size. iMovie, for example, cannot create a 2000 x 1200 video. However, a 1080p video is just good enough.
  • Adding an audio to your video makes it size heavier.

Keep Your Header Image Lightweight

If you do not like to use a video header on your front page, you have the option to use a header image. Likewise, WordPress Twenty Seventeen recommends a header image that is 2000 x 1200 pixels in dimension. This is to maintain the good quality of your image even if viewed on larger screens; however, limit the weight of your image to 300 kb or lower. Upload images that are exactly 2000 x 1200 pixels. It makes your images lightweight and saves space on your web host server. There are software, that you can download for free, to crop and resize images such as Fotor and PhotoScape for Mac and its native Preview; and for Windows, FastStone.

If you want to use multiple images for your header, give your photos a common character or attribute by using filters. For example, you can make all your header images all sepia or retro. Multiple header images are displayed randomly.

You can have both a video header and an image header so that while the video buffers, your viewer can see your image header. Otherwise, your viewer is going to see a blank black space before the video starts to load.

Header Image vs Featured Image

If your header image is enabled, and you used a featured image on your post, you will see a horizontal crop of your header image above the navigation menu; and below it, you will see your hero (featured) image full screen. With the two together, your page can look unappealing.

Either you disable your header image or not use a featured image. A featured image, however, is helpful especially when sharing your post on social media sites. If you disable your header image, your viewer will see a blank screen before your header video starts to load.


Customising WordPress Twenty Seventeen

The following sections assume you already know how to use WordPress at backend. For beginners, WPMU DEV has written a detailed tutorial on how to customise your site with WordPress theme 2017.

My Preferred Style

My preferred design is simple and minimalist. For my website, I want it to look neat and elegant. I don’t want clutter.  So, the first thing I would do is not to use the header media.

Disabling the Header Image

Disabling the Header Image is simply easy. Just go to WordPress’s built-in Customizer and head for the Header Media. In Customizer, click Hide Image.

Site Identity

I prefer to show my logo somewhere else instead of in the header. Since I have disabled the media header, my logo, site title and tagline won’t be showing.

For my site, I only uploaded my site icon. I have entered my site title and tagline (you should), but I opted not to display them.

If you prefer to use the theme’s options, you have the following choices whether to show or not the following on the home page of your website.

  • Title and tagline
  • Logo with the title and tagline
  • Logo only

Colour Scheme

Colours give your site a characteristic. Since I am aiming for minimalist and elegant look, I have chosen monochromatic colours. With the aid of W3 Schools monochromatic colour scheme online tool, I have picked this palette.

If you prefer, you can just pick from W3 School’s ready-made color palettes.

Once you have picked your colour theme, head to WordPress’s customizer and customize Colors. WordPress 2017 offers only three color scheme options: dark, light or custom. Choose Custom and move the slider to the hue nearest your colour theme. With custom you can see in the live preview the changes in text colours. 

Customise color scheme of WordPress 2017

Once you have picked your colour theme, head to WordPress’s customizer and customize Colors. WordPress 2017 offers only three color scheme options: dark, light or custom. Choose Custom and move the slider to the hue nearest your colour theme. With custom you can see in the live preview the changes in text colours.

Specifying Exact Colour Scheme

The custom colour slider to choose a colour scheme is helpful but not exact. If you have specific colors for your site color theme, you have to use CSS. There are plugins that allow you to do this, but if it’s only a short line, I’d prefer CSS.

Accent
Hex color #282216

Used as background color of the top menu and footer. To force the background color to change, add this CSS line.

.navigation-top, 
navigation-top ul {
background-color: #282216 !important;
}

Background
Hex color #F4F7ed

Used as default background color of the body and HTML. All pages and post would have this light background. To alter the original background color, add this CSS.

.html, 
.body,
.site-content-contain {
background-color: #f7f4ed;
}

Primary
Hex color #625741

Used as color of all headings h1, h2, h3, h4, h5, h6. To specify the color of all headings, add this CSS code.

h1, h2, h3, h4, h5, h6 { 
color: #625741 !important;
}

Secondary
Hex color #A28E67

Used as secondary accent such as background color of other elements, buttons, and links.

.coming-soon { }

Effects
Hex color #D3C19C

Used for hover effects.

.coming-soon { }

Footer Color

To change the background color of the footer, add these CSS line.

footer { 
background-color:#282216;
color:#d3c19c !important;
}
footer .widget-column a {
color:#d3c19c !important;
}

Customising the Top Menu

By default, the top menu is aligned to the left. When viewing your site on a wider screen, the top menu appears off. I leave it that way. I like it a bit off than centered. To keep my top menu simple, I’m dropping the drop-down menus. That means that I’m not adding any menu item under the main menu items. I’ll think of another way but that will come later.

In case you want your top menu centered, add this short CSS line. In WordPress customiser, click Additional CSS. In Customizing Additional CSS, enter the following line.

#top-menu {
text-align: center;
}

If you want it right-aligned, change center to right.

Changing the Hover Effect of the Top Menu

The default hover effect of the top menu is very simple; a horizontal line appears below the word when you mouse over it. I tweaked that a bit by increasing the thickness of the horizontal line and changing its color and by adding a transition effect. In CSS, these are the lines I added.

The following CSS line sets a transition when you hover on a menu item, decreases the spaces around it, reverts the font weight to normal, and forces to change the color of the menu item.

/* CUSTOMISING THE TOP MENU */ 
.navigation-top a {
transition: 0.8s;
padding:9px;
font-weight:normal;
color:#f7f4ed !important;
}

The next CSS displays a thick 50% opaque white border below the menu item when you hover it and decreases the bottom padding to zero, giving a rising effect of the border. If the menu item is active, the border appears without the transition (it’s actually there; you just don’t see the effect).

/* CUSTOMISING THE TOP MENU */ 
.navigation-top a:hover,
.current-menu-item >a {
border-bottom:3px solid rgba(255,255,255,0.5);
padding-bottom: 0px;
}

Disabling the Sidebar

For my minimalist site, I won’t use the sidebar. If the sidebar contains many elements, it tends to clutter your single page or post, aside from the reason that it distracts your readers. I just want my viewers to focus on the main content.

Additional resources:

amikvs kreativs – A Different Perspective

This video serves as a video header on this website. It is a synopsis of what I do as a designer and creative writer.

Using Video Headers On Your Website

Video or image headers are good attractions on your website. If used effectively, it can engage your site’s visitors for a longer time on your site. You can use a single image, a slide of images, or a video. Whichever media you use, it must be able to trigger an interest from your viewer.

Video or image headers are commonly used on landing pages, which may be the home page of your website or special pages you use to promote your products or services.

There are simple ways to capture an audience’s interest.

  • Motion such as a slider or a video
  • Captivating images, or images with a story or emotion
  • Music
  • Stories or message

For the one I’m using on this website, I used a video of images. I picked images that “tell a story” and enkindle an emotion. For the music, I used soft, low-volume ambient music. This is not to startle your viewers ears especially if they are listening with headphones.

Storyboard

Your image or video header must be able to tell something to your visitors, such as a story. For example, in my video, its storyboard is something about the process of what I do as a designer and writer.

  1. “Everything begins with an idea.” Whether in design or writing, it all starts with an idea. You cannot move further without it.
  2. “Imagine. Design.” Idea creation goes with imagining or visualising. In your mind, you picture what you want to design or write. Design requires serious imagination.
  3. “Think. Plan.” Once you already have an idea, you ponder on it and allow to incubate it in your mind. You gather more thoughts then you start to plan on how you to go about it. Planning is an essential tool to puts you on the right track. It requires serious thinking.
  4. “Build. Explore.” It is on this stage that you start designing, doodling with your pen on your paper, making sketches, and exploring more ideas. You usually don’t settle with one idea or design. You eventually will have to explore more.
  5. “Write. Share.” You write what you have just created and you share them to the world. This is where blogging and social media come in.
  6. “Impress. Express.” Impress to express. When someone appreciates what you have designed or written, there is no doubt that you would feel good. People’s appreciation are your psychological rewards. Therefore, to impress them, your design must be good; what you have written must be worth reading. Likewise, your designs and stories must be able to express their true purpose, meaning or message.
  7. “Talk. Listen.” Simply put, communicate. Your skill is not just about talking well. You must also know how to listen. In social sites, you interact with your audience. Listening is more important than talking because you have to learn the pulse of your viewers or followers, or target market.
  8. “Learn. Inspire.” Knowledge is a continuous learning. Studying does not end today. Enhance your skills with further education. You don’t need to attend a formal school unless it is necessary. You have the skill to learn by yourself. As a form of gratitude for the knowledge that you have earned, it is your responsibility to share your knowledge. Inspire others. Remember the Parable of the Talents. Share what you have.
  9. “A Different Perspective.” Designing and writing are not easy tasks. Being just one of the many puts you in the last line. Designing and writing uniquely, or having your own style is a feat that is hard to achieve. In my own little way, my notion of having a different perspective is more like a character rather than a design or writing skill. Whenever I could, I looked at a different perspective aside from what a common mind sees. It is for this reason, why I chose an image of a lighthouse because a lighthouse looks at different angles and points of view.

What Stories The Images Tell

    • Clear sky. Almost empty. An idea starts from emptiness.
    • Complicated staircase. Can you imagine how brilliant the mind of this designer?
    • The photographer. Before he captures a scene, he thinks, he plans.
    • Wooden path on a lake. This is symbolism of building something and exploring.
    • Laptop, notebook, and pen. This is straightforward. The photographic filter, however, adds a mood to the photograph.
    • A tranquil lake. Look how simple this photograph is, yet its simplicity and mood makes it impressive and expressive.
    • Father and infant. Silence is a means of communication.
    • A young man in metropolis. You can picture this in many ways such as job hunting, going to school to study or teach, or going to work.
    • Lighthouse. A lighthouse is a watch tower that guards the ocean 360 degrees – a symbol of different points of view.

Technical Note

WordPress theme Twenty-Seventeen comes with a feature, called video header, that plays a video on the front page of your website. By default, the video loops. To other users, this can be annoying. The video auto-plays. It gives no option to users whether they want to watch the video or not. Music add user experience, unfortunately, the sound of the video is muted. So far, there are no options to disable the auto-play, or to loop the video just once.  Perhaps, in the future, a plugin would be available to control how the video is played on WordPress theme Twenty-Seventeen.

What if the browser cannot play the video for some reasons? The fallback is to set image headers.

Brainstorm Ideas For Your Website

Brainstorming is a process of putting down on the table every idea – good or bad – that comes out of your head without censorship, justification, or disapproval. It is a process to get that perfect idea. When you brainstorm, you just let the ideas flow. The idea that you may think of may be funny or ridiculous, or even non-sense. It does not matter. Just write down every idea. Use this brainstorming technique to conceptualize what your website is to be about.

What Your Website Is All About

In the previous lesson, you learned about the things to consider before putting up a website, such as:

  1. ‘Do you want it’ versus ‘do you need it’
  2. The purpose and content of your website
  3. Your target audience, aka market niche
  4. The budget and time you need to spend
  5. The platform from which to build your site

At this point, I assume that you already have figured out whether you want a website or need to have one. Regardless, you still have to go through the next process – to brainstorm ideas for your website.

Brainstorm An Ideas List

I can no longer count how many times I had changed the content of my website. Every time a new idea was in my head, I changed my site. It’s not a good practice. Brainstorm ideas and keep a list for future reference.

Now it’s time to brainstorm ideas for the content of your website. Remember that brainstorming is a process, so take your time.

List every idea that comes out of your mind. If you can list a hundred or less, that’s cool. Write the ideas down. Once you have run out of ideas, stop. Set aside your list and forget everything you’ve written.

The next day, or whenever you feel like it, go about your list. Read your ideas a little bit aloud. Make sure that you hear what you are reading. Then start crossing out an idea that you don’t “feel“. If a new idea comes in, add it to your list.

Repeat the process. Go over your list again and see if there are other ideas that you can cross out, or un-cross. If a new idea pops out of your head, add that idea to your list. Once you could no longer cross out anything, take a rest. Set your list aside. Get busy with other things.

At times, a new idea will come to your head. Take your list and write that idea down. Remember that you are still brainstorming at this stage, so don’t censor your ideas.

Think Sources of Information

Whenever you feel like it, go over your list and read every idea. Start crossing out again. If there’s not an idea that you could cross out at this point, think sources. Where are you going to get information about your ideas.

For example, if you are thinking of blogging about gardening, do you have a garden? Do you have knowledge about plants? Suppose, you don’t, then you can blog about your learning process on how to build and start gardening. Now, think. Do you have a space where you can build your garden? Do you have the resources such as books and seminars that you can attend?

Your website also needs images. Make sure that you will have access to a source of rich images as well. There are images that you can buy, and there are free ones; but you cannot use copyrighted images. If you can take pictures with your smartphone, then you need to explore your surroundings so that you can take pictures of the plants you wish to feature on your blog. The stuff mentioned in this example are the sources of your contents.

Now, go back to your list. Check the ideas you think have a rich source of information that you have access to. Cross out the ideas you think require information that you have no access to.

Your Top Ten List

You come now in the final step in brainstorming ideas for your website. Repeat the whole brainstorming process of crossing out and checking those with rich content until your list is narrowed down to at most, ten ideas. Rank them one to ten. Write your top ten on a clean sheet of paper, or preferably on a notebook that you keep. If your list contains less than ten, that is just fine. You may have top seven or top five, or even top 12.

Your Top One is most likely the best idea for the website you wish to build.

The reason why you are keeping your list permanently is that you may need it in the future. In case you need to build another website, then you don’t have to go through the same brainstorming process again. All you have to do is pick an idea from your top ten or top 12 list.

In A Nutshell

It is not easy to come up with the best idea for your website. At often times, you don’t know what to put there. To help you come up with a good idea, you need to brainstorm. Brainstorming allows your mind to be creative and exploring. Brainstorming is not a quick step to a solution. It is a repeating process of letting the ideas flow fluidly through time. Therefore, you need not hurry. In between repeating process, there’s a time to pause and relax. This is to allow the ideas to incubate in your mind. While your mind is at a relaxed stage, it continuously search for the creative idea. Usually, the idea just comes out of nowhere in the middle of the process.

Now that you already have a good idea about your website, your next move is think of a domain for your site.

Available Materials

[su_menu name=”jobBuildWeb” class=”graybg”]