Stylesheet Per Page WordPress Plugin
Adds a custom stylesheet/s all of the pages on your WordPress install with options to check for the existence of the stylesheet before adding.
Also allows for adding IE specific stylesheets all the way back to version 6. Just enable in the plugin options and add the stylesheets to your theme directory.
Download Stylesheet Per Page on the official WordPress.org Plugin repository. This is where the most stable version will be stored. Or, if you’re game clone this project at github and get stuck in.
Installation:
- Upload the plugin to the
/wp-content/plugins/directory - Activate the plugin through the ‘Plugins’ menu in WordPress
To use this plugin, just add stylesheets in the following formats to your theme’s base directory or a “css” subdirectory inside your theme’s base directory:
- For pages create a file called page-[page_name].css where “[page_name]” is replaced with the slug of the page. Eg: page-about.css.
- For author pages create a file called user.css and for individual user pages user-[username].css where “[username]” is replaced with the user’s login name.
- For different post types user [post_type].css where “[post_type]” is replaced with the name of the custom post type. You can also use just ‘post’ for regular posts. Eg. post.css.
- For individual posts use [post_type]-[post_name].css where “[post_type]” is replaced with the name of the custom post type or just ‘post’ for regular posts, and “[post_name]” is the slug of the post. Eg. post-10-tips-for-baking-pies.css, or, say if you had a “recipes” post type use something like recipes-classic-french-cheesecake.css.
- To activate IE specific stylesheets just create css files with the following naming: ie.css (covers all IE versions), ie7.css (covers IE 7 and below), ie6.css (covers IE 6 and below).
- To activate an iOS specific stylsheet create ios.css and enable in the plugin options.
NOTE: You can place your custom CSS files in either the base directory of your theme, or in a “css” subdirectory inside your theme, but try to be consistent with where you place them.
Revision History:
* 0.5 Added iOS specific stylesheet support and fixed option handling
- Fixed option handling to use a single option for easy handling throughout the plugin
- Added an iOS option for optionally printing ios.css for iOS devices.
* 0.4 Fixing a bug with stylesheet generation on custom post types
- Bug fix for sheets with no name appearing when using with custom post types
* 0.3 Adding support for IE specific stylesheets
- Added new functionality to allow optional generation of IE specific sheets
* 0.2 Initial code revisions
- Structured the code better
- Added a menu for the options page
- Improved commenting
- Added option to not print the stylesheet if the file doesn’t exist
* 0.1 Initial version
- Add a stylesheet for every page
22 Comments
Scroll down or click here to leave your comment!
Leave a Reply
Pingbacks/Trackbacks
-
Pingback: Stylesheet Per Page – sofisticated stylesheet control for WordPress | Design Newz
-
Pingback: Stylesheet Per Page – sofisticated stylesheet control for WordPress | The best Tutorials
-
Pingback: Stylesheet Per Page – sofisticated stylesheet control for WordPress | WebDevKungfu
-
Pingback: Stylesheet Per Page – sofisticated stylesheet control for WordPress | The best Tutorials
I got this to work perfect with pages, but I’m having trouble with post_types and post_names.
Hi Teri,
Best way is to change the setting in the back end to place the link to the stylesheet whether it exists or not, then inspect the code to find out the exact name and location of the file it’s trying to add.
thanks so much for this josh – perfect solution for what i’ve been trying to do!
No worries Todd, glad you found it useful!
I don’t get it. I have installed it, I see the setting area under “Settings”, I see the 3 options there, but I cannot see where any style sheets or css can be added per page, and there is nothing on this page telling where or showing where it is in WordPress once installed. How do you use this?
G’day David,
Stylesheet Per Page basically acts as a hook for you to design .css files (which you need to create and place in your theme directory). The plugin then pulls the stylesheets after the main stylesheet during the page request.
If you disable the Check for files option, you’ll see that it adds in the .css files for that page.
Hope this clears it up the instructions above a little. If you haven’t had a lot of experience with how CSS files work in WordPress themes, you’ll probably need to brush up a bit on how templates work before getting stuck into this plugin.
Cheers,
Josh
I really like your style on this comment section:)Is there any way you will share your code to a newby in coding?
Hey Eva,
Best way to inspect the CSS for it is to use either firebug if you’re using firebug, or if you’re using Chrome/Safari just right click and Inspect Element.
Thanks for your quick reply.
I wonder is there any plugin or code you use to get this effect:” Scroll down or click here to leave your comment!”? As you proberly understand,I am not good in coding:):)
No worries, if you take a look at the link in your inspection tool you’ll see that it links to #reply-title which means on click to go to the element with id=”reply-title” which just happens to be the heading above the comment box.
Great.I try it:)
Hello again:)
have tried to put this:” Scroll down or click here to leave your comment!” in to my wordpress site. I use a theme made in Artisteer/Templateer. Can you please tell me where to put it?
Hi Eva-Liz, sorry I’m not really familiar with that theme plus I don’t really support other people’s themes. You’ll need to contact the theme makers directly for support. You’re doing well tho!
Hi,
Great plugin. I made a couple of amends to stop debug warnings about uninitialised string arrays
http://pastebin.com/yMMCskcw
Regards
mh
Hi Josh,
great plugin, however I came across one issue:
My original CSS moves the body to the center and adds a background image:
body { margin-left:-500px;
position:absolute;
left:50%;
margin-top :0px;
margin-right:0px;
margin-bottom:0px;
background-image:url(images/background.jpg);
background-repeat:repeat-y;
background-position: 50%;
}
It seems like I cannot overwrite this in the page-specific CSS. Any ideas?
Hi Dom,
You should be able to overwrite, but you need to remember to overwrite each CSS item, otherwise as with the rules of CSS they will cascade through.
The plugin is great for customizing individual pages beyond our site’s basic styles. It would be even more useful if the page-specific styles could somehow be pulled into TinyMCE for display in the Visual editing window. Otherwise, it’s challenging for average users when a page’s published styles are so vastly different from what they’ve been seeing in TinyMCE. (Guess I need to keep hammering on them to trust Preview, not WYSIWYG.)
It certainly is a challenging concept to explain to new users of WordPress, I come across it all the time. Unfortunately there’s nothing that can really be done which is a shame
Glad you’re enjoying the plugin though!