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).
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.
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.
bearpig says
Would there be a way to allow the width to be 100% to allow it to resize automatically for responsive sites?
Utsav Singh Rathour says
Well you could have a look at
http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
Hope this helps. :)
steven says
hello. Great post. I don’t understand where do i need to paste the video url or embed video code in the backend?
Thanks
Utsav Singh Rathour says
Paste the video url on the editor.
Chris says
I’m following your logic, but totally new to this and have a question. if I’m using child themes, specifically Genesis, where do I point the loop to if the single.php is in the Genesis folder? I’d like to create a single.php in my child theme folder that the functions.php pulls from for the post format, but I’m not sure how to do that. My concern is that the next Genesis update will overwrite any changes in the parent folder. Thoughts?
Ali says
I’ve tried this, it does not seem to pull YouTube video embeds though, only Vimeo.
Would it be possible for the code to support YouTube videos as well?