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
Related
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
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.
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 ?
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