Adding a “Featured Video” to the Twenty Sixteen WordPress Theme

I love the new official theme from WordPress, Twenty Sixteen. It’s clean, simple, and great for blogs and beyond that want the focus to be on the content. It displays featured images beautifully, as well as images throughout the content. But it’s not perfect.

For example, when adding videos to the post they’re limited to the narrow width of the content column. What if I want to give a video more space and put it front and center?

An example of what I'm talking about. Beautiful featured image. Small video. I want a BIG video!
An example of what I’m talking about. Beautiful, big featured image. Small video. I want a BIG video!

That’s what I’m going to show you how to do in this guide. We’ll customize a Twenty Sixteen child theme (you do use child themes, right?) to check if there’s a featured video, and if so show that one instead of the featured image.

Here we go!

1. Create a custom field for the video link

First off, install the Advanced Custom Fields plugin. We’ll use this plugin to create a custom field where we can enter the URL to the video, e.g. a Youtube link.

Once it’s installed, create a new field group. I named mine “Posts” because I’ll only use featured videos on posts.

Edit the field group and change the location rules as follows:

location-rules

This will ensure that the custom field we’ll create next only shows up on posts with the “Video” post format.

Now add a field and set the following four values:

field-name
field-format

The last value is probably not needed, but it can’t hurt.

Now, create a new post and select the “Video” post format, like this:

video-post-format

When you do the “Video URL” custom field will appear below the content window where you can copy and paste any video link from sites such as Youtube or Vimeo:

custom-video-field

When you’ve published the post we’re done with this step, but the video won’t yet show in the post. The next step is to turn this video link into an embed and display it instead of the featured image.

2. Displaying the featured video on single posts

I want to display the video on single posts, and to do that we’ll have to edit the content-single.php file in /template-parts/ (again, in the child theme folder).

On line 18 (assuming you haven’t changed anything else) you should see this code:

twentysixteen_post_thumbnail();

Switch the whole line, including the php tags, for the one below:

This code does the following:

  1. It checks if the post has the post format “Video” AND if the post has a video URL in the custom field that we created in step 1
  2. It passes the video URL through oEmbed which is a protocol that turns the video URL into an embed code, just like the embed code you’d get from Youtube. This is the same protocol that WordPress uses for their embed function.
  3. It displays the embed code in your post
  4. If the post is not a “Video” post OR if the custom field does not contain a video URL, it displays the regular featured image as normal.

Now here’s what it looks like:

featured-video-bars

We have a big featured video! Looks pretty good, but those black bars are quite ugly and the video does not adjust well to various widths.

We need to make the video responsive. Here’s how to do that:

3. Adding responsiveness

Based on this guide I used FitVids to get a perfect result for every screen width. FitVids is a lightweight, easy-to-use jQuery plugin for fluid width video embeds.

You can either use the FitVids for WordPress plugin or go the same route as I did and manually add the FitVids jQuery plugin.

Here’s how to do that. Start with logging onto your server and create a new folder in your child theme location called /js/.

Next download the FitVids ZIP-file from GitHub here.

download-fitvids

Upack the ZIP-file and upload the whole folder to the new /twentysixteen-child/js/ folder.

Inside the /js/ folder, create a new file and name it FitVids.js. Edit this file and paste this code inside it:

This code tells FitVids to look for the .post CSS selector class and work its FitVids magic on the video to make it responsive.

Note that using the .post CSS selector class will enable FitVids for all videos in your posts, not just the featured video. That isn’t a bad thing, because you want all your videos to look good, right?

The next step now is to add the FitVids javascript files in your WordPress child theme. Simply, copy and paste the following code in your theme’s functions.php file:

4. Add some margin below the video

The video could use some margin at the bottom to give it some air. It’s wrapped in a DIV with the .fluid-width-video-wrapper CSS-selector, so I added a margin below the video of 30px, like so:

.fluid-width-video-wrapper {
    margin-bottom: 30px;
}

5. All done!

Here’s the result:

final-featured-video

A big featured video with perfect fluid width. Looks pretty good, right?

Dela så blir jag glad!
[et_social_share]

Leave a Reply

Your email address will not be published. Required fields are marked *