How can I load my css file after all other css files have been loaded?
This is my current code:
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() .
'/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/roee.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
Try this method with priority
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', '999');
more details add_action()
Related
How do I load my child theme's CSS last ? some other CSS files loads before my CSS and this is my current code to load my child theme's CSS. Thank you in advance!
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/roee.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
In my wordpress child theme css file loaded before main theme css.
My child theme css functions.php file is given below
function my_theme_enqueue_styles(){
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/../enfold-child/plugins/bootstrap/css/bootstrap.min.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
I want to load child theme css after parent theme css.
Add the priority. Here 99 is high, so it will likely be last but some plugins may add css at a higher priority, though it's rare.
function my_theme_enqueue_styles(){
wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/../enfold-child/plugins/bootstrap/css/bootstrap.min.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 99 );
See: https://developer.wordpress.org/reference/functions/add_action/
According to the documentation (https://codex.wordpress.org/Child_Themes),
set the parent style as a dependency of the child style, and load it in your functions.php:
<?php
function my_theme_enqueue_styles() {
// You'll find this somewhere in the parent theme in a wp_enqueue_style('parent-style').
$parent_style = 'parent-style';
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')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>
Beware though, that some themes use more than one stylesheet.
If that occurs, you can add any and all of them to the function like this:
$parent_style = 'parent-style';
$parent_style2 = 'other-parent-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( $parent_style2, get_template_directory_uri() . '/inc/css/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style, $parent_style2 ),
wp_get_theme()->get('Version')
);
for CHILD THEME get_stylesheet_directory_uri()
for PARENT THEME get_template_directory_uri()
function my_theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'owl-carousel-style', get_stylesheet_directory_uri() . '/assets/owlcarousel/assets/owl.carousel.min.css' );
wp_enqueue_style( 'owl-theme-style', get_stylesheet_directory_uri() . '/assets/owlcarousel/assets/owl.theme.default.min.css' );
wp_enqueue_script( 'owl-carousel-js', get_stylesheet_directory_uri() . '/assets/owlcarousel/owl.carousel.min.js', array(), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
My child-theme stylesheet doesnt seem to be working. I think the script needs to change to load it last but I'm not sure how to change the priority.
Website url
This the functions.php file:
<?php
function thim_child_enqueue_styles() {
// Enqueue parent style
wp_enqueue_style( 'thim-parent-style', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'thim_child_enqueue_styles', 100);
You should enqueue also 'parent-style' and set it as a dependency of 'child-style'. It will ensure that the child theme stylesheet loads after it. So rewrite your enqueue function accordingly:
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
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')
);
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
Take a look at the documentation.
I am using this theme:https://dessign.net/sold-responsive-woocommerce-free/
and I have created a child theme. I set it up by adding
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() .
/style.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
but certain things are not being applied like the sticky headeror mobile menu. Is there anything else I need to include?
Your child theme's stylesheet will usually be loaded automatically. If it is not, you will need to enqueue it as well. Setting 'parent-style' as a dependency will ensure that the child theme stylesheet loads after it. See here a more detailed discussion :
<?php
function theme_enqueue_styles() {
$parent_style = 'parent-style';
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', 'theme_enqueue_styles' );
?>
https://codex.wordpress.org/Child_Themes
I can't get my wp_enqueue_scripts working for multiple child style sheets. I have
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',
get_stylesheet_directory_uri() . '/anthony.css',
array('parent-style')
);
}
I'm not too familiar with php. How do I include multiple stylesheets?
You should only call one stylesheet each time you use wp_enqueue_style()
// start the function called theme_enqueue_styles
function theme_enqueue_styles() {
// enqueue 3 stylesheets, call wp_eunqeue_style for each file
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css') ;
wp_enqueue_style( 'anthony-style', get_stylesheet_directory_uri() . '/anthony.css' );
}
// Call the wp_enqueue_scripts action on the created function
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );