Introducing WordPress 3.1 Post Formats

Featured Image

Some people hate it and some love it. I belong to the second category. If you, as a webmaster, don't like it, simply do not enable theme support for post formats. I think that post formats bring incredible possibilities to website presentation.

Basic requirements: WP 3.1, theme support, knowledge of CSS and WP filters, imagination, and creativity.

Format - meta box
Format - meta box

How would you know if your favourite theme does support post formats? Look at any Edit Post or Add New Post screen. If you see a meta box titled Format with all or some of radio buttons shown on the picture then it is supported. If you don't then add this one liner to functions.php of your theme:

add_theme_support( 'post-formats', array( 'aside', 'gallery', 'link', 'image', 'quote', 'status', 'video', 'audio', 'chat' ) );

You don't have to include all formats. For example you may enable ( like on this site ) just a few:

add_theme_support( 'post-formats', array( 'aside', 'link' ) );

There are guidelines how a specific format could present itself. These are just guidelines, not rules. Read about it here: http://codex.wordpress.org/Post_Formats. Now, that could be a curse or a blessing. I am in favour of two approaches. If you are a webmaster, choices are entirely yours. Use the post formats as a tool, even not following guidelines at all. This is for you to decide how you implement it. On the other hand, if you make a theme for general public, try to follow basics of the guidelines to avoid confusion among your theme's users. For example, according to Codex, aside format is "Typically styled without a title. Similar to a Facebook note update.". Being a theme developer I would use it as a rule. No title. Period.

That said, let's move to the real life examples of implementation from our site. The theme we base our examples on is baseScape powered by xScape framework. We have implemented two post formats: aside and link, therefore, we've added this line to functions.php of the theme:

add_theme_support( 'post-formats', array( 'aside', 'link' ) );

Example 1: common content filter for both - aside and link formats

function my_post_format_content( $content ) {
    $id = get_the_ID();
    $format = get_post_format();
    if ( false == $format )
        $format = 'standard';
    if ( 'aside' == $format ) {
        $content = '<div class="aside"><em>' . $content . '</em></div>'; 
    } elseif ( 'link' == $format ) {
        $title = get_the_title();
        $content = strip_tags( $content );
        $content = '*' . $content;
        $start = strpos( $content, 'http://' );
        if ( $start ) {
            $content = substr( $content, $start, strlen( $content ) - $start );
            $end = strpos( $content, ' ', $start );
            if ( $end ) {
            } else {
                $end = strlen( $content );
            }
            $content = substr( $content, 0, $end );
            $content = '<div class="link-format-link"><center><h1><a href="' . $content . '" title="Visit ' . $title . '" target="_blank">' . $title . '</a></h1></center></div>';
        } else {
            $content = '<div class="format-link-error">Post ID: ' . $id . '. Link format ERROR!';
            if ( ( current_user_can( 'edit_posts' ) ) && ( current_user_can( 'edit_others_posts' ) ) )
                $content .= ' ---> <a href="/wp-admin/post.php?post=' . $id . '&action=edit">Edit</a>';
                $content .= '</div>';
            }
        }
	return $content;
}
add_filter( 'the_content', 'my_post_format_content', 10, 1 );

Example 2: aside format (CSS)

/* FORMAT aside */
.aside {
	background: #ffd033 none center no-repeat;
	border: 1px solid #000000; background-position: 7px 50%;
	text-align: justify; 
	padding: 10px 10px 10px 10px; 
	-moz-border-radius-bottomleft:4px;
	-moz-border-radius-bottomright:4px;
	-moz-border-radius-topleft:4px;
	-moz-border-radius-topright:4px;
	-webkit-border-top-left-radius:4px;
	-webkit-border-top-right-radius:4px;
	-webkit-border-bottom-left-radius:4px;
	-webkit-border-bottom-right-radius:4px;
}
.format-aside a,
.format-aside .post-meta,
.format-aside .post-comments,
.format-aside h2 {
	display:none;
}

Example 3: link format (CSS)

/* FORMAT link */
.format-link-error {
	background: red none center no-repeat;
	border: 1px solid #000000; background-position: 7px 50%;
	color: white;
	text-align: justify; 
	padding: 10px 10px 10px 10px; 
	-moz-border-radius-bottomleft:4px;
	-moz-border-radius-bottomright:4px;
	-moz-border-radius-topleft:4px;
	-moz-border-radius-topright:4px;
	-webkit-border-top-left-radius:4px;
	-webkit-border-top-right-radius:4px;
	-webkit-border-bottom-left-radius:4px;
	-webkit-border-bottom-right-radius:4px;
}
.format-link a,
.format-link .post-meta,
.format-link .post-comments,
.format-link h2,
.format-link .thumbnail {
	display:none;
}
.link-format-link a {
	display: inline;
	font-size: .5em;
	text-decoration: none;
	text-align: center;
	text-shadow: #6374AB 3px 3px 2px;
}
.link-format-link a:hover {
	text-decoration: underline;
}
.link-format-link h2 {
	display: inline;
}
.format-link-error a {
	display: inline;
	color: white;
	font-weight: bold;
}
.format-link-error a:hover {
	text-decoration: underline;
}

truculent-ending

Leave a Reply

Your email address will not be published. Required fields are marked *

*