I have a main.css file in a css folder in a wordpress theme, it's called in functions.php the way below
wp_enqueue_style( 'td-main', THEME_WEB_ROOT . '/css/main.css' );
In my child theme I recreate a css folder at the same location than the parent, but it's not overwritten, here is my child theme functions.php
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));
}
add_action('wp_enqueue_scripts', 'theme_enqueue_styles');
I thaught it was enough to recreate the file in the child theme, but can't figure why it's not working.
Do I do something wrong ?
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 have a /lib/extends_script/extends-style.min.css file in my child theme that I'm trying to have override the version in the parent theme. I have the following code in place, but it still seems to be loading the parent version of the .css file. What am I doing wrong?
Child theme: functions.php
function PREFIX_remove_scripts() {
// enqueue parent styles
wp_enqueue_style('maple', get_template_directory_uri() .'/style.css');
// enqueue child styles
wp_enqueue_style('maple-child', get_stylesheet_directory_uri() .'/style.css', array('maple'), 99999);
wp_enqueue_style('tn-extends-lib-style', get_stylesheet_directory_uri() .'/lib/extends_script/extends-style.min.css');
}
add_action( 'wp_enqueue_scripts', 'PREFIX_remove_scripts', 20 );
The parent theme functions.php is enqueueing it in the following way:
if ( ! function_exists( 'tn_register_frontend_script' ) ) {
function tn_register_frontend_script() {
// load css code
wp_enqueue_style( 'tn-extends-lib-style', get_template_directory_uri() . '/lib/extends_script/extends-style.min.css', array(), TN_THEME_VERSION, 'all' );
etc.
Copy file that including scripts or style from parent-theme to child-theme,
with the same nesting levels of folders, for example:
parent-theme/inc/theme_styles.php
to
child-theme/inc/theme_styles.php
and inside the same file but in child-theme replace
get_template_directory_uri()
to
get_theme_file_uri()
and now wordpress check style path in child-theme first.
The stylesheet's file with the same path as in your parent-theme must be inside of your child-theme too
Changes in .php files within a child theme are not applied on my front-end site.
I've activated a WordPress Child Theme called "Grow Child" from parent "Grow".
I want to change the footer text and links on my site, so, following the instructions, I've copied footer.php file (actually named 04.footer.php) from parent directory to the child-theme folder. I made the corrections but they are not applied to my site.
What is wrong?
When I've made the same corrections directly in the parent directory, they were well applied to my site.
I use the following code in the functions.php of the child theme:
<?php
add_action( 'wp_enqueue_scripts', 'grow_child_enqueue_styles' );
function grow_child_enqueue_styles() {
$parent_style = 'grow'; // This is 'grow-style' for the grow theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'grow-child',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
?>
I'd like to make changes of parent theme files in my child theme folder so that when the theme is updated not to lose the changes.
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.
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.