Using Custom Post Types And Meta Fields To “Client-Proof” Adding New Content

In the website I recently launched, my client wanted to have the ability to add new videos to the portfolio section of their site. With the need to make this as streamlined and easy to use for a non-techie (and a person new to WordPress) to update, I decided to use custom meta fields on top of a custom post type.

The client’s need was also a bit tricky as they had some of their work on YouTube along with other videos being displayed on HBO’s website. HBO has their own custom player so it required a bit of custom tweaking to make it work. You’ll see how I got around this later on.

I’m going to show you, step by step, how I made this super easy for my client to add new videos to their website.

For this website (and most of my others) I use the Genesis Framework, so the page template code is specific to Genesis. If you know a bit of code it shouldn’t be a huge deal to make it work in other themes as well.

Register The “Videos” Custom Post Type

I put my code is a plugin to future proof the site. If they ever decide to change themes, the post type will still remain.

Videos Custom Post Type Code

Register The “Video Categories” and “Video Tags” Custom Taxonomies

This code also went in the plugin.

Video Categories & Tags Code

Use Advanced Custom Fields To Create The Custom Metaboxes

At this point it *could* get a little complicated, so do yourself a favor and download Advanced Custom Fields to make the next few steps much easier then hand coding.

Create The Metabox

In the Custom Fields settings pane, choose “Add New” to create a new metabox. Name it something like “Video Fields” so it’s obvious to you, incase you end up adding other metaboxes later on.

For the “Location” section of the settings, make sure you show the field group if Post Type | is equal to | videos.

Add The Custom Fields For YouTube/Vimeo Videos

The following image with give you a clearer picture of the settings I used. It’s fairly simple. I just used a basic “Text” field and called it “video_url”. We’ll get back to that in our page template.

Add The Custom Fields For HBO Videos

This field is created exactly the same, just a different name and different instructions to help the user. The real fun comes when we bring the fields into our template(s).

Publish all of this and we’ll get to the page templates.

Display The Custom Fields In A Page Template

To keep this tutorial a reasonable length I’m not going to get into custom post type archive template, though the same principle (and similar code) applies.

Create a file called single-videos.php in your child theme folder.

Advanced Custom Fields makes it extremely easy to bring the contents of a custom field into your template. You just need to use get_field( “your_field_name” ) and your content appears… it’s basically magic.

Add The Genesis Action Hook

I like to put the add_action first, so I can easily tell where the following function is going to get executed. This is just personal preference.

add_action( 'genesis_post_content', 'jivedig_do_video_single', 1 );

This will place the code right in the content area of the post, and the number 1 makes sure it goes above any content (the video description) that’s placed in the WordPress post editor.

Create The Function

function jivedig_do_video_single() {

}

Add The Video Custom Fields In Your Code

This is where it gets fun. Maybe just for me, but still.

The first part creates a variable, which is the custom field info.

The next part displays the YouTube or Vimeo video if that field was used. I used the built in WordPress embed function “wp_oembed_get”.

Displaying the HBO video took some time to figure out the simplest method for the client. HBO uses an iframe in the embed code the offer via their website. This caused some serious issues in trying to keep the site responsive and make all the videos looks consistent, whether from YouTube, Vimeo, or HBO.

Here’s an example of the code that HBO offers:

Not only is it a bit confusing, but it’s also a bit awkward to find… especially for my client. I decided to put the iframe code into my function and only require my client to enter the video number, which is displayed in the video url, in the embed code, and elsewhere throughout HBO’s website. This proved to be a great move after going through the minimal training my client needed to get started.

The Final Code

Here is the final code you can put in your single-videos.php

Adding New Videos In The WordPress Dashboard

When my client logs in, it’s a very simple process to add a new video.

1. Under the Videos tab they choose “New Video”
2. Enter the video title
3. Add a description in the regular editor (optional)
4. In the custom metabox we created (Video Fields) there are clear instructions on what to do… add a YouTube or Vimeo URL, or add the HBO video number.
5. Add a Video Category and add Video Tags
6. Publish!

Here’s what it looks like in the Dashboard.

In the picture you can also see I made use of the awesome Video Thumbnails plugin to automatically grab the Featured Image when a YouTube or Vimeo video is used.

On the Sutchworks website I made use of 2 more custom fields.

One is a checkbox to make the video a “Featured Video”, I used this to create a custom widget which will display a variable number of videos in the same way they are displayed on the main video archive.

The second is a field to add any industry honors. Since Sutchworks has one some awards and been nominated for a few others, it was only obvious to allow them an easy way to display that on the site.

Check out the video archive on Sutchworks.com!