Advertisement
Theme Development

Getting Visual Editor Styles to Work With Post Formats

by

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.


More About Post Formats

In all, there are only nine post formats that can be supported by a theme: aside, gallery, video, audio, image, status, link, quote, chat. You can read more about all of the post formats available in WordPress in Braden Keith's article Post Formats Inside and Out.


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.

Related Posts
  • Code
    Theme Development
    The Beginner's Guide to Icon Fonts in WordPressIcon fonts
    I like social icons, I'll admit it. I have literally dozens of social icon sets I've collected over the last few years, and have even created a few sets of my own to try to achieve that perfect fit for a particular project. But lately, I've discovered icon fonts, and I haven't been using those old image icons in a while.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme from Static HTML: Creating an Archive TemplateCreating wordpress theme from html 400
    If you've been working your way through this series, you now have a functioning theme with two page templates. The steps I've demonstrated to this point are: preparing your markup for WordPress converting your HTML to PHP and splitting your file into template files editing the stylesheet and uploading your theme to WordPress adding a loop to your index file adding meta tags, the wp_head hook and the site title and description to your header file adding a navigation menu adding widget areas to the header and sidebar adding widget areas, a colophon and the wp_footer hook to the footer file creating template files for static pages. Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Uploading Your Theme to WordPressCreating wordpress theme from html 400
    In the first two parts of this series, you learned how to prepare static HTML for WordPress and to split your HTML file into a set of template files. You now have the beginnings of a theme, but unfortunately your files won't work as a theme just yet. For any theme to work, you need to tell WordPress about the theme, and you do this in the stylesheet. In this tutorial, you'll do that. Next, you'll upload your new theme to a WordPress installation and test it. Additionally, you'll create a screenshot of your theme so it's easier to work with in the WordPress admin.Read More…
  • Code
    Theme Development
    Creating a WordPress Theme From Static HTML: Creating Template FilesCreating wordpress theme from html 400
    In the first part of this series, I showed you how to prepare your HTML and CSS files for WordPress, ensuring the structure would work, the code was valid and that the correct classes were being used. In this tutorial you'll learn how to take your index.html file and split it up into a set of template files for use by WordPress.Read More…
  • Code
    Plugins
    Using HighCharts in WP-AdminHighcharts 400
    Charts are a great way to present data. They make data more digestible by making it visually appealing. In WordPress, there is no built-in method for getting posts and pages data in a graphical form. Although, there are certain plugins available which integrate Google Analytics with WordPress, but they are overkill if you want to get only a portion of that data. Also, nothing should keep you from learning new techniques and to dive straight into the subject is the best way to learn.Read More…
  • Web Design
    CMS
    Organizing Ghost Theme Files and FoldersGhost files retina
    This is the second part of our Ghost theme design tutorial series. Everything from here assumes you have a foundational understanding of Ghost. If not, before continuing please take the time to read Understanding Ghost: Stages of Design).Read More…