I was working on a custom theme when I came across the need to display a ‘featured image’ if the post had it, but if the post was a video post, it would display a video where the image would be. I did not want to rely on just pulling the “the_content” and hope for the best. I wanted to control exactly what size, where, and how the featured image and the video was to be displayed.

Setting up the information architecture

My #1 pet peeve of new developers is that they skip this step. They do not think about the implications of their information architecture decisions. In this case I know a few things. I know that I want to use the default WordPress posts. I know that I need to somehow separate (or categorize) default posts from posts containing video. I know that my clients are usually not super techy so I need to ask for as little work as possible to get a video to embed.

These things lead me to the following decisions

• Use the built in WordPress “Post Formats” which includes a video option
• Use the built in WordPress Featured Image for the image on the home page
• Use WordPress’ function for automagically embed a video just from a link

 Building the back end

Because the post formats already exist, I don’t need to do anything for setting a post as a ‘video’ post instead of a default one. (Although your theme may need to enable them via add_theme_support). The only other thing I needed to do is to add a custom text field via the Pods Framework. (if you want to do this without pods, learn about adding your own custom fields manually )

First you want to add a new Pod and choose the following settings.

And then simply choose “add field” and choose the text input field. No advanced options necessary.

 

Now when you browse to add a new post you will see the Post Formats meta block and a “more fields” meta block directly beneath the main content input.

Working with your data

So now with our test post set up, you want to enter a link to a Vimeo or a YouTube video. For this example I am going to use Vimeo because I think their video players just look prettier than YouTube.

My Vimeo link looks like this: http://vimeo.com/77526814

A YouTube link would look like this: http://youtu.be/RPhews5pFJk (taken from the ‘share’ option on YouTube

I am going to be working with the post’s list or archive page so with my theme I am going to be working entirely inside of content.php. This is where the entire loop’s content exists for my theme. Your theme may be entirely different. You may want to read up on using ‘template parts’ just to understand this a little. The following code can basically go anywhere inside of your main blog loop however you have it setup.

The super duper magical part is right there after the  if ( has_post_format( 'video' )) { and it is so simple you might wack yourself in the head. Especially if you are like me when I started and decided that it was going to be way harder than it is.

Code Explained

It’s so utterly simple.

You are literally going to get the contents of your new custom field using get_post_meta(). Another thing a lot of people tend to get confused is that just because Pods created your custom field;  if it is applied to a custom post type, you use the normal WordPress-y way of getting that content! No special Pods code required for this at all! .

That content is stored inside of the variable $video, which is then literally just passed through the all magical wp_oembed_get(). The second key inside of that function is simply your settings for how you want it to display. It has a bunch of them but I just decided to deal with the width of the displayed video at this point. You store that inside of a new variable.

Then you just echo that new variable!

That is literally all! 

Your Link Resources

• WordPress Post Formats (WordPress codex)
• Learning about get_template_part() and loops  (kovshenin.com)
• Adding your own custom fields manually – for doing this tut w/o Pods (WordPress codex)
• Pulling data from Custom Post Types and Advanced Content Types w/Pods – (here!)
• The Magical wp_oembed_get() – (WordPress codex)