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' );
}
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've created a child theme from the nightingale theme but when I try to change a propetry in nigthingale-child/style.css it doesn't apply. For instance I've tried to change background-color of the body or display none for h1 markup just to see whether my child theme style.css works but nothing happens.
I've followed all steps for creating a child theme:
-new folder nightingale-child
-inside this foder I've added two files : function.php & style.css
here is my style.css :
/*
Theme Name: nightingale-child
Theme URI: http://example.com/twenty-fifteen-child/
Description: nightingale Child Theme
Author: John Doe
Author URI: http://example.com
Template: nightingale
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: nightingalechild
*/
a {
color: red;
}
and here is my function.php:
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
Does anybody know what's wrong with my nightingale-child theme ?
Your function is loading the PARENT theme CSS. You need to change a couple things to load the CHILD CSS:
<?php
// Let's change this to `enqueue_child_styles` so it's clearer.
add_action( 'wp_enqueue_scripts', 'enqueue_child_styles' );
// Now the function
function enqueue_child_styles() {
// Rename the hook to child-style
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri().'/style.css' );
}
In this instance, you want to use get_stylesheet_directory_uri() since get_template_directory_uri() always points to the PARENT theme, where as get_stylesheet_directory_uri() points to the CHILD theme.
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' );
}
Im trying to create a child theme in wordpress but im getting this error
Broken Themes
The following themes are installed but incomplete.
Name Description
Rife child Template is missing. Standalone themes need to have a index.php template file. Child themes need to have a Template header in the style.css stylesheet.
What am i doing wrong?
Here is the files
Style.css
/*
Theme Name: Rife child
Description: Made by Apollo13.<br/> Get support from Forum.
Author: Apollo13
Author URI: https://apollo13themes.com/
Theme URI: https://apollo13themes.com/themes
License: GNU General Public License version 3.0
License URI: http://www.gnu.org/licenses/gpl-3.0.html
Tags: theme-options, post-formats, two-columns, translation-ready
Text Domain: rife
Version: 1.0
*/
Functions.php
<?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' );
}
?>
Actually, there's only two files required in child theme: the style.css and the functions.php.
I simply think that your style.css is missing the header. Here's an example of the mandatory header of a child theme.
/*
Theme Name: My Child Theme
Theme URI: https://www.example.com/themes
Description: My Child Theme
Author: John Deo
Author URI: https://www.example.com/
Template: parent_theme_name
Version: 1.0
Text Domain: my-child-theme
*/
Also, you need to enqueue the parent style sheet by including this in your child theme function.php:
<?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' );
}
?>
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' );
?>