1. Code
  2. Theme Development

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.

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:

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:

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:

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:

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:

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:

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.


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.

Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.