I have a question about child theme CSS not being executed.
This is the child style.CSS
/*---------------------------------------------------------------------------------
Theme Name: Sue Maisano
Theme URI: http://suemaisano.com
Description: This is a child Divi theme for SueMaisano.com
Author: Sue Maisano
Author URI: http://clickstosuccess.com
Template: Divi
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
------------------------------ ADDITIONAL CSS HERE ------------------------------*/
This is the child functions.php
<?php
if (!defined('ABSPATH')) die();
function ds_ct_enqueue_parent() { wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' ); }
function ds_ct_loadjs() {
wp_enqueue_script( 'ds-theme-script', get_stylesheet_directory_uri() . '/ds-script.js',
array( 'jquery' )
);
}
add_action( 'wp_enqueue_scripts', 'ds_ct_enqueue_parent' );
add_action( 'wp_enqueue_scripts', 'ds_ct_loadjs' );
include('login-editor.php');
?>
What could be wrong that stops the child CSS being executed? The custom CSS part within the theme options works fine but I would rather keep all CSS work in the child theme CSS editor to keep it organized.
Thanks so much for any help!
Sue
You have enqueud parent CSS only. Enqueue child CSS too:
function ds_ct_enqueue_parent() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css');
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
}
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
I'm trying to create a child theme and functions.php seems to be working but for some reason, the child theme isn't loading. I added the following in my functions.php and it does work, except it loads up the parent theme's style.css and not the child.
add_action( 'wp_enqueue_scripts', function() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
});
Here's the top of my style.css in the child:
/*
Theme Name: Chaplin Child
Theme URI: https://my-site.com/
description: Child Theme
Template: Chaplin
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Tags: light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
Text Domain: stack-child
*/
Try this (in functions.php), this is from a working child theme of mine and also enqueues the child theme stylesheet:
add_action('wp_enqueue_scripts', 'register_my_scripts');
function register_my_scripts() {
wp_enqueue_style( 'parent_style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css' );
}
I try to convert a html template to wordpress. I try to create a child theme from Twenty Nineteen =>
/*
Theme Name: Twenty Nineteen Child - Cigolo
Theme URI: http://inanccagiran.local/wp-content/themes/cigolo
Version: 1.0.0
Template: Twenty Nineteen
Text Domain: cigolo
*/
Then I try to get the css files in functions.php =>
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
$child_style = 'child-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
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' );
function new_theme_enqueue_styles() {
wp_enqueue_style( 'twentynineteen-style', 'netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css');
wp_enqueue_style( 'bootstrap-css', get_stylesheet_directory_uri() . '/css/plugins/bootstrap.min.css', array(), null, 'all' );
}
add_action( 'wp_enqueue_scripts', 'new_theme_enqueue_styles' );
Now I get 404 for bootstrap.min.css although path seems ok in network tab of developer tools.
Can you help me ?
get_template_directory_uri();
returns main theme folder, for child theme folder use
get_stylesheet_directory_uri();
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') );
}
My themes correctly inheriting the styles from the parent, but my custom css is having no effect.
I have created a new folder in my wp-content/themes folder named `twentyten-child.
I have created a file called functions.php which contains:
<?php
/**
* Loads the parent stylesheet.
*/
function load_parent_stylesheet() {
wp_enqueue_style( 'parent-styles', get_template_directory_uri() . '/style.css' );
}
add_action( 'wp_enqueue_scripts', 'load_parent_stylesheet' );
?>
I also created a file inside named style.css which contains:
/*
Theme Name: Twentyten Child
Theme URI: https://p4002720.scm.tees.ac.uk/thetreasurechestWP/
Description: This is a aged, weathered, worn and nostalgic style theme
Author: Michael Barley
Author URI: https://www.facebook.com/profile.php?id=100008253000376
Template: twentyten
Version: 0.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
*/
body {
background: green;
}
You have only included the parent CSS dependency, you also have to include the child theme CSS, as explained in the Codex https://codex.wordpress.org/Child_Themes
<?php
function my_theme_enqueue_styles() {
$parent_style = 'parent-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
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' );
?>