Customising WordPress Theme Twenty Seventeen

Every year, WordPress comes out with default WordPress theme. This year 2017, WordPress came out with – your guess is right – Twenty Seventeen. What follows are tips or guide on how to customise WordPress theme 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.

Customising WordPress Twenty Seventeen

Site Identity

The following are your options on what to show on the front page of your website.

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

On my website, I opted to show my logo only.

Colour Scheme

You have only three options: either dark or light or custom. With custom you can see in the live preview the changes in text colours.

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 introduces your site or promote a product. Keep the audio of your video soft and subtle. 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 to 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.

Here’s the video that I made for my site.

You may want to read an article I wrote on how I made and edited this video with YouTube editor and learn some tips on video editing.

Header Image

Young man strolling in the city
Filtered photo

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 500 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 for Mac and FastStone for Windows.

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 loads up, 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. 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.

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.

WordPress Plugins Essential To Building WordPress Websites

Essential WordPress plugins
What you are going to learn in this section
Learning Level: Beginner

In this section, you are going to learn the essential WordPress plugins that you need to install with your WordPress to boost or power up your website. It assumes that WordPress is already installed on your site, technically in the web server that hosts your website. Some of these plugins are indispensable especially those that protect your site. Some plugins are optional but may be essential depending on what type of website you have.

If you are a beginner, you will be overwhelmed by the thousands of plugins available for WordPress, that in the end you clutch your head with choice-fatigue. Lucky for you now, you will be stress-free because I am going to explain here the some of the essential plugins that you need to install right after installing WordPress, or later as needed. This will save you plenty of time deciding which plugins are best for your website because you will skip the tedious and time-consuming process of plugin research and tests.

The plugins are labeled with the following categories: most essential, optional, and advanced.

Most Essential

Akismet 

Power: Website Strength

Akismet is an anti-spam WordPress plugin for your website. It comes pre-installed upon installing WordPress. All you have to do is activate it.

You must hate spams. You do not want your website to be spawned by hundreds of comments that are not related to your content; instead try to sell their products or services, or invite you to visit their websites. Even if you tick your WordPress settings to moderate comments, your dashboard will be flooded with spammy-comments that are awaiting your approval. So, what do you do? You need an anti-spam plugin on the defense, that before any spam hits your site, this plugin is on the front to defend you.

WordPress says, Akismet is

…used by millions, [and] … is quite possibly the best way in the world to protect your blog from comment and trackback spam. It keeps your site protected from spam even while you sleep.

This is true. Akismet is an indispensable plugin.

To activate Akismet, you need an API key, which will be given to you upon signing up for Akismet. You can get one key for your personal site. Keep this key written on your notebook because you will be needing this each time you activate Akismet. You enter the API key on the Akismet configuration page of your WordPress admin dashboard, which becomes visible after you have clicked Activate. If you already have your key, you may enter it manually. If not, WordPress will do it for you automatically after you have signed up.

Akismet is an advanced hosted anti-spam service aimed at thwarting the underbelly of the web. It efficiently processes and analyzes masses of data from millions of sites and communities in real time. To fight the latest and dirtiest tactics embraced by the world’s most proficient spammers, it learns and evolves every single second of every single day. Because you have better things to do. ~ Akismet.com

Wordfence Security

WordPress sites are attacked by hackers worldwide more than 19000 times per minute. You can view a map and a graph of real-time attacks on wordfence.com.

Wordfence Security is one of the recommended plugins you will find in the plugins section of your WordPress dashboard. In case, you do not find it quickly, on the plugins dashboard, search for ‘wordfence’ without quotes.

Wordfence Security is available free. The premium (paid) version of this WordPress plugin has more features like country blocking.

Wordfence is the Leading Cyber Security solution for WordPress. We provide a Complete Anti-Virus and Firewall Package for your WordPress Website including Two Factor Authentication, a Firewall incorporating Machine Learning and Tools to help Recover from a Hack.” — Wordfence.com

WP Super Cache

With too many WordPress plugins, complicated PHP codes, and heavy images that you upload on your site, your site may not upload fast. If in 10 seconds your viewer does not see anything worth reading or watching, he will leave your site and try another site. You wouldn’t want that to happen. So, to keep your website running fast, your site needs a plugin that does just that. And that is, WP Super Cache.

WP Super Cache is a very fast caching engine that produces static html files on demand, or something of that sort. Meaning, there are cases, depending on user’s interaction with your site, like writing comments, when your site needs to run the PHP scripts rather than just showing a static version.

For more info, go to wordpress.org/plugins/wp-super-cache/.

TinyMCE Advanced 

Power: Ease of Use

TinyMCE Advanced is a visual editor, something like your Word or OpenOffice Writer word processor that has editing toolbars to help you customize your text with regard to the type of font, size of font, alignment, etc. A webpage is constructed with HTML codes called <i>tags</i>. Each element is specific to its use. For example, there are 6 types of headings. When writing a numbered list, you use the right code for that. A link, i.e. hyperlink, requires a specific HTML tag in order for the link to work. So, if you are not familiar with HTML, then TinyMCE Advanced is going to help you compose your content without even having to know a single HTML code.

WordPress is built in with the basic HTML editing toolbar. TinyMCE Advanced extends and enhances that facility so that you can further control how your post or article is going to look like in the front-end, i.e. what your website looks like on the World Wide Web. For further reading about the features of this plugin, read it on its plugin page on WordPress.

TinyMCE Advanced is essential for beginners; optional for advanced users.

Optional

Jetpack

Jetpack is a handy all-in-one WordPress plugin. Instead of installing, say 20 plugins which may not be compatible with each other, install Jetpack instead. Jetpack has more than 30 plugins housed in a single plugin. All you have to do, after installing Jetpack, is to activate the features that you need. Some of its features that I find very useful are:

  • Customizing CSS
  • Installing and changing the favicon the quick and easy way
  • Display carousels, i.e. full-screen slideshows
  • Display tiled galleries instead of just the boring grid arrangement
  • Auto-publish your posts on social media sites (very useful)
  • Display sharing buttons
  • Create contact forms
  • Display related posts

Jetpack, however, is simple but complicated as a whole. What is annoying about it is the protection plugin. If it is on, it can block your own ISP that you yourself cannot login to your own website. To prevent this to happen, you must set your ISPs as an exception.  Your computer uses a range of ISPs. You must know them beforehand. You must also know the ISP assigned to you by your Internet provider. I suggest that you do not turn this on because it is a bit of a hustle unblocking your own ISP.

To use Jetpack for your site, install it then sign up for WordPress.com to integrate the two. Then, activate the features that you need. Complete list of features is on jetpack.me.

Advanced

WordPress SEO by Yoast Versus All in One SEO Pack

Power: SEO

SEO means Search Engine Optimization. When you talk about SEO, it means that you do things to make your website rank on the first page of search engine results. For example, if someone searches for “love the second time around”, your site, if it is about love, should be the first on the list on the first page, or at least, in the top 10. The SEO WordPress plugins guide you on how you can do this technically. Technically, I say, because the other side of it is your own effort to promote your site.

You have 2 choices for this type of plugin. You can pick one.

Both plugins are good, popular, and well-recommended. What makes All-In-One SEO Pack different from WordPress SEO by Yoast is that the former provides SEO integration for e-commerce sites. If you prefer the Yoast version, you can install a separate plugin, also by Yoast, that integrates SEO for e-commerce sites. On the other hand, what makes WordPress SEO by Yoast more useful is that it pinpoints where you lack the SEO factors, then suggests on how you are going to improve your post or page.

For beginners, I would recommend All In One SEO Pack because of its simplicity. If you want to go deeper and wish to fully understand the techniques behind SEO, SEO by Yoast is what you need.

Simple Custom CSS 

Simple Custom CSS allows you to change the plugin and theme default styles of your website without creating a child theme. However, some themes prevent you to overwrite certain CSS elements. In such case, you may need to use the theme’s own custom CSS, if provided; or create a child theme. Simple Custom CSS is a WordPress plugin that adds the styles to the head section of your web page.

For beginners, CSS stands for Cascading Style Sheet. It is where you write ‘codes’ to style the elements of your website. To style means to set the attributes of your website’s elements. Elements refer to HTML tags, text, images, and containers. Attributes basically refer to an elements type, size, position, color, among others.

You can learn how to use CSS on Codecademy.

OK. That’s it. If there are more WordPress plugins that I find useful for WordPress sites, I will add them to the list.

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.

Add An Event To A WordPress Site

how-to-add-an-event-on-wordpress-site
Fig 1

WordPress does not come built in with functions that handle events/calendar events. You need to download a plugin that you can install with WordPress. With the right plugin, you can add an event to your WordPress site or blog. Depending on the plugin you installed with WordPress, adding an event is as simple as adding a new post.

how-to-add-an-event-on-wordpress-site-page-2
Fig 2

There are a variety of events plugins on the Net that you can download or install to your WordPress site. Choose what fits your liking. The plugin that I used for the site Code of Champions is Event Organiser by Stephen Harris. I chose Event Organizer because with it, your event is treated as one of your posts. The procedure of adding an event is simply the same as adding a usual post. For that matter, your event is treated as a post entry which you can categorize and tag, filter and search just like any other post.

how-to-add-an-event-on-wordpress-site-page-3
Fig 3

Let’s begin.

Assuming you have already installed and activated your events plugin, adding an event to your blog is as simple as ABC.

  1. On the left panel of your Dashboard (Fig 1), click or hover your mouse on Events. A sub-menu shows up (Fig 2).
  2. On the sub-menu, click Add New to display the add-new post page (Fig 3).
  3. On the post-page form, enter the details of your event in the blank fields.
    1. Enter the title of your event.
    2. Type the details or a brief description of your event.
    3. In the Event Details below, enter the date the event starts and when it ends.
    4. Enter also the time the event starts and the time it ends. If it is an all-day affair, check All day.
    5. If the event is recurring, specify how often the event is repeated; then select the dates the event does not occur.
    6. Specify the venue of the event.
    7. On the right panel, select the appropriate category. If the category is not given, you can add a new one.
    8. Add one or more tags to your event.
    9. Add an image to your event to catch more attention.
  4. Publish your event post.

That’s it. If you need to make changes to your event, select All Events. Choose the event you wish to change, then edit the details the same way you would edit a usual post.