36 Responses

  1. Tomas M.
    Tomas M. Published |

    There is also an alternative approach – provide users with barebones child theme template, where everything is setup according to 2nd (“new”) method.

    This way a beginner user is covered from having to mess with functions.php just to include parent style sheet, but users who know what they are doing, will have everything in one place where they can also include additional style sheets following the same example.

    At least that’s the approach I’m using for my themes.

    Reply
    1. Tomas M.
      Tomas M. Published |

      After thinking some more about this, I feel that your new method has another “problem”: users would have to be educated about the existence of this (that parent style sheet will be included automatically).

      But I suspect, that users, who found theme in WP.org repository, would just go and use @import without thinking.

      Do you need to provide some safeguard against it? :-/

      Reply
  2. Morten Rand-Hendriksen
    Morten Rand-Hendriksen Published |

    The solution you present here is nice and clean and easy to understand. I might use it for my own themes moving forward. My reason for writing the article was the confusion caused by the new recommendations and how these recommendations often clashed with how themes are wired together. I saw it as a documentation problem caused by unclear specifications. However, after a lot of conversations and experimentation I’m realizing the issue isn’t really a documentation problem but rather a combination of missing or unclear standards and a general disconnect between the idea of simple child themes and the implementation of styles in parent themes.

    Looking at this from a distance the solution seems clear: Establish either a standardized method for implementing stylesheets in themes like you have done, or establish a standard labelling convention for the leading parent theme stylesheet (not always style.css) like I proposed in my article.

    The crux of the problem looks to me to be that for parent themes there is a lack of clear guidelines and established standards while the code examples for how to build child themes assumes there is consistency and established standards for the same things. The @import approach never actually worked all that well, but it masked the problems because existing stylesheets that were enqueued in the parent theme would still load. Once the @import approach was replaced by a proper enqueue model, that accidental inheritance disappeared and people started running into trouble.

    I’m really excited to see how this plays out and whether we can find a compromise. There are discussions going on over in the _s GitHub repo about the same thing and the Documentation team are discussing in Slack. Fun fun fun.

    Reply
  3. [WordPress] Resource – Loading Parent Styles for Child Themes | Blog dot CreatingDrew
  4. BigWhale
    BigWhale Published |

    I started using Compass and SCSS/SASS. Parent theme style is in SCSS. When working on a child theme you simply import parents style, override whatever you want to override, and compile the whole thing into CSS. Avoid server side PHP processing at all costs. 🙂

    Reply
  5. Fränk Klein
    Fränk Klein Published |

    I agree that getting rid of the @import is a good idea, however I’m not a fan of this approach, for several reasons.

    The biggest reason is that this tries to solve a support and education issue with technical means.

    The issue at hand is that creating child themes is difficult for users that are inexperienced with web development. So we try to solve this by taking care of loading the child theme’s styles.

    But this assumes that loading the styles is the most difficult part of it all. Which I disagree with, as for me clearly logging into the site (usually via FTP), creating the folder for the child theme and creating the style.css file with the right header is the hard part.

    If users have trouble creating child themes, offer a ZIP of a child theme for download. This will take care of the hurdle of creating the folder and style.css.

    Offer documentation on how to do this. Nobody knows how to do anything, until they do it. We shouldn’t shy away from teaching users what they need to know.

    But more importantly, child themes are not always the best solution. If users want to work with CSS and not change any template files, I always recommend Jetpack’s Custom CSS module.

    You don’t even need to use Jetpack, as I assume that there are other plugins like that out there. But this allows the user to customize the theme easily without worrying about all the details of creating a child theme.

    Furthermore, I’m not a fan of using conditionals in the parent theme to do this. The child theme should decide what it wants to do, not the parent theme. This is a matter of isolating the code.

    I feel that including this code makes an assumption on the part of the user of how this child theme deals with CSS. Which it shouldn’t.

    Reply
  6. Brad Dalton
    Brad Dalton Published |

    Looks like a good solution using the is_child_theme() conditional tag to avoid loading from the child theme.

    What do you think about the way its done in Genesis?

    $version = defined( 'CHILD_THEME_VERSION' ) && CHILD_THEME_VERSION ? CHILD_THEME_VERSION : PARENT_THEME_VERSION;
    
    $handle  = defined( 'CHILD_THEME_NAME' ) && CHILD_THEME_NAME ? sanitize_title_with_dashes( CHILD_THEME_NAME ) : 'child-theme';
    
    wp_enqueue_style( $handle, get_stylesheet_uri(), false, $version );
    Reply
  7. Sami Keijonen
    Sami Keijonen Published |

    Do you see any negative effects if I do it in this way around.

    /* Enqueue parent theme styles. */
    
    wp_enqueue_style( 'parent-style', trailingslashit( get_template_directory_uri() ) . 'style.css', array(), THEME_VERSION );
    
    /* Enqueue child theme styles. */
    
    if ( is_child_theme() ) {
    
    wp_enqueue_style( 'child-style', get_stylesheet_uri(), array(), null );
    
    }

    This way I can put theme version number in parent theme style.css and “re-fresh” it when there is new update.

    Reply
  8. This Week in WordPress: Automattic Acquihires and Big Web Host Survey Results - WPMU DEV
  9. Pieter Goosen
    Pieter Goosen Published |

    Hi Justin

    An issue was raised on wordpress.stackexcange.com that this method loads the child theme main stylesheet twice. The child main stylesheet is automatically loaded after the parent stylesheet, so it is not necessary to enqueue the child main stylesheet

    You can have a look at this post . I have also updated the codex accordingly

    Reply
  10. Al
    Al Published |

    quote from above “get_stylesheet_uri() should always be used for the active theme.”

    I know this seems to be accepted practice but I am having difficulties trying to find this recommendation in the Codex, I mention this only because on the Codex page for Child Themes, they show an example where the parent theme uses get_template_directory_uri() and then get_stylesheet_uri() in the child theme, and this method certainly tests fine.

    why not just use get_template_directory_uri() to load in the style sheet in a theme?

    Al

    Reply
  11. This Week in WordPress: Automattic Acquihires and Big Web Host Survey Results | EU ASIA Economic
  12. Al
    Al Published |

    OK, will look at that theme then.

    Al

    Reply
  13. Shapeshifter 3
    Shapeshifter 3 Published |

    Justin,

    Mr. Fränk Klein mentioned approx. 3 weeks ago that he sometimes recommends Jetpack’s Custom CSS module. I am currently using the self-hosted version of the Kelly Theme by Automattic, and I just installed the Jetpack Plugin to try out the CSS module and Photon. I have several questions for you:

    IF, I stick with the Custom CSS module, WHERE are my changes stored? On WordPress.com’s server, or in my own self-hosted installation? If the answer is on WordPress.com’s server and I move my site, can I move my changes? If, WordPress.com keeps all of my CSS changes, wouldn’t I be better off NOT using the JetPack CSS Module?

    I probably should have asked this question on the Jetpack Support Forum, but you always seem to have the best answers.

    Reply
  14. Shapeshifter 3
    Shapeshifter 3 Published |

    An Update to my perceived dilemma:

    I chickened out and uninstalled Jetpack after reading most of its Support Forum Topics. I might change my mind in the future but for right now, it seems like WordPress.com has too much control over a website owner’s images and social identity.

    I like the concept of independence, even though I might suffer for it with less web traffic. I’ll put some more thought into it later on. Here’s how I arrived at this conclusion: https://wordpress.org/support/topic/where-are-my-css-and-php-file-changes-saved ?

    Reply
  15. Darragh McCurragh
    Darragh McCurragh Published |

    “Load all the styles via the parent theme.” Ok, got that. What I see as still critical is that somehow a user must add values in there, don’t the? How about a simple txt file in a folder (“main”) that, like robots.txt contains a few lines the user can add and which contains the names (and places) of child css sheets the user wants to implement (at always their risk as to css syntax used in them) and which is read by a function in the PARENT that you provide ALWAYS which goes like this: “check if a css-child-include.txt is there. IF found, read it line by line, each line being the name, if not in the same folder, the location of a child theme. That way, the user never has to work with any .php file not the theme files. And the script could write an error msg. [in the WP dashboard] if the user messed up.

    Reply
  16. Muhammad Faisal
    Muhammad Faisal Published |

    I load all the CSS files in parent theme using get_template_directory_uri() and then hook it with wp_enqueue_scripts having default priority (10).

    function ms_frontend_styles() {

    if ( !is_admin() ) {

    // Register
    wp_register_style('style', get_template_directory_uri() . '/style.css');

    // Enqueue
    wp_enqueue_style('style');

    }

    }

    add_action('wp_enqueue_scripts', 'ms_frontend_styles');

    After this i use following code in child theme’s functions.php to load child theme’s styles.

    function ms_child_frontend_styles() {

    // Register
    wp_register_style( 'child-style', get_stylesheet_directory_uri().'/style.css');

    // Enqueue
    wp_enqueue_style('child-style');

    }

    add_action('wp_enqueue_scripts', 'ms_child_frontend_styles', 20);

    In this way all parent CSS files would always be loaded even if we don’t enqueue it separately in child theme. And child theme CSS file will enqueue always after parent styles has been loaded (because of higher priority value).

    Whats your take on this method?

    Reply
  17. Josh
    Josh Published |

    Thanks for this explanation and code. One question: Should my child theme functions.php file ONLY be populated with this code, or do I copy the full file from the parent and ADD this to the top?

    Reply
  18. Rick Buser
    Rick Buser Published |

    Justin – I’m an admitted WP newb of sorts. I added your code to a regularly-updated commercial theme I have and it’s working well in bringing in all the parent CSS I want before my child theme CSS changes. It’s actually working better at keeping the parent theme cascade intact in my child, vs. using the oft-quoted WP Codex-recommended code here.

    But – and correct me if I’m wrong – I will lose this code if I install a parent theme update, no? It is the parent theme’s functions.php file that I’m modifying for this, after all.

    I do understand your post is aimed at theme authors, of course. But would you still recommend people in my position using themes not built with your code by design to nevertheless implement it as the best way to ensure parent theme CSS is loaded in child themes before child theme changes?

    I guess I just have to remember to add this code back in if any theme updates are applied.

    Reply
  19. Alicia St Rose
    Alicia St Rose Published |

    Hi Justin!

    I’m speaking at WordCamp San Diego this weekend. The talk is about convincing Designers to utilize the functions.php to gain better control over their designs.

    I will promote your method in my talk.

    I also wanted to say how much I’ve appreciated the help you offered me during my formative theming years over at Theme Hybrid. I actually wouldn’t be where I am today without it.

    I haven’t been around much because I’m using Underscores to build from now. But it’s wonderful to stumble across your well thought out and spot on WordPress postings!

    Reply
  20. Francis Kim
    Francis Kim Published |

    Thanks mate, you’re a life saver. Nothing else seemed to work.

    Reply

Leave a Reply

By submitting a comment here you grant this site a perpetual license to reproduce your words and name/Web site in attribution.

Please use your real name or a pseudonym (i.e., pen name, alias, nom de plume) when commenting. If you add your site name, company name, or something completely random, I'll likely change it to whatever I want.

css.php