this is driving me insane.
child theme .css is loaded, after the parent style, but the CSS is just not applied / doesn't override, I've searched around and I see several other people complaining about this.
Enqueing the style or even adding priority to it does not solve it.
Adding the same CSS via the theme customizer, the CSS is actually applied, so the CSS itself is not the problem here.
What can I do more?!
I finally found an enque setting that solves it,
function my_theme_enqueue_styles() {
wp_register_style(
'child-style',
get_stylesheet_directory_uri() . '/style.css',
array(),
filemtime( get_stylesheet_directory() . '/style.css' )
);
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array('parent-style') );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
apparently what made a difference for me is the "array('parent-style')" value in the function atributes, must investigate it further but this was the only thing that solved it.
Have you included a dependency in the wp_enqueue_script()?
/**
* Proper way to enqueue scripts and styles
Example...
*/
function wpdocs_theme_name_scripts() {
wp_enqueue_style(
'stylesheet-name', // it will append '-css' in your source
get_template_directory_uri() . '/css/stylesheet-name.css',
array('parent-style'), // dependants (reliable on other stylesheet)
'null', // version, null or version number (1.0.1 etc)
'all' // media
);
}
add_action( 'wp_enqueue_scripts', 'wpdocs_theme_name_scripts' );
Note: if you have a version number in your enqueue then the cache could stop it from loading. Some people use date() to change the value each time it refreshes...
Related
WordPress 5.0.3
I'm reading my first book on WordPress.
I'm just creating a child theme of an existing Twenty Seventeen theme.
In the book it is said for me to create functions.php and paste this:
add_action( 'wp_enqueue_scripts', 'wpquickstart_enqueue_styles' );
function wpquickstart_enqueue_styles() {
wp_enqueue_style( 'twenty-seventeen-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'wpquickstart-style', get_stylesheet_directory_uri() . '/style.css',
array('twenty-seventeen-style') );
}
Well, being framed in it works, which is strange to me.
What bothers me is the first dash in twenty-seventeen-style.
I mean this also works (attention to twentyseventeen-style, to dashes in it):
<?php
add_action( 'wp_enqueue_scripts', 'wpquickstart_enqueue_styles' );
function wpquickstart_enqueue_styles() {
wp_enqueue_style( 'twentyseventeen-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'wpquickstart-style', get_stylesheet_directory_uri() . '/style.css',
array('twentyseventeen-style') );
}
?>
Could you tell me whether dashes are ignored? Where can I read some documentaion on this moment?
Since you're passing a second argument to wp_enqueue_style(), it's defining the ha dle as that source. If you registered a handle and source with wp_register_style() previously, then you wouldn't need to pass a source argument to wp_enqueue_style() as long as you called the handle identically.
Otherwise, since you're defining the handle and the source at the same time, it's effectively arbitrary. However if you ever need to dequeue, modify, add inline styles to, etc, your enqueued style - you'll so it by using the handle you've passed here (with or without the dashes).
Edit: To simplify a little bit:
When you write:
wp_enqueue_style( 'twentyseventeen-style', get_template_directory_uri() . '/style.css' );
You, Michael, are adding a stylesheet named twentyseventeen-style that's located at /template/style.css.
You can name it whatever you want, and it will still load. For instance, this will work as well:
wp_enqueue_style( 'blahblah-michaels-2k17-style', get_template_directory_uri() . '/style.css' );
That first argument is the name YOU are giving the stylesheet located at the second argument's location.
I manually installed my WP child theme. The stylesheet works good for most things but I keep running against the odd thing or 2 where it reverts back to the parent theme stylesheet. Right now specifically I can't adjust my footer bottom margin.
Here's the Enqueque I have in my functions.php in the child theme:
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() .
'/style.css' );
}
Any idea why my child theme is acting this way? Thanks
Seems like you might need to enqueue the child theme's style.css as well. Doing it this way sets the parent style as a dependency for the child style and makes sure they get loaded in the correct order. Read more here.
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent-style' ), wp_get_theme()->get('Version') );
}
I am trying, essentially, to add the ?ver=1.0 tag to the end of my stylesheet, which I have included in my child theme's function file (enqueued). I have read the documentation in the codex but it does not seem to be applying in the source code, and it is not updating/cache breaking as intended when I apply updates.
The stylesheet itself is being included, however, the version is not applying, so I'm somewhat at a loose end here.
This is my current code:
add_action( 'wp_enqueue_scripts', 'kl_child_scripts',11 );
function kl_child_scripts() {
wp_deregister_style( 'kallyas-styles' );
wp_enqueue_style( 'kallyas-styles', get_template_directory_uri().'/style.css', '' , ZN_FW_VERSION );
wp_enqueue_style( 'kallyas-child', get_stylesheet_uri(), array('kallyas-styles') , filemtime(get_stylesheet_directory() . '/style.css'));
N.B. It is the last line to which I am trying to apply the version. (kallyas-child). The previous line (kallyas-styles) does appear to have some form of version ZN_FW_VERSION, but that does not produce the desired effect.
filemtime(get_stylesheet_directory() . '/style.css') is intended to break cache and update the version number each time the file is saved. Edit: I do, now, believe that this code does in fact work, but the theme (as it is a pre-build) is preventing it from applying properly. I will update if and when I figure this out, hoping to get to talk to the theme developers.
The issue is that your are using filemtime which return an int and you should have a string. As you can read in the documentation :
$ver
(string|bool|null) (Optional) String specifying stylesheet
version number, if it has one, which is added to the URL as a query
string for cache busting purposes. If version is set to false, a
version number is automatically added equal to current installed
WordPress version. If set to null, no version is added. Default value:
false
so you may try this :
add_action( 'wp_enqueue_scripts', 'kl_child_scripts',11 );
function kl_child_scripts() {
wp_deregister_style( 'kallyas-styles' );
wp_enqueue_style( 'kallyas-styles', get_template_directory_uri().'/style.css', '' , ZN_FW_VERSION );
wp_enqueue_style( 'kallyas-child', get_stylesheet_uri(), array('kallyas-styles') , strval(filemtime(get_stylesheet_directory() . '/style.css')));
I added the strval that will convert the int to string
Use below code
define('ZN_FW_VERSION','1.0');
add_action( 'wp_enqueue_scripts', 'kl_child_scripts',11 );
function kl_child_scripts() {
wp_deregister_style( 'kallyas-styles' );
wp_dequeue_style( 'kallyas-styles' );
wp_enqueue_style( 'kallyas-styles', get_template_directory_uri().'/style.css', array() , ZN_FW_VERSION );
wp_enqueue_style( 'kallyas-child', get_stylesheet_uri(), array('kallyas-styles') , ZN_FW_VERSION);
}
in functions.php I added
wp_enqueue_style( 'kallyas-child',
get_stylesheet_directory_uri() . '/style.css',
array( 'kallyas-styles' ),
filemtime(__DIR__.'/style.css')
);
tested it at tmp.demos.rent-a-ninja.org
worked with divi theme
I'm using a child theme and need to enqueue the stylesheet for a slider. The css file is located in a folder in the parent theme directory, i.e. /parent-theme/css/flexislider.css
I created the child theme using a plugin which added a functions.php file to the child theme directory with the following code:
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/style.css',array('parent-style')
);
}
I assume I have to add another entry to the above function referencing flexislider.css but I'm not quite sure how to do it.
*UPDATED
Based on what you added to the question, you should be able to just add to that function and register the stylesheet. The full function would look like this:
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',get_stylesheet_directory_uri() . '/style.css',array('parent-style')
);
wp_enqueue_style('flex-slider',get_template_directory_uri() . '/css/flexislider.css');
}
I don't have much experience with child-themes, but following the model in that function, I think get_template_directory points to the parent theme and not the child theme, which you said the flexislider code is located
I know this question has been asked before on stackoverflow, but for the life of me I cannot get my conditional stylesheet to load and work for all versions of IE. I appreciate any help given in advance, it's really been getting to me, and I'm not sure what to do from here. I also tried loading the IE stylesheet in the header but that didn't seem to work either. My theme is not a child theme.
Here's my functions code:
function theme_styles() {
global $wp_styles;
wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'glyphicons_css', get_template_directory_uri() . '/css/glyphicons.css' );
wp_enqueue_style( 'glyphiconssocial_css', get_template_directory_uri() . '/css/social.css' );
wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );
/**
* Load our IE-only stylesheet for all versions of IE:
* <!--[if IE]> ... <![endif]-->
*
* NOTE: It is also possible to just check and see if the $is_IE global in WordPress is set to true before
* calling the wp_enqueue_style() function. If you are trying to load a stylesheet for all browsers
* EXCEPT for IE, then you would HAVE to check the $is_IE global since WordPress doesn't have a way to
* properly handle non-IE conditional comments.
*/
wp_enqueue_style( 'ie_css', get_template_directory_uri() . '/ie.css', array('bootstrap_css', 'main_css') );
$wp_styles->add_data( 'ie_css', 'conditional', 'IE' );
} add_action( 'wp_enqueue_scripts', 'theme_styles' );
That method works fine. Note that commented styles seem to be invisible in FF Firebug, in Chrome developer tools on the other hand they are displayed.
add_action( 'wp_enqueue_scripts', 'so27214782_wp_enqueue_scripts' );
function so27214782_wp_enqueue_scripts()
{
global $wp_styles;
wp_enqueue_style( 'so27214782_ie', get_template_directory_uri() . '/ie.css', array(), '27214782', 'all' );
$wp_styles->add_data( 'so27214782_ie', 'conditional', 'IE 6' );
}
I don't see anything that might hamper your function. Here is how twentyfourteen load the conditional stylesheet
// Load the Internet Explorer specific stylesheet.
wp_enqueue_style( 'twentyfourteen-ie', get_template_directory_uri() . '/css/ie.css', array( 'twentyfourteen-style', 'genericons' ), '20131205' );
wp_style_add_data( 'twentyfourteen-ie', 'conditional', 'lt IE 9' );