I've created a child theme of the twentyseventeen theme. In the child's theme folder I have a "style.css" and a "functions.php" file. Inside of the style.css file I have:
/*
Theme Name: Personal_theme
Theme URI: http://wordpress:8888/
Description: This is a child theme of twentyseventeen
Author: My name
Author URI: ...
Template: twentyseventeen
Version: 0.1;
*/
.entry-title {
color: blue;
}
and inside of functions.php:
<?php
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
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' );
?>
If I add "!important!" to the style, it works, it turns blue. If I use the inspector tool, I can see that the child stylesheet is being loaded after the parent, but the style is overwritten by the parent. I'm new to Wordpresss, is any of the parameter's in the functions.php wrong? Something I have to change?
This problem is most likely caused be CSS selector specificity. Essentially, the parent css rule is more narrowly tailored to hit that element than the rule you're assigning. You can get your css to take over by using rules that are more specific than the parent css, or use the same rules, in which case yours will take priority, as it is loaded later.
Try updating your function to
<?php
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') );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
?>
Afterwards please provide a screenshot of what is actually being loaded in your console.
Not sure why you created a variable of the parent-style, but you can keep using that of course.
Hope this helps
Try adding
#import url("..twentyseventeen/style.css");
above .entry title at the top of your child stylesheet. This is required along with your Template name. Hope this helps.
Related
I am using for the first time a child theme on WordPress and I noticed that despite having inserted the customizations in the style.css of the child they are not actually visible in the front-end.
In the child's functions.php the content is this:
function kerge_child_theme_enqueue_styles() {
$parent_style = 'parent-style';
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', 'kerge_child_theme_enqueue_styles' );
The child theme is up and running.
Some suggestions?
As I know you shouldn't include parent or child styles.
You just need to create style.css in the child theme and activate this child theme in settings. That's all.
Or create additional style.css in the CSS folder and enqueue it:
// enqueue parent styles
wp_enqueue_style('chld_thm_parent', trailingslashit(get_template_directory_uri()) . 'style.css', []);
// enqueue child styles
wp_enqueue_style('chld_thm_parent_additonal_styles', trailingslashit(get_stylesheet_directory_uri()) . 'css/style.css', [], time());
I'm using a wordpress child theme and I have two page templates, the default template and another one I've called full-page.php.
My style.css is already overriding the stylesheet from the parent theme, and given that full-page.php template only has a few differences, I want its stylesheet - full-page.css to use the css from style.css (both from the parent and child theme), and make the necessary overrides to its specific template where needed.
My problem is that currently, any css code I write into full-page.css will work on the the correct template - full-page.php, but only if nothing has already been specified in style.css.
For example, if I want to change the color of my header to red on my full-page.php template, background-color: red will work when added to full-page.css, but if I have already specified background-color: orange on my default template, style.css, it will override the full page one.
Using !important works but I'd rather avoid this as it could cause further problems later down the line. Is there any way I can give priority to full-page.cssand still allow it to keep using the default theme stylesheet and also the updates I've made in style.css?
<?php
function my_et_enqueue_styles() {
if (is_page_template('page-templates/full-page.php')) {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'artwebsite-full-page', get_stylesheet_directory_uri() . '/css/full-page.css', array( 'parent-style' ) );
}
else {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
wp_enqueue_script( 'divi', get_stylesheet_directory_uri() . '/js/scripts.js', array( 'jquery', 'divi-custom-script' ), '0.1.1', true );
}
add_action( 'wp_enqueue_scripts', 'my_et_enqueue_styles' );
You need to have the stylesheet with the element with the same specificity you want to load last. ( https://www.w3schools.com/css/css_specificity.asp )
So make sure that your specific ( full-page.css ) loads after your style.css
You can do this by changing making the full-page.css be dependant of the other so they cascade here is an example taken from the answer ( here )
function add_all_stylesheets() {
wp_enqueue_style( 'stylesheet-one', get_template_directory_uri() . '/css/stylesheet-one.css' );
wp_enqueue_style( 'stylesheet-two', get_template_directory_uri() . '/css/stylesheet-two.css', array( 'stylesheet-one' ) );
wp_enqueue_style( 'stylesheet-three', get_template_directory_uri() . '/css/stylesheet-three.css', array( 'stylesheet-two' ) );
}
add_action('wp_enqueue_scripts', 'add_all_stylesheets');
So in your child theme functions.php add:
add_action( 'wp_enqueue_scripts', 'my_childtheme_add_stylesheets' );
function my_childtheme_add_stylesheets() {
wp_enqueue_style( 'my-child-style', get_stylesheet_directory_uri() . '/style.css', false, '1.0', 'all' );
wp_enqueue_style( 'artwebsite-full-page', get_stylesheet_directory_uri() . '/css/full-page.css', array( 'my-child-style' ) );
}
The proper way to have a style from a stylesheet coming earlier in the cascade overriding those that come later in the cascade is to use !important.
Note: CSS = Cascading Style Sheet
You could have full-page.css load after style.css if you want all the styles in full-page.css to override the styles in style.css.
If you want specific styles to override, then you need to use !important.
I've searched through several questions and still having trouble. I'd really appreciate some expertise from y'all. =)
The child theme created and activated on my WordPress site seems to be enacting no changes.
I know essentially zero PHP but trying to use the functions.php instead of #import since it's supposed to be a better load time.
Here's what I have in my child theme's directory style.css (first) and functions.php (second)
/*
Theme Name: Quest-Child
Description: No Coward's Quest Child Theme
Author: Jason from No Coward
Author URI: http://www.nocoward.com
Template: quest
Version: 1.0
*/
/* add padding to site description */
.site-description {
padding-top: 15px;
padding-bottom: 30px;
}
.body {
background: red;
}
/* can be found on "Services" page. Is the first ID within the <p> element */
#cc-m-12571703896 {
background: blue;
}
<?php
function my_theme_enqueue_styles() {
$parent_style = 'quest-all-css'; // 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' );
?>
WordPress recognizes the child theme and has allowed me to activate it successfully.
The stuff in CSS is what I've tried to use for testing my child-theme laying down my changes. Nothing is appearing.
Again, I have zero PHP knowledge. Based on the official WordPress "How to create a child theme", I copied and pasted the code above and tried to fill in the "parent-style" value based on their instructions.
Here's what I saw on my parent theme I could possibly be using for the functions.php "parent-style"...
// Enqueue required styles
wp_enqueue_style( 'quest-bootstrap', get_template_directory_uri() . '/assets/plugins/bootstrap/css/bootstrap.min.css' );
wp_enqueue_style( 'smartmenus', get_template_directory_uri() . '/assets/plugins/smartmenus/addons/bootstrap/jquery.smartmenus.bootstrap.css' );
wp_enqueue_style( 'font-awesome', get_template_directory_uri() . '/assets/plugins/font-awesome/css/font-awesome.min.css' );
wp_enqueue_style( 'animate-css', get_template_directory_uri() . '/assets/plugins/animate/animate.css' );
wp_enqueue_style( 'slit-slider', get_template_directory_uri() . '/assets/plugins/FullscreenSlitSlider/css/style.css' );
wp_enqueue_style( 'colorbox', get_template_directory_uri() . '/assets/plugins/colorbox/colorbox.css' );
wp_enqueue_style( 'Quest-style', get_stylesheet_uri(), array(
'quest-bootstrap',
'smartmenus',
'font-awesome',
'animate-css',
'slit-slider',
'colorbox'
) );
...
// Enqueue required styles
wp_enqueue_style( 'quest-all-css', get_template_directory_uri() . '/assets/css/plugins-all.min.css' );
wp_enqueue_style( 'Quest-style', get_stylesheet_uri(), array( 'quest-all-css' ) );
// Enqueue required scripts
wp_enqueue_script( 'quest-all-js', get_template_directory_uri() . '/assets/js/quest-and-plugins.js', array(
'jquery',
'masonry'
) );
What am I missing?
Thanks in advance!
-Jason
I managed to fix this. Here's the PHP code I found on the help forum. I think the "Portfolio" bit may be extraneous, but it's working so I'm leaving it there just in case.
<?php
add_action( 'wp_enqueue_scripts', 'quest_child_enqueue_styles' );
function quest_child_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
add_filter( 'quest_plus_template_content-portfolio', 'quest_child_template_portfolio' );
function quest_child_template_portfolio(){
return get_stylesheet_directory() . '/content-portfolio.php';
}
Caveat to this solution: There is a weird thing happening. I put in some styling to make something "Background: red" so I could test if the child theme was working, and despite deleting that bit of code, it is still appearing.
For now I'm chalking it up to slow hosting but be aware that's happening if you follow this solution.
Hope this helps someone else! =)
Jason
I have created a file structure in the same format as my parent theme. My parent theme is called Alpine and within Alpine there is a functions.php and style.css file. There do not appear to be any additional style.css files.
I have created a directory called Alpine-child and within that I have created a functions.php and style.css file.
I can't work out why any changes I make to the child style.css are not implemented but they are when I make the same changes in parent style.css
This is my child style.css:
/*
Theme Name: Alpine Child
Theme URI: http://www.creative-ispiration.com/wp/alpine/
Description: My first child theme, based on Alpine
Author: MilkshakeThemes
Author URI: http://themeforest.net/user/milkshakethemes
Template: Alpine
Version: 1.0.0
Tags: one-column, two-columns, right-sidebar, fluid-layout, custom-menu, editor-style, featured-images, post-formats, rtl$
Text Domain: alpine-child
*/
This is my child functions.php file:
<?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' );
}
?>
Take a look at your <head> tag. More importantly look at the order of your stylesheets.
The styles from your child theme are being added first and then all the styles from your parent theme. This will cause the styles from the parent theme to override your child theme styles.
You can change the priority of your my_theme_enqueue_styles function to run after the parent by using the third parameter of add_action. This will enqueue your child theme styles last and allow the CSS to work as expected.
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 11 );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}
?>
This worked for me:
<?php
function my_theme_enqueue_styles() {
$parent_style = 'twentyseventeen-style';
$child_style = 'twentyseventeen-child-style';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( $child_style, get_stylesheet_uri() );
}
?>
and none of the other answers did.
After updating from Divi 4.4.1 to Divi 4.10.8 the Child theme parent CSS was not working. I did some research om my website and realized that Divi style.css file was empty with only header info (after the update) and that the code needed to show the CSS was now in a different file (style-static.min.css) I changed the file name in my Child Theme functions.php file from style.css to style-static.min.css. This solved my problem and the CSS is working.
See underneath the code I used:
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles', 11);
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style-static.min.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array('parent-style')
);
}
You need to enqueue the child theme style.css so your function should be:
function my_theme_enqueue_styles() {
$parent_style = 'parent-style';
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' );
Take a look at the documentation.
Craig Hick's answer worked for me and I also realize why my default code from the Wordpress documentation wasn't working.
<?php
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles' );
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')
); }
In my case, the line wp_get_theme()->get('Version') returned 1.0.0 which was the same version number as the parent theme.
So I just changed the child theme css version number to 1.0.1 and it worked.
My child theme currently has the following code:
<?php
add_action( 'wp_enqueue_scripts', 'enqueue_parent_styles' );
function enqueue_parent_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri().'/style.css' );
}
//load child theme custom CSS
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 11 );
function my_theme_enqueue_styles() {
wp_enqueue_style( 'child-style', get_stylesheet_uri() );
}
?>
Previously, the code I used only had the first part before //load child theme custom CSS part, and it was unable to get the custom CSS. I have added the code #jrod suggested above and it worked. I need to confirm with you guys that my child theme code is complete, and I don't have to add anything else. I am not sure if this also fetches the custom JS files I have in the child theme JS files.
<?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' );
}
?>
Just remove version from comment in child them style.css it's working for me in wordpress 6.1
I am trying to create a child theme but I think that there is something wrong with my functions.php.
(<?php)add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'sydney', get_template_directory_uri() . '/style.css' );
}function theme_enqueue_styles() {
$parent_style = 'sydney';
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'sydney-child',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style )
);
}
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
May Be this problem is due to function.php file in your child theme.
Child theme’s functions.php is loaded first implies that you can create the user functions of your theme pluggable - that are replaceable by a child theme - by mentioning them restrictively. E.g.:
if ( ! function_exists( 'theme_special_nav' ) ) {
function theme_special_nav() {
// Do something.
}
}
In that way, a child theme can replace a PHP function of the parent by simply declaring it beforehand.
for further reference please visit : Wordpress Child Theme
If you find my answer helpful please mark it, So others can take the benefits of it.