Title: enqueue child theme CSS last Last modified: August 28, 2017 --- # enqueue child theme CSS last * Resolved [tomdiv](https://wordpress.org/support/users/tomdiv/) * (@tomdiv) * [8 years, 10 months ago](https://wordpress.org/support/topic/enqueue-child-theme-css-last/) * Hello. My goal is to understand how to enqueue a child them style sheet so that it loads last, after all other style sheets are loaded. Including plugin etc style sheets that I may install in the future. I don’t mind, in fact I think I prefer if the parent theme is loaded before bootstrap and other styles, but I really want my child theme style sheet to load last. * So, I tried using what my research said was the proper way in my child theme functions file: * ``` add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_parent'); function my_theme_enqueue_parent() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); } ``` * Now what I see from viewing the source code is that this not only enqueues the parent style but also the child style. * So this is the beginning of my confusion; because I don’t see any reference to the child theme in the added code. * So my first question is, does this wp_engueue_style, with parent-style as an arguement, automatically also enqueue the child theme style sheet? Is this part of the core functionality? Or is it possible that the theme (Start) itself is doing this? Start is a simple “starter theme”. The functions.php is only 131 lines long and I don’t see anything in there about also enqueing the child css * I have searched a lot on the forums and while this topic is very popular, I can’t find anything that addresses this particular question. Viewing 13 replies - 1 through 13 (of 13 total) * [Konstantinos Xenos](https://wordpress.org/support/users/xkon/) * (@xkon) * [8 years, 10 months ago](https://wordpress.org/support/topic/enqueue-child-theme-css-last/#post-9338752) * Hello, * I’ll try to explain things as they are ( If I understood the question correctly as I got confused at some point ). * The `'parent-style'` is just a unique identifier that helps you when you want to ‘order’ what loads when in simple words. * The difference of ‘parent’ and ‘child’ theme is the * `get_template_directory_uri()` , this equals the parent folder * and `get_stylesheet_directory_uri()` this would equal the child folder. * To be able to have an order of how the css are loaded then you have to tell your css after which one you would like it to load. For example * ``` function test_enqueue_styles() { // parent style ( this loads the css from the main folder ) wp_enqueue_style('parent-style', get_template_directory_uri() .'/style.css'); // child style ( this loads the css from the child folder after parent-style ) wp_enqueue_style('child-style', get_stylesheet_directory_uri() .'/style.css', array('parent-style')); } add_action('wp_enqueue_scripts', 'test_enqueue_styles'); ``` * That being out of the way one easy way to load your css ‘last’ and after all plugins would be to view your source code and find the identifier of the plugin you want your css to load after and change the `array('parent-style')` accordingly. * I don’t know how the theme you are referring to is built or if it had a child theme bundled but the above way is of what I know the standard ( if not the only) way. * Best regards, Konstantinos * Thread Starter [tomdiv](https://wordpress.org/support/users/tomdiv/) * (@tomdiv) * [8 years, 10 months ago](https://wordpress.org/support/topic/enqueue-child-theme-css-last/#post-9338838) * Well you really helped me out by clearing up this for me * > get_template_directory_uri() , this equals the parent folder > and get_stylesheet_directory_uri() this would equal the child folder. * That explains a lot of things for me, I suspected as much but hadn’t truly tested and figured out that concept. * But that being considered, if you look at my original question, the code I posted is the ONLY thing added (in my child theme functions.php), it doesn’t reference the child theme, or the child-style, or get_stylesheet_directory_uri() Yet the child theme css is also being loaded. So is there something in wordpress core that recognizes wp_enqueue_style( ‘parent-style’… and then causes the the child theme style sheet to be loaded? * (Oh, and the theme Start is a very simple starter thing to help learn to develop themes, etc. So I had to create my own child theme and it is not “bundled” or rely on plug-ins etc. ) - This reply was modified 8 years, 10 months ago by [tomdiv](https://wordpress.org/support/users/tomdiv/). * [Konstantinos Xenos](https://wordpress.org/support/users/xkon/) * (@xkon) * [8 years, 10 months ago](https://wordpress.org/support/topic/enqueue-child-theme-css-last/#post-9338902) * Hey sorry for the late reply I was omw to the office. * Is this the theme we are talking about? [https://wordpress.org/themes/start/](https://wordpress.org/themes/start/) * So I can scrawl through the code and solve the mysteries 🙂 . * By the way as you have made your own child theme we should somehow check your code as well. * Best regards, Konstantinos - This reply was modified 8 years, 10 months ago by [Konstantinos Xenos](https://wordpress.org/support/users/xkon/). * [Konstantinos Xenos](https://wordpress.org/support/users/xkon/) * (@xkon) * [8 years, 10 months ago](https://wordpress.org/support/topic/enqueue-child-theme-css-last/#post-9338955) * Okay scratch the above and let me explain everything. * Whenever you have a theme activated WordPress will load it’s default ‘style.css’ file and only that. * That being said when you have ‘start-child’ and leave your functions.php totally empty you will see that you have the style loaded either way. * There are 2 ways of interconnecting parent + child stylesheets one is from within the .css file with [@import](https://wordpress.org/support/users/import/) and one through the WP function to enqueue it as you did in the original example. * So all you did was ‘adding’ an extra style in the queue process. * If you want to actually remove styles and re-add them wherever you want either the parent or the child you have to deregister + dequeue them first for example * ``` function test_dequeue_styles() { // this removes the original style wp_dequeue_style( 'start-style' ); wp_deregister_style( 'start-style' ); } add_action( 'wp_enqueue_scripts', 'test_dequeue_styles', 20 ); ``` * and then * ``` function test_enqueue_styles() { // parent style ( this loads the css from the main folder ) wp_enqueue_style( 'start-parent-style', get_template_directory_uri() .'/style.css', array('bootstrap') ); // child style ( this loads the css from the child folder after parent-style ) wp_enqueue_style( 'start-child-style', get_stylesheet_directory_uri() .'/style.css', array('start-parent-style') ); } add_action( 'wp_enqueue_scripts', 'test_enqueue_styles' ); ``` * This whole process will exclude your main ‘style.css’ ( in this example the start- style ) and will re-enqueue both of them right after bootstrap.css . * Note: if you use [@import](https://wordpress.org/support/users/import/) in your child style there’s no reason to re-enqueue the parent one. * This example is made on top of [https://wordpress.org/themes/start/](https://wordpress.org/themes/start/) so you can take this code put it in your functions php and check how the Source code of your theme gets adjusted to have a more clear view of what happens. * I hope this helps 🙂 * Best regards, Konstantinos * Thread Starter [tomdiv](https://wordpress.org/support/users/tomdiv/) * (@tomdiv) * [8 years, 10 months ago](https://wordpress.org/support/topic/enqueue-child-theme-css-last/#post-9338971) * Well i think with your help I’ve answered my own question. I removed all the code from the child theme functions.php Now only the child theme stylesheet is being loaded. so therefore, by choosing the child-theme as the theme, wordpress loads (enqueues?) the child theme style sheet. But the code added to functions. php (in the child folder) is what enqueues the parent style (sheet). * So in order to get the child theme style sheet to truly load last, I am going to have to de-enqueue it and the re-enqueue it in functions.php; i was seeing if it was possible to get around that by merely not enqueing it in the first place but wordpress is already doing that. So i have to figure out how wordpress is enqueing it to de-enqueue it? (what exactly it is calling it and what priority does it have?). As oppossed to the parent theme css, which I am actually the one enqueing it when i put the code in myself (sort of like step 3 when creating a child theme) * One thing that is confusing is the source code that is written when WP enqueues the child style sheet is * `` * and it’s giving it the id start-style-css when it is actually the start-CHILD- style-css, little things like that make it harder to learn all these concepts. * edit- oh darn it took me so long to write this you had replied again, i haven’t read your last post yet - This reply was modified 8 years, 10 months ago by [tomdiv](https://wordpress.org/support/users/tomdiv/). * [Konstantinos Xenos](https://wordpress.org/support/users/xkon/) * (@xkon) * [8 years, 10 months ago](https://wordpress.org/support/topic/enqueue-child-theme-css-last/#post-9338995) * Your parent theme has a function that says in plain words ‘load start-style css’ when you create a child theme wordpress only changes the file structure but not the name as there’s no reason to do it by default. * It is doing it by that as the usual way is to make an [@import](https://wordpress.org/support/users/import/) statement inside your child css so the actual ID doesn’t have to change really. * The only way to change the IDs is to dequeue and reenqueue like I’ve showed you above ( or at least that’s how I do it ). * Best regards, Konstantinos * Thread Starter [tomdiv](https://wordpress.org/support/users/tomdiv/) * (@tomdiv) * [8 years, 10 months ago](https://wordpress.org/support/topic/enqueue-child-theme-css-last/#post-9339007) * Yes you have really explained it well, I still have to absorb understanding things like sometimes the reference is “start-style” and sometimes the reference is “ start-parent-style” and “start-child-style”. The latter are clear what it means but “start-style” isn’t always clear (to me) which one is being referred to. But I think I will be able to go play with it and make it work. - This reply was modified 8 years, 10 months ago by [tomdiv](https://wordpress.org/support/users/tomdiv/). * [Konstantinos Xenos](https://wordpress.org/support/users/xkon/) * (@xkon) * [8 years, 10 months ago](https://wordpress.org/support/topic/enqueue-child-theme-css-last/#post-9339019) * ‘start-style’ is the name that was given to style.css by the Start template. * In the Start template functions.php file you will find this * ``` function start_scripts() { wp_enqueue_style( 'start-style', get_stylesheet_uri() ); [more code continues here] ``` * That’s how the themes author named his main stylesheet. * So to have a clear explanation I changed the parent ‘start-style’ to ‘start-parent- style’ and ‘start-child-style’ your child themes style when I requeue them in your functions.php to have a better view of it. * Best regards, Konstantinos * [Konstantinos Xenos](https://wordpress.org/support/users/xkon/) * (@xkon) * [8 years, 10 months ago](https://wordpress.org/support/topic/enqueue-child-theme-css-last/#post-9339038) * By the way if your original question was answered don’t forget to mark the topic as resolved to keep the forums clean and tidy :D. * If you have any more questions feel free to ask! * Best regards, Konstantinos * Thread Starter [tomdiv](https://wordpress.org/support/users/tomdiv/) * (@tomdiv) * [8 years, 10 months ago](https://wordpress.org/support/topic/enqueue-child-theme-css-last/#post-9344810) * Well I am getting close, I have to play with it a bit more. I still want the parent-style to load as the theme author intended it (before bootstrap and 2 js scripts} and have the child style sheet load last after everything. I believe I can figure it out with the info so far. * One trick I have waiting to use is that in other forums (i have researched this a lot) some peoples questions were solved by setting the priority to 999 [a really high number that is probably higher than any other priorities that have been set]; and then in another forum it was said that better to use PHP_INT_MAX * I noticed in your code you de-enqueued and de-registered the styles, and then enqueued them but I don’t see them being registered. But i don’t want to derail this by talking about registering that would be another topic. * [Konstantinos Xenos](https://wordpress.org/support/users/xkon/) * (@xkon) * [8 years, 10 months ago](https://wordpress.org/support/topic/enqueue-child-theme-css-last/#post-9345009) * The wp_enqueue_style() works as a register as well. If you give it a full source like: `wp_enqueue_style( 'start-parent-style', get_template_directory_uri() .'/ style.css', array('bootstrap') );` it will also register this style. If you simply tell it what to load i.e. : `wp_enqueue_style( 'start-parent-style' );` you must have that registered before at some point. * To answer your question on queuing you can change the name to ‘start-style’ and just leave the array() empty. If bootstrap is set to load after ‘start-style’ by the original author then your ‘parent’ css will be first. * In the example I just made everything to load after bootstrap so you can understand what the array() does. * If you check your source code you can always see what is the loading order from the themes author and simply change the array() value to make it load after the last item. That’s all actually no need for ‘crazy’ ways like php_int_max etc. WordPress can already natively do that. * Best regards, Konstantinos - This reply was modified 8 years, 10 months ago by [Konstantinos Xenos](https://wordpress.org/support/users/xkon/). * Thread Starter [tomdiv](https://wordpress.org/support/users/tomdiv/) * (@tomdiv) * [8 years, 10 months ago](https://wordpress.org/support/topic/enqueue-child-theme-css-last/#post-9348125) * Well thanks for helping to learn about the array (arguement? would that be the correct term?) I took that part out because I just want the child style sheet to load last, even after other plugs-in styles that I have not even installed yet. This way I don’t have to go back and (possibly have to) change it everytime I install a plug-in. * Here is the full code in case anyone else stumbles upon this with the same question * ``` function test_dequeue_styles() { // this removes the original style wp_dequeue_style( 'start-style' ); wp_deregister_style( 'start-style' ); } add_action( 'wp_enqueue_scripts', 'test_dequeue_styles', 20 ); function test_enqueue_styles() { // parent style ( this loads the css from the main folder ) wp_enqueue_style( 'start-parent-style', get_template_directory_uri() .'/style.css' ); } add_action( 'wp_enqueue_scripts', 'test_enqueue_styles' ); function new_enqueue_styles() { // child style ( this loads the css from the child folder after parent-style ) wp_enqueue_style( 'start-child-style', get_stylesheet_directory_uri() .'/style.css' ); } add_action( 'wp_enqueue_scripts', 'new_enqueue_styles', 999 ); ``` * I noticed if I don’t use 20 as priority for de-enqueing then I end up with the child sheet being loaded twice, but with different IDs. * One key to it all was that I just had to re-enqueue the parent and child style using two different functions and action hooks rather than trying to do it with one function, so I could set a different priority * I really did learn a lot from your help, thank you very much. Will leave this question open for just a little bit longer in case there are any other comments. - This reply was modified 8 years, 10 months ago by [tomdiv](https://wordpress.org/support/users/tomdiv/). - This reply was modified 8 years, 10 months ago by [tomdiv](https://wordpress.org/support/users/tomdiv/). * Thread Starter [tomdiv](https://wordpress.org/support/users/tomdiv/) * (@tomdiv) * [8 years, 10 months ago](https://wordpress.org/support/topic/enqueue-child-theme-css-last/#post-9359304) * OK! Viewing 13 replies - 1 through 13 (of 13 total) The topic ‘enqueue child theme CSS last’ is closed to new replies. ## Tags * [child theme css](https://wordpress.org/support/topic-tag/child-theme-css/) * In: [Developing with WordPress](https://wordpress.org/support/forum/wp-advanced/) * 13 replies * 2 participants * Last reply from: [tomdiv](https://wordpress.org/support/users/tomdiv/) * Last activity: [8 years, 10 months ago](https://wordpress.org/support/topic/enqueue-child-theme-css-last/#post-9359304) * Status: resolved ## Topics ### Topics with no replies ### Non-support topics ### Resolved topics ### Unresolved topics ### All topics