WP Smith

Creating WordPress & Genesis Websites Since 2010

  • Home
  • About
  • Services
  • Blog
  • Contact

Mar 15 2011

Add Custom CSS File Based on Page Type: Front Page, Home Page, Category Page, Archive Page, 404 Page, Author Page, and Page

So I found one question that I read that asked how to have a custom CSS file per page. Here's an easy way to add custom CSS files based on simple conditional logic in Genesis.

[php]
remove_action('genesis_meta', 'genesis_load_stylesheet'); //removes current stylesheet
add_action('genesis_meta','genesis_custom_css');
//get_bloginfo('stylesheet_url') is our normal style.css
function genesis_custom_css() {
if (is_category())
echo '<link rel="stylesheet" href="'.CHILD_DIR.'/css/cat_style.css" type="text/css" media="screen" />'."n";
if (is_home() || is_front_page())
echo '<link rel="stylesheet" href="'.get_bloginfo('stylesheet_url').'" type="text/css" media="screen" />'."n";
if (is_archive())
echo '<link rel="stylesheet" href="'.CHILD_DIR.'/css/arch_style.css" type="text/css" media="screen" />'."n";
if (is_author())
echo '<link rel="stylesheet" href="'.CHILD_DIR.'/css/auth_style.css" type="text/css" media="screen" />'."n";
if (is_page()) //also can take $pages=array(1,2,3); adding and elseif or else at the end.
echo '<link rel="stylesheet" href="'.CHILD_DIR.'/css/page_style.css" type="text/css" media="screen" />'."n";
if (is_404())
echo '<link rel="stylesheet" href="'.CHILD_DIR.'/css/page_style.css" type="text/css" media="screen" />'."n";
}
[/php]

Written by Travis Smith · Categorized: Genesis, Tutorials

StudioPress Premium WordPress Themes     WP Engine Managed WordPress Hosting

What can I do for you!?

Custom Development

We develop plugins by determining both business/functional and technical requirements, following WordPress development best practices, and using agile methodology to ensure you get the best solution.

Consulting

Have questions? Need a reliable developer to consult? Please contact us today!

Customized Theme

We can customize your theme or child theme, or create a child theme for you based on your needs while enhancing the performance of every individual attribute.

Customized Plugin

We can customize your plugins, extend plugins (e.g., Gravity Forms, Jetpack, Soliloquy) based on your needs ensuring security, performance, and positive business impact.

Contact Us

About Travis Smith

As a WordPress enthusiast, developer, and speaker, Travis writes about what he learns in WordPress trying to help other WordPress travelers, beginners and enthusiasts with tutorials, explanations, & demonstrations.

Comments

  1. miklb says

    March 15, 2011 at 8:36 am

    I’d be curious why one would need a separate stylesheet? Isn’t that what the body class is for?

    Reply
    • Travis Smith says

      March 15, 2011 at 8:40 am

      I am not sure and I totally agree! But that’s what the person asked for. I simply thought it was interesting.

      Reply
  2. Fbws says

    March 23, 2011 at 11:59 am

    Hi,

    I was just looking for this.

    I might be mistaken on the way of doing it (I’m really a newbie). I have education child theme, and I would like to have, just in the home page, the sidebar inside set to the left instead to right.

    I can do it changing float: right to float: left, but it changes all layout in the blog.

    My idea was to set a custom css file just for the homepage, but I don´t really know how to do it.

    I see up in the post that you have explained it, but I don´t really understand it, could you give a easier explanation, solution, or idea on how to do it.

    Thanks a lot for the support and sorry if it sounds stupid, but I have been messing around for days and I havent been able to solve it on my own.

    Reply
    • Travis Smith says

      March 23, 2011 at 1:15 pm

      Hi Fbws,

      You don’t need to change the CSS. Instead you need to force a different layout on the homepage of the Education Child Theme. To do this, locate the following code in functions.php.

      [php]// Force layout on homepage
      add_filter(‘genesis_pre_get_option_site_layout’, ‘education_home_layout’);
      function education_home_layout($opt) {
      if ( is_home() )
      $opt = ‘content-sidebar-sidebar’;
      return $opt;
      }[/php]

      and change $opt = 'content-sidebar-sidebar'; to $opt = 'sidebar-content-sidebar';

      Reply
  3. Thien says

    January 12, 2013 at 9:21 pm

    Hi Travis,
    Thanks for your useful tutorial,
    i added :
    if (is_single())
    echo ”.””;
    so “post” page can take style from original style css.

    But is there any way to style “post” page based on category?
    I thought when i use “if (is_category( id-numer ))”, “post” page will take diffirent style each categories, but it didn’t work.
    Please help me find the way out Travis.
    And sorry for my poor English.
    Thanks.

    Reply
    • Thien says

      January 12, 2013 at 9:43 pm

      I found it Travis,
      i just added another if (is_category() and change “is_category” to “in_category” and tada, its working.
      Thanks.

      Reply
  4. vajrasar says

    April 9, 2013 at 6:43 am

    A noob question – Is it mandatory to do remove action to remove loading default css and then adding the custom one? Can’t we just do the add action so that both default and custom could work?

    Second, I was putting all the custom css via simple hooks by using if-else loop and stating style elements between style tags. I know it can’t be the default approach or even suggested. But is it a bad way?

    Reply
  5. Gary Henry says

    July 2, 2014 at 11:15 am

    Travis, what conditional logic would I use to give a unique style to a page and all pages that are children of that page?

    Reply

Leave a Reply Cancel reply

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

This site uses Akismet to reduce spam. Learn how your comment data is processed.

  • Twitter
  • Facebook
  • LinkedIn
  • Google+
  • RSS

Copyright © 2025 � WP Smith on Genesis on Genesis Framework � WordPress � Log in