webtoolkit4.me

webtoolkit4.me

Resources for Web Workers

From the blog

WordPress plugin: Custom CSS stylesheet for posts or pages

ccss

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

25 comments

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>