WP 3.1 Post Formats in Prose
I didn’t have to wait too long luckily when I saw that Studiopress had already released the Tapestry theme: a tumblr style child theme using the new post format feature in WordPress 3.1. I thought it would be nice to have a microblog on my own site that was separate from this one for the quick and silly stuff. So this little project was born.
It was much easier to hack this in then it might have been. The Genesis framework provides a fantastic selection of hooks and functions that let me quickly and easily customize what I needed. I’m going to go through the code and explain briefly what it is doing but it should be largely self evident. At the end of this blog post I’ve listed all the customizations I did and provided a download link for the iconset I am using in case you wanted to follow along.
// Enable Post Format support in Prose add_theme_support('genesis-post-format-images'); add_theme_support('post-formats', array('aside', 'gallery', 'link', 'image', 'quote','status', 'video', 'audio', 'chat'));
I wanted to modify the Prose theme files as little as possible so I started by creating a file named post-formats.php and put it into the Prose theme folder. These are the first two lines of code added into this file. First off, we activate the built-in Genesis support for post formats which is surprisingly simple. All it does is check requirements for post formats and then inserts an image with the same name of the format. So if the post format is set to Video it will return a link wrapped video.png file. And that’s it, that’s all it does. The only gotcha here is that the post format icons need to be in ./theme/prose/images/post-formats. The second line tells WordPress itself that our theme supports the listed post formats. The formats listed are also all the post formats that WordPress itself supports so we’ve got our bases covered.
// We're not going to display titles so we're going to remove this // so it runs at another point. remove_action( 'genesis_before_post_title', 'genesis_do_post_format_image'); // Lets not display our subnav on the Microblog since they're all // the microblog category. add_action('genesis_before_header', 'lh_remove_subnav'); function lh_remove_subnav() { if(is_page("Microblog")) { remove_action('genesis_after_header', 'genesis_do_subnav'); } } // Add a subtitle for the Microblog page. add_action('genesis_before_content', 'lh_microblog_title'); function lh_microblog_title() { if(is_page("Microblog")) { echo "Welcome to the Microblog. Let's let our hair down a little."; } } // I don't want Microblog posts on the front page, kill 'em. add_action('genesis_before_loop', 'lh_strip_microblog'); function lh_strip_microblog() { global $wp_query; if( is_home() ) { $wp_query = new WP_Query( array( 'cat' => "-" . get_cat_id("Microblog") ) ); } }
Moving on we come to this set of actions and functions. These just set a few customizations that I wanted for my own blog and you may have very different ideas for your preferred post format setup. All of these are optional. In my setup it’s worth pointing out that I am not using post titles. The built in Genesis post format function hooks into genesis_before_post_title by default. I remove this hook in my code and handle it at a later point, if you wanted titles on your microblog post there’s no need to touch this hook.
// Setup Custom Loop for Microblog add_action('genesis_before_loop', 'lh_check_micro_page'); function lh_check_micro_page() { // Confine the Microblog posts to a // page named Microblog if(is_page("Microblog")) { // Remove Genesis Actions remove_action('genesis_before_post_content', 'genesis_post_info'); remove_action('genesis_after_post_content', 'genesis_post_meta'); remove_action('genesis_post_title','genesis_do_post_title'); // Add Microblog Actions add_action('genesis_before_post_content', 'genesis_do_post_format_image'); // Run the loop for all posts with the // Microblog category. genesis_custom_loop( 'cat=' . get_cat_id("Microblog") ); } }
Lastly we come to the actual meat of this code. You can see that we really aren’t doing very much, Genesis rocks! We hook into before the start of the loop and check to see if we’re on the Microblog page. On your blog you’ll probably want to change this but for me I just wanted this to work on a single page. If we’re on the Microblog page we remove a bunch of Genesis built-in actions. This will get rid of the post title, the info line, and any meta information leaving us just our content. Then we hook the genesis post format function back into the works but this time we make it run right before the post content is displayed rather than the post title. After that we fire off a custom loop with a query for all posts in the Microblog category. And well, that’s it! Told you it was simple.
// Post formats require_once(CHILD_DIR.'/post-formats.php');
Now I needed a way to hook this code into the Prose theme itself. What I ended up doing was adding this line into the ./themes/prose/lib/init.php file where Prose loads the rest of its code on startup. This means if Prose gets updated later I’ll just need to add this single line of code back in and I’ll be good to go. This sort of minimal integration is something I strived for since it will make maintenance easier later on. I’m not sure if this is the best way so if there is a better way to do this please let me know.
And there we go. The only thing left is a tiny bit of CSS that primarily floats the post format icon so it’ll show up to the left of the post content and the css class I’m using for my little heading on the microblog page. One of the nice things about these post formats is that they automatically will get assigned a post format CSS class. For example, a Quote format post will have ‘format-quote’ automatically added into its div. This means we can style each of these formats separately and that is probably the next step for me. I admit I did very little to make this easy for other’s to use, pretty much the only way to do customizations is edit the code itself. If there is any demand for this I will probably end up trying to integrate this better into the admin page so everything can be customized without editing the code.
Thanks for checking this out, if you have any questions drop me a line and I’ll see if I can help out in anyway.
Post Format Iconset
This iconset is created from a larger free Tumblr icon set called Pictos I think they look great, thanks WooThemes!
Download Post Format Iconset
./themes/prose/css/custom.css
.post-format-image { background: none; display: block; float: left; margin-right: 5px; } #microblog-desc { color: #999; font-family: 'Palatino Linotype', 'Book Antiqua', Palatino, serif; font-size: 15px; padding-left: 20px; padding-top: 0px; font-style: italic; border-bottom: 1px dotted #aaa; }
./themes/prose/lib/init.php
// Post formats require_once(CHILD_DIR.'/post-formats.php');
./themes/prose/post-formats.php
/** * This file controls Post Format customisations to the Prose child theme. * * @author Les Harris <les@lesharris.com--> http://lesharris.com * @package Prose * @subpackage Post Format Customisations */ // Enable Post Format support in Prose add_theme_support('genesis-post-format-images'); add_theme_support('post-formats', array('aside', 'gallery', 'link', 'image', 'quote','status', 'video', 'audio', 'chat')); // We're not going to display titles so we're going to remove this // so it runs at another point. remove_action( 'genesis_before_post_title', 'genesis_do_post_format_image'); // Lets not display our subnav on the Microblog since they're all // the microblog category. add_action('genesis_before_header', 'lh_remove_subnav'); function lh_remove_subnav() { if(is_page("Microblog")) { remove_action('genesis_after_header', 'genesis_do_subnav'); } } // Add a subtitle for the Microblog page. add_action('genesis_before_content', 'lh_microblog_title'); function lh_microblog_title() { if(is_page("Microblog")) { echo "Welcome to the Microblog. Let's let our hair down a little."; } } // I don't want Microblog posts on the front page, kill 'em. add_action('genesis_before_loop', 'lh_strip_microblog'); function lh_strip_microblog() { global $wp_query; if( is_home() ) { $wp_query = new WP_Query( array( 'cat' => "-" . get_cat_id("Microblog") ) ); } } // Setup Custom Loop for Microblog add_action('genesis_before_loop', 'lh_check_micro_page'); function lh_check_micro_page() { // Confine the Microblog posts to a // page named Microblog if(is_page("Microblog")) { // Remove Genesis Actions remove_action('genesis_before_post_content', 'genesis_post_info'); remove_action('genesis_after_post_content', 'genesis_post_meta'); remove_action('genesis_post_title','genesis_do_post_title'); // Add Microblog Actions add_action('genesis_before_post_content', 'genesis_do_post_format_image'); // Run the loop for all posts with the // Microblog category. genesis_custom_loop( 'cat=' . get_cat_id("Microblog") ); } }
I really like the microblag Les! It looks great!