Miscellaneous Web Development WordPress

Showing Video instead of Featured Image (Post Format example Tutorial)

I wrote about Post Formats on my last article here. Basically it dealt with what a post format is and how it is different from Post Types and a basic know how of how to use it. In this article, I am going to take it a step further and give you a working example of it. You might have seen blogs or themes where a digital video is shown instead of Featured Image or may be a link, quote, slideshow etc. Those all are post formats and this is how they are done (I am going to show example of video only for now). You may visit this site for social media video production if you need help making and editing videos for your website of social media pages.

1.) Add support for Post Formats

First off we start by adding Post format feature to our theme. So add the following code into your themes “functions.php”

add_theme_support( 'post-formats', array('gallery','image','video' ) );

Once done you will see on the admin panel where you add a post, an added meta box that looks like following image on wordpress 3.5.1
*Note: Post Formats will be inbuilt from WordPress 3.6 and will look different to the following image. If you are already on WP 3.6+ while reading this article, you may skip this part.

3.5.1

2.) Loop rediscovered

Now in your post loop in single.php or index.php or wherever you want it instead of the regular; the_title(), the_content() or the_excerpt(), put this code.

<?php if(have_posts()): while(have_posts()): the_post(); ?>
   <?php get_template_part( 'content', get_post_format() ); ?>
<?php endwhile; endif; ?>

What this will do is call a php file named, content-<your_post_format_name>.php So say the next post is a video file it will call for the content-video.php file. Now what goes inside content-video.php?

3.) Content specific php files

You would keep your standard post formats code in content-standard.php. This file will only contain the part that goes inside loop. It would look like a regular inside loop call.

<h2><?php the_title(); ?></h2>
<p class="meta"><?php the_author(); ?> | <?php the_date(); ?></p>
<?php the_post_thumbnail(); ?>
<p class="content"><?php the_content(); ?></p>

That was for the content-standard.php file. Now for video we would put something like the following code in content-video.php

<h2><?php the_title(); ?></h2>
<p><?php the_author(); ?> | <?php the_date(); ?></p>
<p class="video_format"><?php
$content = trim( get_the_content( ) );
echo the_featured_video( $content );
?></p>

This will display your video instead of the featured image inside your loop. But then what is “the_featured_video()”. This is a custom function that we will create and put it in our functions.php, which will get the video code from our post’s content and display it.

4.) the_featured_video() in functions.php

Put the following code in your functions.php, what it basically does is gets video URL or embed code of the first video and displays it  only.

/**************************************
Get Embed Video for post format video
**************************************/
function the_featured_video( &$content ) {
 $url = trim( array_shift( explode( "\n", $content ) ) );
 $w = get_option( 'embed_size_w' );
 if ( !is_single() )
 $url = str_replace( '448', $w, $url );
if ( 0 === strpos( $url, 'http://' ) ) {
 echo apply_filters( 'the_content', $url );
 $content = trim( str_replace( $url, '', $content ) ); 
 } else if ( preg_match ( '#^<(script|iframe|embed|object)#i', $url ) ) {
 $h = get_option( 'embed_size_h' );
 if ( !empty( $h ) ) {
 if ( $w === $h ) $h = ceil( $w * 0.75 );
$url = preg_replace( 
 array( '#height="[0-9]+?"#i', '#height=[0-9]+?#i' ), 
 array( sprintf( 'height="%d"', $h ), sprintf( 'height=%d', $h ) ), 
 $url 
 );
 }
echo $url;
 $content = trim( str_replace( $url, '', $content ) ); 
 }
}

That’s it. You are done, now if you choose video as your post format for the post, it will show the title, user info, date published and the video in your single or archive page, and if you choose standard it would show the regular one with featured image. I hope this was of help. If you found this helpful, please share and comment.