Post Stylesheets

Post Stylesheets is an extension that allows theme developers or users to create per-post (any post type) stylesheets for their site. You can view an example of a custom post stylesheet for my plugin dev book on my personal blog. The feature works by replacing your theme’s style.css (via the stylesheet_uri filter hook) with your custom stylesheet.

Basically, it allows you to completely code custom stylesheets for use on specific posts. If you’ve ever looked at blogs that use “art direction” and wondered how they do it, well, this is one way.

Enabling post stylesheets

To enable this extension for your theme, simply add the following line of code into your theme setup function.

add_theme_support( 'post-stylesheets' );

This will add a meta box to the edit post screen to allow users to choose a stylesheet for individual posts.

Adding a custom stylesheet

Creating a custom stylesheet is fairly easy. Suppose you were creating a “fitness” page for your site and wanted to give it a custom design. The first step would be to create a new CSS file in your theme folder and name it fitness.css, style-fitness.css, or something similar.

Then, you must add a file header with the following information at the top of the file.

/**
 * Style Name: Fitness
 */

The important part is Style Name:. You are required to use that text followed by the name of your style.

From that point on, you can add whatever style rules you want. That part is up to you.

I’d advise you to create a custom /css folder in your theme and place the stylesheets there to keep them organized. This is not required, but the Post Stylesheets extension will search up to two-levels deep in your theme folder for stylesheet files. So, you’re perfectly fine leaving them in the theme root folder too.

How to select a post stylesheet

Now that you’ve created a style for your theme, you can choose to use it for any post on your site. To do so, go to the edit post screen for any post and look for the “Stylesheet” meta box. From there, you’ll have the option to select any of the styles you’ve created as shown in the following screenshot