I'm trying to setup a child theme the "proper way", according to Wordpress' new recommended approach.
I watched this video which explained that in January 2016 Wordpress changed their best practice approach for setting up a Wordpress theme. In a nutshell, we should no longer use @import in the child's css file. Instead, we should use the functions.php file to properly enqueue needed files.
What I don't understand is how to properly do this with Salient, since it enqueues multiple css files (instead of just one like some themes). I'll explain.
Wordpress's codex site explains the process, and shows two main examples. According to their text about enqueuing the css, their first example only works if the parent theme uses only one css file. See my first screenshot attachment (1-wordpress_instructions.png)for what I'm noticing and what I think its telling us we should with regard to Salient.
When I inspect Salient's functions.php file, I see that it is enqueuing several css files. See my second screenshot attachement (2-salient_functions_php_many_enqueue.png) for what I'm noticing and what I think this means with regard to how we should be enqueuing files in our child's functions.php file.
I have inspected the "salient-child" directory that came with my Salient download. It looks like it is trying to use the new Wordpress approach, except that it seems like it should be enqueuing several other css files (per the instructions shown in the first attachment, and what I'm seeing in the second screenshot). See my third screenshotattachment (3-salient_child_theme_code.png).
The way I would understand it is that I would need to enqueue several more Salient (parent theme) css files, and then enqueue my corresponding child css files.
So what all Salient (parent theme) css files do I need to enqueue in the child's functions.php?? Can someone provide a complete solution for how we should setup the child theme using Wordpress' new best practice? I'd like to know not just a basic "this should usually work" solution, but a complete solution that I can build upon. Thanks!
P.S. Just for some context, although I don't know a lot about Wordpress yet, I am an experience software/web developer, in case that helps with our communication.
Did you install the Child Theme and check whether its working or not ?. The Child Theme Provided in the Salient Theme Download Package works 100% and we have not had any complaints about it .
As for your question to enqueue the other css files, its not needed for it to work correctly since the Parent Theme is already enqueing it and the Child Theme style.css is meant to add additional custom css.
Also if you just want to add custom css you dont need a Child Theme Altogether as we have a Custom CSS Box in Salient Theme Options Panel -> General Settings ->CSS/Script Related Section which saves the css code to the Database so even if you update the Theme folder files the css code is not lost.
I did try using the child theme that was provided in the download. I'll comment on some specifics regarding being able to override parent theme styles in just a bit.
But first, let me respond to your general question about whether it is working or not. I have a cursory check with the child theme using the settings from the "service" demo that I imported. The basics of the parent theme seem to be working... at least on a couple of desktop browsers that I have on my machine.
BUT, this brings me to why I asked for the proper way to do this:
I don't know the ins and outs of the theme are well enough to know what the expected behavior is. So it is hard for me to know what all I should be inspecting to verify that I haven't broken any of the parent styles. E.g., what elements do I need to add to a page to see they still work? What settings should I turn on to see what still works? Etc.
I don't have an easy way to check the result on certain browsers, such as IE 8or mobile browsers that are different than the ones on my phone (I mention IE8 b/c see a specific stylesheet named "nextar-ie8" that I presume handles IE 8). I suppose I could try to setup one of those accounts that lets you preview how things look on several browser types, but even then it might be fairly laborious to verify things work the way they should (it would just be a lot easier to know the proper way to do it).
In short, I can't really answer the question "is it working?" very well. And when the official Wordpress instructions say...
"The following example function will only workif your Parent Theme uses only one main style.css to hold all of the css. If your child theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies."
...it makes me pretty nervous that everything will work just fine when Salient definitely has more than one style file. Can you explain this discrepancy?
------------------------------
Now let me address what I have found regarding being able to override the parent theme's styles with the child theme css.
I'm struggling with two issues/questions. First, there are several css rules being placed in a <style> element lower on the page than my child theme's css file <link>. So I can't find a way to override those styles (even with "!important", the same specificity, etc.). See screenshots "4-override_problem" and "5-override_problem".
Second it looks like other parent theme css files' <link> (such as "responsive.css") are lower on the page than my child theme's styles.css file <link>. If I need to override those styles, wouldn't the ones in the parent theme override my styles (because of this page-location issue), just like they are with the example I show in the screenshots (assuming both files had the same specificity and "!important")? The screenshot "5-override_problem" also illustrates what I am saying here.
Thank you for the Details . Have assigned the Ticket to the Developer so that he may add in a appropriate response.
As regards you getting nervous . We have not had a single report from users while they were using the Child Theme and i have been anwsering tickets since almost 2 years now :) .
Hi,
I'm trying to setup a child theme the "proper way", according to Wordpress' new recommended approach.
I watched this video which explained that in January 2016 Wordpress changed their best practice approach for setting up a Wordpress theme. In a nutshell, we should no longer use @import in the child's css file. Instead, we should use the functions.php file to properly enqueue needed files.
What I don't understand is how to properly do this with Salient, since it enqueues multiple css files (instead of just one like some themes). I'll explain.
Wordpress's codex site explains the process, and shows two main examples. According to their text about enqueuing the css, their first example only works if the parent theme uses only one css file. See my first screenshot attachment (1-wordpress_instructions.png) for what I'm noticing and what I think its telling us we should with regard to Salient.
When I inspect Salient's functions.php file, I see that it is enqueuing several css files. See my second screenshot attachement (2-salient_functions_php_many_enqueue.png) for what I'm noticing and what I think this means with regard to how we should be enqueuing files in our child's functions.php file.
I have inspected the "salient-child" directory that came with my Salient download. It looks like it is trying to use the new Wordpress approach, except that it seems like it should be enqueuing several other css files (per the instructions shown in the first attachment, and what I'm seeing in the second screenshot). See my third screenshot attachment (3-salient_child_theme_code.png).
The way I would understand it is that I would need to enqueue several more Salient (parent theme) css files, and then enqueue my corresponding child css files.
So what all Salient (parent theme) css files do I need to enqueue in the child's functions.php?? Can someone provide a complete solution for how we should setup the child theme using Wordpress' new best practice? I'd like to know not just a basic "this should usually work" solution, but a complete solution that I can build upon. Thanks!
P.S. Just for some context, although I don't know a lot about Wordpress yet, I am an experience software/web developer, in case that helps with our communication.
Hey Jason ,
Did you install the Child Theme and check whether its working or not ?. The Child Theme Provided in the Salient Theme Download Package works 100% and we have not had any complaints about it .
As for your question to enqueue the other css files, its not needed for it to work correctly since the Parent Theme is already enqueing it and the Child Theme style.css is meant to add additional custom css.
Also if you just want to add custom css you dont need a Child Theme Altogether as we have a Custom CSS Box in Salient Theme Options Panel -> General Settings ->CSS/Script Related Section which saves the css code to the Database so even if you update the Theme folder files the css code is not lost.
Hope this helps.
Best.
ThemeNectar Support Team
Hi Tahir,
I did try using the child theme that was provided in the download. I'll comment on some specifics regarding being able to override parent theme styles in just a bit.
But first, let me respond to your general question about whether it is working or not. I have a cursory check with the child theme using the settings from the "service" demo that I imported. The basics of the parent theme seem to be working... at least on a couple of desktop browsers that I have on my machine.
BUT, this brings me to why I asked for the proper way to do this:
In short, I can't really answer the question "is it working?" very well. And when the official Wordpress instructions say...
"The following example function will only work if your Parent Theme uses only one main style.css to hold all of the css. If your child theme has more than one .css file (eg. ie.css, style.css, main.css) then you will have to make sure to maintain all of the Parent Theme dependencies."
...it makes me pretty nervous that everything will work just fine when Salient definitely has more than one style file. Can you explain this discrepancy?
------------------------------
Now let me address what I have found regarding being able to override the parent theme's styles with the child theme css.
I'm struggling with two issues/questions. First, there are several css rules being placed in a <style> element lower on the page than my child theme's css file <link>. So I can't find a way to override those styles (even with "!important", the same specificity, etc.). See screenshots "4-override_problem" and "5-override_problem".
Second it looks like other parent theme css files' <link> (such as "responsive.css") are lower on the page than my child theme's styles.css file <link>. If I need to override those styles, wouldn't the ones in the parent theme override my styles (because of this page-location issue), just like they are with the example I show in the screenshots (assuming both files had the same specificity and "!important")? The screenshot "5-override_problem" also illustrates what I am saying here.
Thanks a bunch for your help!
Hey Again,
Thank you for the Details . Have assigned the Ticket to the Developer so that he may add in a appropriate response.
As regards you getting nervous . We have not had a single report from users while they were using the Child Theme and i have been anwsering tickets since almost 2 years now :) .
Best.
ThemeNectar Support Team
Hello,
How did this ticket become "closed"? I haven't heard anything from the developer