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

Comments

  1. 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!

  2. 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!

  3. 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.

  4. 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?

  5. Guest

    November 26, 2010

    Great plugin. Thank you very much!

  6. 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.

  7. j hoban

    February 9, 2011

    wonderful plugin, thx a lot :)

  8. Sami

    February 26, 2011

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

  9. Mike

    March 2, 2011

    Very very usefull!! Thx!

  10. Dominik

    June 3, 2011

    Very useful and just worked out of the box. Perfect.
    THANK YOU!

  11. 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

  12. 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.

  13. 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.

  14. 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?

  15. 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

  16. hibrix

    December 14, 2011

    Thanks for this essential plugin!

  17. TOmi

    April 3, 2012

    Thanks for the great plugin, I have just one problem:
    The css i use also affects the pages navigation and sidebar. Is there some way to avoid this?

  18. Richard Golf

    April 22, 2012

    WOW, Awesome Stuff!

  19. steve

    April 23, 2012

    I do not understand the text below you wrote. Am I supposed to edit something in my header.php file? If so, what??

    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.

  20. kotoman

    May 1, 2012

    I’m sure this plugin will be great, but sadly I can’t get it to work. Unpacked, activated, created new stylesheet which is in the custom-css folder and selected the style sheet from the post admin page. Nothing has changed.
    I’ve checked to see if the wp_head is the last thing before the tag which it is.

    Can you think of anything else it could be?

    thanks

  21. iacopo

    June 20, 2012

    Very good installation and activation..but.. how to do now? I am not good in html/css stuff so :D if someone can help me to tell to wordpress to use and other css for the other pages I will be very happy. Could I upload the original css in the custom-css folder and, just after, edit it so to create a quite different page than the original one? Thank you in advanced.

  22. Robert

    June 26, 2012

    I’m a newbie, and want to be sure this works, as it sounds ideal to me. Can you confirm, and also, can you tell me how I can know where the theme is on my site, so that I can put the subfolder in the right place. Thanks

  23. Robert

    June 26, 2012

    Found out where it is. Thanks. So now is there an easy place where you can look at CSS’s that can be used, and are they viewable to see what they look like?

  24. marko

    September 19, 2012

    wooooW usefull!!! It’s possible something like this but I can edit css for “categories” ??

    Thank you so much!

  1. Need web development help?? Open source Software?

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

    June 19, 2010

  2. 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

Leave a Reply