Customising WordPress Theme Twenty Seventeen

Every year, WordPress comes out with a default WordPress theme. This year In 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 width 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.

Moreover, a YouTube video header display the title of the video and some other text on top which could be ugly looking.

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 (before I had fibre optic installed). 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.

I created a video using iMovie which was 9 seconds long and 7.7 MB on disk using a low video quality setting. Increasing the length of the video increases the size to greater than 8 MB. If I set the video quality to medium, its size increases to 15.2 MB. For both reasons, I had no choice but to settle with a 9-second video with low video quality.

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 it 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:

Build A Website In 5 Easy Steps

Building a web site of your own nowadays is easy. Compared to yesteryears, designing a web site would take months and an agonizing period of writing codes. Today, even if you are not a programmer, you can build your own web site. Online CMS (content management system) such as Blogger.com and WordPress.com are web builders that you can sign up with and get your site hosted for free for life.

If you want to be in full control of your own site, go self-hosted. You can do it in 5 steps. Download the infographic I made in pdf. Just follow the 5 steps and you won’t be lost. If you need more information, continue reading.

Be ready with your domain name.

Before building your own website, be ready with your domain name. What is a domain name? Facebook.com, google.com, twitter.com and wordpress.com are domain names. Mine is amikvs.org.  As of this writing, there are over 1 billion websites in the world, and growing by the second. (Check live stats here.) That means, whatever domain name you have in mind, most probably it is no longer available. So, be creative and start brainstorming now before you proceed further. Read this article to help you in coming up with a domain name.

Be ready with at least 5 domain names. Then check your domain name’s availability at whois.com. If yourdomain in dotcom is no longer available, don’t try the other gTLD such as .org or ccTLD or a combination, e.g. yourdomain.com.ph. The idea is that if you cannot own yourdomain.com, better not go for yourdomain.org or yourdomain.ph or yourdomain.com.ph. The reason is that to avoid using a domain name that might have been trademarked already by the owner. Another reason is that, your domain in search engine results ranking will be competing against another domain with the same name.

Sign Up For A Web Host – A Green Host Preferably

Once you already have a domain name in mind, you’re ready to register it. You need to register your domain name so that you can own it. You can do that via a web hosting company. A web host is a computer network company that provides shelter to your website. A website comprises data files such as scripts and images. You put these on a web host so that it becomes accessible via the Internet.

You have to have a web hosting account in order to use the services of a web hosting company. The price of a hosting plan varies — ranging form $4 – $15 a month.

I would recommend green web hosting. Green web hosting uses renewable and sustainable energy such as solar and wind. By using a green host, you show care to your environment.

Register your domain name and open a web hosting account via this green web hosting company. If the promo is still open, they usually give discounts if you sign up for 3 years plus a free domain name for life. In my case, I paid $3.95 a month for 3 years, thereafter, I pay $4.95 a month. They register my domain name amikvs.org every year for free as long as I maintain an account with them. That’s a good deal that comes with unlimited bandwidth, unlimited number of websites, unlimited disk space usage, etc.

Login, Open cPanel and Install WordPress

Once your hosting account is ready, go to your web host’s website and login to your account. Go to your cPanel by clicking the button . Scroll down to the bottom of cPanel until  you find a section called Softaculous Apps Installer. Click the WordPress icon . In the next window that appears, click the button . The WordPress installer provides the default parameters. So basically, just accept whatever is provided by default. When done, your website is ready. All you have to do is to enter the contents of your website.

That’s it. If you need assistance, message me via email or through my social media accounts.

Download the cheatsheet in pdf. Size 5MB. Click to view or right-click to download.

Save

How To Build A Website In Just A Few Days

With WordPress or other CMS applications, a web designer’s job has become easy. If your job is to design and develop a website, you have saved your time doing the design, coding, and debugging parts because it’s like 90% of your job has been done and tested. The only thing left to do is to make some adjustments on the built-in design to suit your requirements; then, populate the site with contents.

Web development is truly a time-consuming job that requires unconditional patience. For an individual, it could take weeks or months to develop a website. It is for that reason why back then, developing a website was so expensive.

The very first (and only but also the last) intranet site I designed and developed for a pharmaceutical company, if I still remember clearly, took me a month or two to complete it. Truly, it was no big deal, because I could straightly write the codes right from my brain without any documented systems analysis. I think, that’s how geeks do programming. As a programmer then for a big holding company, I would just make sketches on paper to gather and contain my thoughts, then I would go right ahead to my keyboard and start typing the codes.

Good for you and me now because we do not have to wait for a month to put your website online. With CMS like WordPress, I could complete it in a week and voila! Your website is up on the World Wide Web.

For the design part, WordPress comes with thousands of design templates. All I have to do is pick what’s right for you. If the design does not satisfy completely my creative palette, then I can just tweak it.

The First Few Steps

So, how do I go about it, just in case, you’d be my client and you are hiring me to build a website for you.

  1. I sit with you so that we can exchange ideas. First, I will listen what’s on your mind. Then, I will tell you what possibly can be done.
  2. I will pick a WordPress design, tweak it according to your liking using my creative energies, then put it online on a temporary host so that you can view it.
  3. If everything looks good, we move on to finalize it.
  4. If your domain name and web host are ready, I will need the technical specs so that I can upload your site to your web host. If you do not have a domain name and web host yet, I would suggest that you pick one now. No idea yet which web host to pick? I would suggest my favorite earth-friendly web host.

In a few days your website will be up and running on the web. All you have to do next is to put in some contents.

If you prefer other CMS applications, I will study one that fits most your needs. If CMS is not what you need, I will make one from scratch. That means, I am going to design one for you, then build it using the latest HTML, CSS, JavaScript, and anything that is currently useful in the web technology.

If the site you have in mind is uniquely a complex one that requires new codes of programming, then I am not the guy for you. 🙂

Feel like discussing your thoughts? You can start by emailing me your queries to amikvs @ gmail dot com.