Getting Visual Editor Styles to Work With Post Formats

When WordPress 3.1 was released, a new feature called Post Formats was introduced, which gave authors the ability to select one of nine formats for their posts. Theme developers had to add support to include each format as well as some conditional tags and CSS to take advantage of what they had to offer. Each format could be displayed on the front end with a different layout and design, though the visual editor in the wp-admin didn't reflect this.

For this tutorial, I'm going to focus on how we can get our theme to display the Quote post format so that the front end layout and design is reflected when creating a post in the visual editor.

Step 1: Adding Support for Post Formats

First things first, let's make sure our theme supports post formats and editor styles. All we need to do is include the following in our functions.php file:

// This theme styles the visual editor with editor-style.css to match the theme style.
add_editor_style();

// Add support for the quote post formats
add_theme_support( 'post-formats', array( 'quote' ) );

Tip: Remember that when adding PHP to a file, it needs to be within the opening <?php and closing ?> tags or else it will only display as HTML instead of being processed as PHP.

Step 2: The Quote Content File

In order to control how our Quote Post Format will display on the front end, we need to create a file called content-quote.php. This is our Quote format page template and it needs to be placed within our theme's folder. Here's the code we need to add to our new file:

<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
	<div class="post-content">
		<?php the_content( '' ); ?>
	</div>
</article>

This page template will be used on our index and archive pages, and is often called directly from the index.php file with the following code:

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

Step 3: Creating the CSS

Here is an example of how the Quote post format looks in my Gridiculous theme for WordPress:

To get things looking the way we want, we need to include some CSS:

/* =Quote
-------------------------------------------------------------- */
.format-quote .post-content {
	font-size: 18px;
	line-height: 27px;
	padding-left: 50px;
	font-style: italic;
}

.format-quote p,
.format-quote blockquote {
	margin: 0;
}

.format-quote:before {
	font-family: Georgia, serif;
	color: #999;
	display: block;
	font-size: 100px;
	width: 50px;
	content: '\201C';
	height: 0;
	top: -40px;
	position: relative;
}

.format-quote blockquote {
	border: 0;
	padding: 0;
	font-size: 18px;
	color: #555;
}

cite {
	text-align: right;
	font-style: normal;
	display: block;
	margin-bottom: 10px;
}

cite:before {
	content: '\2013 \00A0';
}

The above CSS needs to be included in our theme's style.css file, but we also need to create an editor-style.css file and add it to our theme. This stylesheet is what will be used when we view our post in the visual editor.

Step 4: The Magic of jQuery

Almost every single one of the awesome effects you experience in the WordPress admin is created using jQuery. Since it's already included on the admin page, let's just build off of it to get our visual editor working with our post format editor styles.

If a /js folder doesn't already exist in your theme, create one and add a new JavaScript file called editor-styles-post-format.js. Once the file is created, open it up in your favorite text editor and add the following:

( function($) {
	$(window).load( function() {
		var init_post_format = $( '#post-formats-select' ).find( '.post-format:checked' ).val();
		add_post_format( init_post_format );
	} );

	$( '#post-formats-select' ).find( '.post-format' ).change( function() {
		var post_format = $(this).val();
		add_post_format( post_format );
	} );

	function add_post_format( post_format ) {
		post_format = ( 0 == post_format ) ? 'standard' : post_format;
		if ( frames['content_ifr'] )
			$( 'html', frames['content_ifr'].document ).removeClass().addClass( 'format-' + post_format );
	}
} )(jQuery);

With our jQuery script ready, we need to enqueue it so that it actually appears when we're navigating around our admin. Here's another little block of code that we need to add to our functions.php file:

add_action( 'admin_enqueue_scripts', 'editor_style_admin_script' );
function editor_style_admin_script( $hook ) {
	if ( 'post-new.php' == $hook || 'post.php' == $hook )
		wp_enqueue_script( 'editor_styles_post_format_js', get_template_directory_uri() . '/js/editor-styles-post-format.js', true, array( 'jquery' ), '1.0.0' );
}

Step 5: Writing Our Quote

With everything in place, anytime we select a post format on the post edit screen in our admin, a class will be added to the visual editor similar to how it is added on the front end, and we will be able to preview how our post will look as we are creating it. We just have to make sure to use the following HTML when creating a post so that our CSS works properly.

<blockquote>
	Only one thing is impossible for God: To find any sense in any copyright law on the planet.
	<cite>
		<a href="http://www.brainyquote.com/quotes/quotes/m/marktwain163473.html">
			Mark Twain
		</a>
	</cite>
</blockquote>

Conclusion

There are a couple steps involved, but in the end, it's not that complicated to put things in place to get our visual editor working with post formats. Thankfully, many themes already include most of these elements so we might only need to create and enqueue the new JavaScript file. One of these days, maybe someone will even create a patch in WordPress so this functionality becomes part of the core.

If you have any comments or feedback on anything you read above, please feel free to discuss it below.

HIGHLIGHTS OF THE DAY