ThemeShaper Forums Topic: How do I define a custom CSS file per page template?

ThemeShaper Forums Topic: How do I define a custom CSS file per page template? http://themeshaper.com/forums/ Help In Shaping WordPress Themes en Thu, 09 Feb 2012 04:29:55 +0000 helgatheviking on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-22683 Sat, 13 Aug 2011 13:14:02 +0000 helgatheviking 22683@http://themeshaper.com/forums/ the code should probably not say path as in this instance it actually means URL and not absolute path. your_function like ALL functions you find on these boards go in your CHILD'S functions.php <pre><code>define('CHILDTHEME', get_bloginfo('stylesheet_directory')); add_action('wp_head','your_function',1); function your_function(){ if(!is_admin()){ /* to prevent the loading of your stylesheet in the admin*/ if(is_front_page()){ /* to load a stylesheet for your front page */ wp_enqueue_style('front_style', CHILDTHEME . '/front-style.css'); }else{ wp_enqueue_style('normal_style', CHILDTHEME . '/style.css'); } } }</code></pre> the caps CHILDTHEME is a php constant. i always use constants for the different folders in my theme so that if i ever change the file structure i only need to change the reference in one place. but you aren't obliged to use it. if you are still confused on the subject please read: programming.thematic4you.com/2010/01/how-to-use-a-different-layout-for-a-certain-page/ idk if there is a benefit, per se, but doing everything via functions is just sort of the child-theme approach. it keeps everything centralized. akmiecik on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-22682 Sat, 13 Aug 2011 11:44:48 +0000 akmiecik 22682@http://themeshaper.com/forums/ your_function = function.php in child template folder? could you give examples of the following: front_style path to your stylesheet normal_style path to your other stylesheet Thanks oh, is there a benefit to doing the function vs. a unique template with the CSS hardcoded as vivalet did? <blockquote> I created a template that called <?php get_header('alt') ?> and made a file called header-alt.php this is a copy of the thematic header.php but I made the following change. I commented out the call to thematic_create_stylesheet(); and hard coded the alternate style sheet. //thematic_create_stylesheet(); ?> <link rel="stylesheet" type="text/css" href="http://www.website.com/bk/wp-content/themes/thematicpowerblog/style-alt.css" /> <?php </blockquote> helgatheviking on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-22676 Sat, 13 Aug 2011 05:00:52 +0000 helgatheviking 22676@http://themeshaper.com/forums/ that's a bit vague. what do you want to know? akmiecik on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-22667 Sat, 13 Aug 2011 01:31:49 +0000 akmiecik 22667@http://themeshaper.com/forums/ Would it be possible to get a bit more instruction on the code? Thanks eduplessis on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-20748 Thu, 21 Apr 2011 14:06:10 +0000 eduplessis 20748@http://themeshaper.com/forums/ for loading different stylesheet per page <pre><code>add_action('wp_head','your_function',1); function your_function(){ if(!is_admin()){ /* to prevent the loading of your stylesheet in the admin*/ if(is_front_page()){ /* to load a stylesheet for your front page */ wp_enqueue_style('front_style', 'path to your stylesheet'); }else{ wp_enqueue_style('normal_style', 'path to your other stylesheet'); } } }</code></pre> blitz on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-7182 Thu, 15 Oct 2009 17:05:07 +0000 blitz 7182@http://themeshaper.com/forums/ Really interesting and useful post. However… Not a problem to do with the code at all, but a quirk I've found. I need to have a different background jpeg on each page. The graphic is attached to #main - which is in the header.php. I used the <?php get_header('alt') ?> (thanks vivalet) code to pull up a new header and tried two things, #mainalt, (and a style for this) which did not work - well it did, but the background image only repeats horizontally! and also #main with an alt class. This did not work either. Anyone come across this - or a way to use a custom background tile in the #main (alternative template) tag? vivalet on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-4881 Thu, 02 Jul 2009 16:41:37 +0000 vivalet 4881@http://themeshaper.com/forums/ My solution to this was the following: I created a template that called <?php get_header('alt') ?> and made a file called header-alt.php this is a copy of the thematic header.php but I made the following change. I commented out the call to thematic_create_stylesheet(); and hard coded the alternate style sheet. //thematic_create_stylesheet(); ?> <link rel="stylesheet" type="text/css" href="http://www.website.com/bk/wp-content/themes/thematicpowerblog/style-alt.css" /> <?php In the future would it be possible for thematic_create_stylesheet to accept an argument so that it could call style-alt.css for instance a special header-alt.php could call thematic_create_stylesheet('alt') and then the file style-alt.css would be called instead of style.css thanks! walkingpaper on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-2292 Fri, 13 Mar 2009 20:55:50 +0000 walkingpaper 2292@http://themeshaper.com/forums/ this is great! any idea how to turn this into a CSS selector? i'd love to have two links, one loading default.css and the other loading alternative.css. PS. i went live with my thematic theme! walkingpaper . org Nick on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-2258 Thu, 12 Mar 2009 23:53:02 +0000 Nick 2258@http://themeshaper.com/forums/ Careful there Chris! ;) Chris on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-2257 Thu, 12 Mar 2009 23:50:44 +0000 Chris 2257@http://themeshaper.com/forums/ Tested with no alternate.css before.. got a none CSS display and said 'Ok .. It'll work if alternate.css is there' .. *SMACK* Nick on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-2256 Thu, 12 Mar 2009 23:50:09 +0000 Nick 2256@http://themeshaper.com/forums/ Yes! Hoorah! You did it. Here is the fixed code for posterity: To load a custom CSS stylesheet on a single page: <pre><code>function my_stylesheet($content) { global $wp_query; if (is_page()) { $pageID = $wp_query->post->ID; if ($pageID == '332') { $content = "\t"; $content .= "<link rel=\"stylesheet\" type=\"text/css\" href=\""; $content .= get_bloginfo('stylesheet_directory') . "/alternate.css"; $content .= "\" />"; $content .= "\n\n"; } } return $content; } add_filter ('thematic_create_stylesheet', 'my_stylesheet')</code></pre> To load a custom CSS stylesheet on multiple pages: <pre><code>function my_stylesheet($content) { global $wp_query; if (is_page()) { $pageID = $wp_query->post->ID; $pagelist = array('332','333','334'); if (in_array($pageID, $pagelist)) { $content = "\t"; $content .= "<link rel=\"stylesheet\" type=\"text/css\" href=\""; $content .= get_bloginfo('stylesheet_directory') . "/alternate.css"; $content .= "\" />"; $content .= "\n\n"; } } return $content; } add_filter ('thematic_create_stylesheet', 'my_stylesheet');</code></pre> Chris on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-2255 Thu, 12 Mar 2009 23:46:52 +0000 Chris 2255@http://themeshaper.com/forums/ Now I had such a moment .. please change the line <pre><code>$content .= STYLESHEETPATH . '/alternate.css';</code></pre> into <pre><code>$content .= get_bloginfo('stylesheet_directory') . "/alternate.css";</code></pre> Then it should work .. just tested it with the standard Thematic CSS and the Second to None CSS for just one page .. looks great. Sorry! Cheers, Chris Nick on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-2253 Thu, 12 Mar 2009 23:35:42 +0000 Nick 2253@http://themeshaper.com/forums/ So, the function works only half way... The custom style sheet will not load. Here is my code: <pre><code>function my_stylesheet($content) { global $wp_query; if (is_page()) { $pageID = $wp_query->post->ID; $pagelist = array('3','19','20'); if (in_array($pageID, $pagelist)) { $content = "\t"; $content .= "<link rel=\"stylesheet\" type=\"text/css\" href=\""; $content .= STYLESHEETPATH . '/launchpage.css'; $content .= "\" />"; $content .= "\n\n"; } } return $content; } add_filter ('thematic_create_stylesheet', 'my_stylesheet');</code></pre> Don't I need to define the stylesheet location? Nick on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-2249 Thu, 12 Mar 2009 23:09:04 +0000 Nick 2249@http://themeshaper.com/forums/ Ok, so it is overriding the CSS, but not loading my custom style-sheet. Any thoughts? Chris on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-2247 Thu, 12 Mar 2009 23:02:41 +0000 Chris 2247@http://themeshaper.com/forums/ @Tom .. if you have only a couple of changes for a certain page or post or whatever the solution we described in the <a href="http://themeshaper.com/forums/topic/making-a-skittlescom-style-page-template">Skittles.com</a> thread is perfect. If you want to implement a more complex style change or want to run a certain page with a completely different style it might be better to use the filter as described above. Cheers, Chris Chris on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-2246 Thu, 12 Mar 2009 22:55:32 +0000 Chris 2246@http://themeshaper.com/forums/ Ok changed it a bit ;) <pre><code>function my_stylesheet($content) { global $wp_query; if (is_page()) { $pageID = $wp_query->post->ID; $pagelist = array('332','333','334'); if (in_array($pageID, $pagelist)) { $content = "\t"; $content .= "<link rel=\"stylesheet\" type=\"text/css\" href=\""; $content .= STYLESHEETPATH . '/alternate.css'; $content .= "\" />"; $content .= "\n\n"; } } return $content; } add_filter ('thematic_create_stylesheet', 'my_stylesheet');</code></pre> Tested and approved. Cheers, Chris freedimensional on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-2242 Thu, 12 Mar 2009 22:44:19 +0000 freedimensional 2242@http://themeshaper.com/forums/ Will this process work even for those of us using child themes? Have just tried as a solution to my <a href="http://themeshaper.com/forums/topic/making-a-skittlescom-style-page-template">Skittles.com</a> problem. It ain't happening for me! Thanks a lot! Tom Nick on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-2241 Thu, 12 Mar 2009 22:14:13 +0000 Nick 2241@http://themeshaper.com/forums/ Great! Thanks for that. Can I define a list of pages that will load the alternate CSS? Suppose: <code>if ($pageID == '332,333,334') {</code> Would that work? Chris on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-2240 Thu, 12 Mar 2009 21:31:02 +0000 Chris 2240@http://themeshaper.com/forums/ Don't know if this will be such a moment :-) Ok try this one: <pre><code>function my_stylesheet($content) { global $wp_query; if (is_page()) { $pageID = $wp_query->post->ID; if ($pageID == '332') { $content = "\t"; $content .= "<link rel=\"stylesheet\" type=\"text/css\" href=\""; $content .= STYLESHEETPATH . '/alternate.css'; $content .= "\" />"; $content .= "\n\n"; } } return $content; } add_filter ('thematic_create_stylesheet', 'my_stylesheet')</code></pre> Copy & paste this snippet into your child theme's functions.php. Change the page-id to the one of your special page and change the name of the CSS file. If a standard page is loaded the style.css will be loaded. if your special page is loaded only the alternate.css will be loaded. Cheers, Chris Nick on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-2239 Thu, 12 Mar 2009 21:02:34 +0000 Nick 2239@http://themeshaper.com/forums/ Yes, that is exactly what I am trying to do. I should know how to do it...but have never needed to, so I don't know how. :) I am anticipating a forehead smack moment here... Chris on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-2238 Thu, 12 Mar 2009 20:57:45 +0000 Chris 2238@http://themeshaper.com/forums/ Hey Nick, would it be an option to have your standard style.css and load and alternative.css just for this one page? Means instead of loading the style.css you would load alternative.css for the one page that is different from the others. Cheers, Chris Nick on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-2237 Thu, 12 Mar 2009 20:47:44 +0000 Nick 2237@http://themeshaper.com/forums/ Hmm...I am having issues with the imported CSS layout overriding the #container I am trying to style. Can I drop the imports for one page template, and have the imports for the rest of the pages? Nick on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-2233 Thu, 12 Mar 2009 17:52:59 +0000 Nick 2233@http://themeshaper.com/forums/ Ok thanks...That helps a lot Ian Stewart on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-2232 Thu, 12 Mar 2009 17:52:48 +0000 Ian Stewart 2232@http://themeshaper.com/forums/ Check out the body tag for my theme store page on ThemeShaper: <body class="wordpress y2009 m03 d12 h12 slug-theme-store page pageid-1268 page-author-ian-stewart page-template page-template-shop-php loggedin mac firefox ff3"> If I want to target CSS edits for that page template (shop.php) I can modify CSS like this: <pre><code>a { color:blue; }</code></pre> by using something like this: <pre><code>.page-template-shop-php a { color:red; }</code></pre> So instead of having blue anchors, like all my other pages, pages using the shop.php template will have red anchors. Nick on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-2231 Thu, 12 Mar 2009 17:31:09 +0000 Nick 2231@http://themeshaper.com/forums/ Sorry, you lost me there. Long hand please... :) Ian Stewart on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-2230 Thu, 12 Mar 2009 17:20:23 +0000 Ian Stewart 2230@http://themeshaper.com/forums/ you can do this by targeting the body class for that template: .your-template-php. Nick on "How do I define a custom CSS file per page template?" http://themeshaper.com/forums/topic/how-do-i-define-a-custom-css-file-per-page-template#post-2229 Thu, 12 Mar 2009 16:59:14 +0000 Nick 2229@http://themeshaper.com/forums/ I am setting up a site that requires a custom page template including a completely custom CSS styling for that one page. How do I define that custom CSS within that one template? I need to override my main CSS styling and load a totally different styling. I think there is a way to do this...but how?