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.
Related
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...
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 have created a child theme and have created a page-splash.php in the child theme and have also created a page-splash.css for this page, but somehow I am unable to load the page-splash.css for the page-splash.php file.
This is my code in the functions.php ( in the child theme folder)
<?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' );
}
function splash_enqueue_style() {
wp_enqueue_style( 'page-splash', get_template_directory_uri().'/css/page-spash.css' );
}
add_action( 'wp_enqueue_scripts', 'splash_enqueue_style' );
?>
I'd really appreciate your help on this.
What am I doing wrong??
I am working in localhost and will transfer these files to a working domain after things are working properly.
Couple of things, starting with the simplest -- You've got a typo in your page-splash.css file path. You've got it typed as page-spash.css
Additionally, there's probably no need to call two separate functions for this. You could enqueue both of those styles in one call like so:
function splash_enqueue_style() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
if(is_page_template('page-splash.php'){
//Path to your template.. if it's in a dir, include it before the file
wp_enqueue_style( 'page-splash', get_template_directory_uri().'/css/page-splash.css' );
}
}
add_action( 'wp_enqueue_scripts', 'splash_enqueue_style' );
Well, I kept on searching for answers and I have found it.
It seems that using wp_head() is important if you want to load all javascript
or css files and it started to work when I did that.
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