Custom CSS Stylesheet for Individual Posts
I've long been a fan of "art directing" posts. That is, to apply unique CSS styling to an individual page of content when the situation calls for it. In the past, I've used theArt Direction plugin and I even created a screencast on using it.
As it turns out, there is a major problem with the art direction plugin. Using it with any caching plugin will result in a crazy epic meltdown of your site. Without too much gory detail, in trying to cache my blog CSS-Tricks, I tried all the major caching plugins (DB Cache, WP Super Cache, W3 Total Cache) and ultimately it would trash my WordPress database and serve up white pages. Very not good. The happy ending is that Frederick Townes from W3 Edge and creator of the W3 Total Cache plugin helped me out by patching the art direction plugin and getting CSS-Tricks cached with W3 Total Cache. I would love to release the updated code, but it's not my code to release. We managed to get in touch with the original author(404 link removed 2016/02/18), who said he planed to eventually update it but didn't sound too particularly interested in the patch.
SO, with that extensive backstory, what is a poor fellow to do if they want to apply custom CSS to pages TODAY? Couple ideas, read on.
One of my "WordPress Wishes" was that you could drop an appropriately named CSS file into a theme and it would recognize it and apply itself to the proper post. For example, /art-direction/style-XXXX.css, where XXXX is the ID of the post.
One of my "WordPress Wishes" was that you could drop an appropriately named CSS file into a theme and it would recognize it and apply itself to the proper post. For example, /art-direction/style-XXXX.css, where XXXX is the ID of the post.
A reader named Hassan commented with a cool idea for the
functions.php file:
I tested it out and it works great. To use it, simply create a new folder called "art-direction" in your theme. Then to style any particular Post or Page, just drop a file in that folder named style-XXXX.css where XXXX is the ID of the Post or Page. When that Post or Page loads, WordPress will look for a file of that name. If it exists, it will load in in the head section.
Reader Kerrick Long commented another cool solution. Similar to the Art Direction plugin, this adds an input area below the main content writing area. For the functions.php file:
Reader Kerrick Long commented another cool solution. Similar to the Art Direction plugin, this adds an input area below the main content writing area. For the functions.php file:
Custom CSS Write Panel
As written, it's more limiting than the Art Direction plugin as it is for CSS only rather than "anything" (e.g. JavaScript), although that would be a fairly trivial adjustment to what gets echoed out. The Art Direction plugin also allowed the CSS to be applied in other places the post might be output, for example, archives pages, whereas this does not. But to be honest, I never used that anyway.
Two pretty sweet and totally function solutions by Digging Into WordPress readers. Awesome. Huge thanks to Hassan and Kerrick! I would also love to see the Art Direction plugin updated as well, if nothing else, because I'm sure people download that plugin every single day from the plugin repository and have caching going on their blogs and end up in the same sore spot I was.
Custom CSS Stylesheet for Individual Posts
Reviewed by Unknown
on
11:09 PM
Rating:
Reviewed by Unknown
on
11:09 PM
Rating:
No comments: