Using a child theme in wordpress, my styles are not overwritting styles shown in the index. But they do overwrite parent theme css.
I cant find the original code and ive added the below into functions.php to set child-theme.css as the default stylesheet.
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', PHP_INT_MAX);
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' ) );
}
CSS I'm trying to add but isn't finding -
body.custom-background {
background-size: cover !important;
}
Web inspector not locating child-theme.css -
Solved it by locating the first stylesheet (stack-88 as displayed in image above) and adding the line of code in this file with !important which then overwrote the index styles.
Related
hello i have a problem with css in my child theme its not working this is the code i use in functions.php
the problem is the style in file app.css is not applying in the page but when i move the same css to the costomize ( additionnal css) its working perfectely.
if (!function_exists('succulents_qodef_child_theme_enqueue_scripts')){
function succulents_qodef_child_theme_enqueue_scripts() {
$parent_style = 'succulents-qodef-default-style';
wp_enqueue_style( 'customstyle', get_stylesheet_directory_uri() . '/app.css');
wp_enqueue_style('succulents-qodef-child-style', get_stylesheet_directory_uri() . '/style.css', array($parent_style));
// wp_enqueue_style('succulents-custom', get_stylesheet_directory_uri() . '/app.css', array($parent_style));
}
add_action( 'wp_enqueue_scripts', 'succulents_qodef_child_theme_enqueue_scripts' );
}
when i see the code source of the page i can see the app.css but for some reason its not applying
I need to include some external css files, i use this snippet in functions.php but neither of them works.. Why..?
add_action( 'wp_enqueue_scripts', 'add_css' );
function add_css() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
wp_enqueue_style( 'style', get_template_directory_uri().'/assets/css/bootstrap.css' );
}
I'm using Twenty-Twenty-One child theme
This is my style.css
/*Theme Name: Twenty Twenty-One Child
Theme URI: https://wordpress.org/themes/twentytwentyone/
Template: twentytwentyone
Author: the WordPress team
Author URI: https://wordpress.org/
*/
h2{
color:red!important;
} */
h2 is to see if it works.
If you're using a child theme, you want to use get_stylesheet_directory_uri() instead of get_template_directory_uri - Unless the stylesheets are part of the parent theme.
function add_css() {
wp_enqueue_style( 'parent-style', get_stylesheet_directory_uri().'/style.css' );
wp_enqueue_style( 'style', get_stylesheet_directory_uri().'/assets/css/bootstrap.css' );
}
Depending on how your parent theme loads it's styles your function will vary. You can check the Enqueue stylesheet section in the Theme handbook for more clarification. Below is their example if the parent theme loads its style using a function starting with get_stylesheet
Make sure you are using the correct parent handle, 'parent-style' is used for TwentyFifteen theme for example.
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
function my_theme_enqueue_styles() {
$parenthandle = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
$theme = wp_get_theme();
wp_enqueue_style( $parenthandle, get_template_directory_uri() . '/style.css',
array(), // if the parent theme code has a dependency, copy it to here
$theme->parent()->get('Version')
);
wp_enqueue_style( 'child-style', get_stylesheet_uri(),
array( $parenthandle ),
$theme->get('Version') // this only works if you have Version in the style header
);
}
You should also look at the wp_enqueue_style code reference as the handle for your bootstrap style should probably not be style as it needs to be unique e.g. bootstrap-style
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...
In parent theme the styles orders in this way - bootstrap.min, font-awesome, zzz-style.
When I active child theme, main style css jumps to the top and layout breaks.
zzz-style, bootstrap.min, font-awesome, zzz-child-style.
// enqueue the parent theme stylesheet
wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');
wp_enqueue_style('font-awesome', get_template_directory_uri() . '/css/font-awesome.min.css');
wp_enqueue_style('zzz-style', get_stylesheet_uri());
// enqueue the child theme stylesheet
function zzz_child_scripts() {
wp_enqueue_style( 'zzz-child-style', get_template_directory_uri(). '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'zzz_child_scripts');
What is the best way order Stylesheets?
wp_enqueue_style allows you to set dependencies for stylesheets that will help you determine load order. Here are the docs.
// enqueue the parent theme stylesheet
wp_enqueue_style('bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css');
wp_enqueue_style('font-awesome', get_template_directory_uri() . '/css/font-awesome.min.css', array('bootstrap'));
wp_enqueue_style('zzz-style', get_template_directory_uri() . '/style.css', array('bootstrap'));
// enqueue the child theme stylesheet
function zzz_child_scripts() {
wp_enqueue_style( 'zzz-child-style', get_stylesheet_uri(), array('zzz-style') );
}
add_action( 'wp_enqueue_scripts', 'zzz_child_scripts');
On line 5 (where you include zzz-style), notice the array('bootstrap') argument. This tells WordPress to load zzz-style after bootstrap.
Note: CSS stylesheet ordering should not matter as much as abiding by proper CSS cascading rules.
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