Last week I wanted to play around Post Formats, after searching for a couple of hours I couldn’t find a complete tutorial that shows how to integrate it on your existing theme. All I found was a tutorial that adds the code in functions file, and that’s it.
What I wanted to do is to add the Post Formats function into an existing theme, since most of the webmasters I know loved their current theme. I did turn to WordPress Themes Directory to check out other free themes that uses Post Formats, I picked Twentytwelve and check out the code and used it on my current theme.
Today I will show you how to add the Post Formats function into your current theme, and take advantage of using it. It’s really simple to do, before we start make sure you back up your theme. I suggest that we work using local server since it’s faster.
What is Post Format?
According to codex:
Post Formats is a theme feature introduced with Version 3.1. A Post Format is a piece of meta information that can be used by a theme to customize its presentation of a post.
How to add Post Formats in your theme?
I assume that you’re current theme doesn’t support post format, and you know your way on wordpress hook, php and html / css.
We will base our code from the twentytwelve code, and we can start from there. The post format we will create are image, video, quote and link.
Let’s Start!
I hope you already back up your theme by now.
Open your functions.php and paste the code below.
// adding post format support add_theme_support( 'post-formats', // post formats array( 'link', // quick link to other site 'image', // an image 'quote', // a quick quote 'video', // video ) );
To check, log in into your dashboard and create a new post, you’ll see something new on the right sidebar below publish. To select, just click the radio button before you hit publish.
Open your index.php, copy the code inside the loop and create a new file named content.php and paste it there. Here’s your loop now on index.php.
<?php if (have_posts()) : while (have_posts()) : the_post(); ?> <!--loop code here--> <?php get_template_part( 'content', get_post_format() ); ?> <?php endwhile; ?>
You can read more about the get_template_part here. Next create the following file, content-video.php, content-image.php, content-link.php, content-quote.php.
content-image.php
To post for image format, just insert the image in the editor and use a proper title.
<?php /** * The template for displaying posts in the Image post format * */ ?> <h2><?php the_title(); ?></h2> <?php the_content(); ?>
content-link.php
To post for link format, just include a link in the editor.
<?php /** * The template for displaying posts in the Link post format * */ ?> <?php the_content(); ?>
content-quote.php
To post for quote format, just put the quote in the editor.
<?php /** * The template for displaying posts in the Quote post format * */ ?> <h2><blockquote><?php the_content(); ?></blockquote></h2>
content-video.php
To post for video, just put the url in the editor. I found the code for video on wp.tutplus.
<?php /** * The template for displaying posts in the Video post format * */ ?> <?php if(strlen( get_the_title() ) >0 ): ?><h2><?php the_title(); ?></h2><?php endif; ?> <?php $parsedUrl = parse_url(get_the_content()); $embed = $parsedUrl['query']; parse_str($embed, $out); $embedUrl = $out['v']; ?> <iframe width="620" height="350" src="http://www.youtube.com/embed/<?php echo $embedUrl; ?>" frameborder="0" allowfullscreen></iframe>
To style those post format, you can add your own div’s and CSS styling. You may also need to use body_class(); on your header.
Save all those files on your root theme folder, now every time you wanted to post image, quote, link and video you just have to select from the post format UI in the dashboard.
This is really a neat feature, I saw a couple of themes on themeforest and they are using post formats with different layouts. If you’re planning to sell your theme, you need to add this and take advantage of it!
I hope you’ve learned something new, and feel free to ask if you’re confused or if you have other way to make this better.
