Wordpress plugin: Custom CSS stylesheet for posts or pages

WordPress plugin: Custom CSS stylesheet for posts or pages

June 11th, 2010 - Backend, Wordpress

Having posts or pages designed a bit different from the rest of the blog/site isn’t something new. Some people i admire follow this technique in a really unique way. A friend of mine is doing it as well in a really interesting way but his site is under construction so i’ll update this bit as soon as he gets online. Note: All of them are using Expression Engine.

So what is it then?

Earlier today i needed this for a client project. Some pages need and some others will need in the future a different style than other pages. So i made this. It’s a tiny plugin that displays a list of custom CSS files stored in a sub directory of your theme and lets you choose which one you want to include in a specific post/page. In other words, no more dealing with code for this. Upload your custom CSS files, select the one that you need in a post or page and you’re done.

How it works?

First, download the Custom CSS plugin, extract and upload it. Activate it and you are good to go. Now all you have to do is create a folder called “custom-css” as a sub folder in your theme’s main directory. Like that:

In there you can now upload all the custom style-sheets that you might need for a page or post in your blog/site. Add or edit a post or a page and you will see a small list of the available style-sheets in the “custom-css” folder. Select it, update your post and that’s it.

Notes

1. The folder name must be “custom-css”. If you don’t like that, just edit the plugin file and change the first line:

define('CCSS_PATH','/custom-css/');

Make sure to add the slashes before and after the folder name.

2. This plug-in relies on wp_head() in order to include the style-sheet in your post / page. Having said that, you should have your main style-sheet ABOVE your wp_head() declaration. Otherwise how useful a set of styles that don’t override your default stylesheet would be? Not at all i guess. I am sure all of you have the wp_head() as the last thing in your header.php but i thought it would be a good idea to mention this before any hair pulling sessions.

Changelog

June 11th, 2010: Initial release v1.0

Download: http://webtoolkit4.me/download/custom_css.zip

Comments

Adam W. Warner

June 13, 2010

Wow, very useful plugin! Looking forward to making it one of my “go to” plugins for client sites:)

Nice work!
Gerald Reisner

June 22, 2010

This is what I´ve been waitig for! I´ll try it as soon as I get home! Thank you!
Lisa

July 28, 2010

Hi there, thank you for this FANTASTIC plugin. I use it on two of my clients’ WordPress websites. However, I cannot find it in the Plugin search within WordPress, you know, for the ‘auto’ install. Any reason for this? Your name doesn’t even come up in the Author search.
Chris Bourne

October 28, 2010

Fabulous idea, should make things much easier. But on http://www.safeproductions.co.uk/01wp/news/ which is running a child theme of twentyten, the revised css file is not being called. Twentyten’s header php is completely orthodox and closes with the wp_head and links to the main css early in the head section.

All I want to do is style post pages differently from pages. Tried the call to the custom css in both the page and the posts, but neither is called according to firebug.

If I can get this to work I will certainly promote it for those intermediate developers like me who are still learning php.

Any ideas?
Guest

November 26, 2010

Great plugin. Thank you very much!
The Frosty

January 12, 2011

Thanks, the code itself helped me. I was trying to add custom CSS to a upcoming theme, but was having issues.

Seems I was trying to use is_dir first and that was causing my problems.
j hoban

February 9, 2011

wonderful plugin, thx a lot :)
Sami

February 26, 2011

Is this plugin available at WordPress.org? If not, why not upload there?
Mike

March 2, 2011

Very very usefull!! Thx!
Dominik

June 3, 2011

Very useful and just worked out of the box. Perfect.
THANK YOU!
Lavern, the Barbecue Smoker Guy

July 25, 2011

Hi, just a quick thanks for your plug-in. It does exactly what I needed it to do. I needed to get rid of a couple different elements on my home page, specifically my retweet button and the breadcrumb. I was able to make home.css and apply display:none to these elements only on the home page.

Thanks again!

Lavern
Madmark

September 28, 2011

Looks very promising. But I couldn’t get it to work using a child theme. The custom css is listed in the drop-down (though sometimes it disappears). And save/update the page to apply. But the file is not loaded. Web developer reveals that the path..to../custom-css folder is pointing at the parent theme not the child. Put a file and folder in the parent theme and all is fine. Same problem as Chris Bourne above.
So line 88 of ccss.php function ccss_include()
replace:
$the_path = get_template_directory_uri(); // path to our template folder
with:
$the_path = get_stylesheet_directory_uri(); // path to our stylesheet folder
And that seems to work for child themes.
Madmark

September 29, 2011

Ah now I’ve had to deactivate this plugin. Two reasons. It seems though you can choose a custom css file from the dropdown – you can’t later unchoose it. And anyway it started applying a custom css file to pages I had never assigned a custom css file to.
MikeH

September 29, 2011

So far this looks to be just the ticket – but for some reason I’m stuck. I’ve installed/activated the plugin and can select the .css as described. But for the life of me I can’t figure out where to go from here – there’s no style selector appearing, and I don’t see instructions as to any other config’s that need to be done.

Can you provide some guidance on this?
Ian Belanger

October 26, 2011

Hi,

First off, Great plugin, very useful.

Is there anyway to arrange the style-sheets so they show up in the drop-down menu, in a certain order?

I have 20 different style-sheets for a site and in the custom-css folder, on the server, they are arranged in alphabetical order. I would really like them to show in the drop-down menu the same way. Is this possible?

Thanks,

Ian Belanger
hibrix

December 14, 2011

Thanks for this essential plugin!

Need web development help?? Open source Software?

[...] WordPress plugin: Custom CSS stylesheet for posts or pages | webtoolkit4.me [...]

June 19, 2010
WordPress: Custom CSS stylesheets for Posts or Pages « wordpress « KnowTeBook - Webworkers Daily Milk

[...] need and some others will need in the future a different style than other pages. So the guys from webtoolkit4.me made this plugin. It’s a tiny plugin that displays a list of custom CSS files stored in a sub [...]

October 8, 2010