My child theme style.css is not working?

Which theme is the parent theme, meaning can you provide a link to that theme?

Normally I would ask for a link but as you’re developing on MAMP (good job that BTW) that would be unrealistic of me to ask that. ??

My guess is that the comment tags are not quite right. See how I explicitly added in my copy below and left the @import line not commented out?

/*
Theme Name:   BootstrapTheme Child
 Theme URI:    https://example.com/bootstraptheme/
 Description:  Bootstrap Child Theme
 Author:       Dan Elmer
 Author URI:   https://example.com
 Template:     bootstraptheme
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  bootstraptheme-child
*/

@import url("../bootstraptheme/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

body, html, * {
background-color:#d11111 !important;
}

body {
border: 12px solid red !important;
}

h1, h2, h3, h4, p, a { color:red !important; }

Wow can’t believe I forgot the comment, still does not work tho. This is exactly what I put in my bootstraptheme-child > style.css

/*
 Theme Name:   BootstrapTheme Child
 Theme URI:    https://example.com/bootstraptheme/
 Description:  Bootstrap Child Theme
 Author:       Dan Elmer
 Author URI:   https://example.com
 Template:     bootstraptheme
 Version:      1.0.0
 Tags:         light, dark, two-columns, right-sidebar, responsive-layout, accessibility-ready
 Text Domain:  bootstraptheme-child
*/

@import url("../bootstraptheme/style.css");

/* =Theme customization starts here
-------------------------------------------------------------- */

body, html, * {
background-color: #d11111 !important;
}

body {
border: 12px solid red !important;
}

h1, h2, h3, h4, p, a { color:red !important; }

and still nothing?? I really do not understand whats wrong here. I have checked all spelling and everything is good. The only thing needed for a child theme to work is for you to make a new folder in the same directory as the parent folder with the same name but with a -child at the end of the name and have a style.css within that child folder with what I posted above. And that is exactly what I did. I mean only thing I can maybe think of is if my woocommerce plugin is interfering somehow ?? Im out of ideas..

can you provide a link to your site please

I can’t because I am developing locally on MAMP. But if you want I can provide any details about the files or code. I know that the most important file would probably be the functions.php loading everything. So here is everything in there:

<?php

function theme_styles(){

wp_enqueue_style( 'bootstrap_css', get_template_directory_uri() . '/css/bootstrap.min.css' );
wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );

}
add_action( 'wp_enqueue_scripts', 'theme_styles' );

function theme_js() {

global $wp_scripts;

wp_register_script ('html5_shiv', 'https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js', '', '', false );
wp_register_script ('respond_js', 'https://oss.maxcdn.com/libs/respond.js/1.4.2/respond.min.js', '', '', false );

$wp_scripts->add_data( 'html5_shiv', 'conditional', 'lt IE 9' );
$wp_scripts->add_data( 'respond_js', 'conditional', 'lt IE 9' );

wp_enqueue_script( 'bootstrap_js', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '', true );
wp_enqueue_script( 'theme_js', get_template_directory_uri() . '/js/theme.js', array('jquery', 'bootstrap_js'), '', true );
}

add_action( 'wp_enqueue_scripts', 'theme_js');

//add_filter('show_admin_bar', '__return_false');
add_theme_support( 'menus' );
add_theme_support( 'post-thumbnails' );

function register_theme_menus() {
register_nav_menus(
array ( 'header-menu'  => __('Header Menu')

		)
	);
}

add_action( 'init', 'register_theme_menus' );
?>

other than that my theme is extremely basic and works just as a test for bootstrap really.

I can’t because I am developing locally on MAMP

Can you provide a link to the parent theme you are using?

Only if I transfer all my files to a live server and go through the database steps and what not. I’ll have to do that tomorrow if thats the only way.

It’s not the only way but it could confirm that there isn’t some basic misunderstanding here. If you could provide where you got the parent theme then perhaps someone can try and reproduce your results and propose a fix.

Hey I just found out I can get the child themes style.css to work ONLY IF I call my style.css in another way in the parent theme <head> like so:

<style>
@import url("<?php bloginfo('stylesheet_url'); ?>");
</style>

But the problem is that is not the proper way to load css and it should always be loaded in the functions.php. What’s going on here? I have posted my functions.php file on my reply above if you want to check it out.

and by the way I did not get the parent theme from anyways I made it myself as a bootstrap test.

What’s happening is that in your functions.php, you call get_template_directory_uri() . '/style.css' to load your main stylesheet instead of get_stylesheet_uri(). This works in the parent theme, but not in the child theme because get_template_directory_uri() always refers to the parent theme when it’s called in a child theme. So when your child theme is active, WordPress first loads your child theme’s stylesheet and then your parent theme’s stylesheet later in the <head> section. Since the parent theme’s stylesheet is loaded later, the styles in that stylesheet “win”.

Ok just to be clear. The functions.php file you see above there is the file from my parent theme. All my child theme has is a style.css. So is the fix for this to replace

wp_enqueue_style( 'main_css', get_template_directory_uri() . '/style.css' );

With:

wp_enqueue_style( 'main_css', get_stylesheet_uri() );

And why wouldn’t get_template_directory_uri() work in the parent theme if we are calling the stylesheet within the parent folder with @import.

Sorry about the confusion, I hadn’t seen your post about @import url("<?php bloginfo('stylesheet_url'); ?>"); when I made my last post.

But yes, you should use wp_enqueue_style( 'main_css', get_stylesheet_uri() ); to load your main stylesheet if you or other users want to create a child theme based on your theme.

Hmm I wonder why that is? So in other words if you want to use a child-theme and load your css in functions.php load your style.css with wp_enqueue_style( 'main_css', get_stylesheet_uri() ); .. I have never heard of that in all the lessons I have taken with WordPress.

Whomever gave you lessons on WordPress probably should have mentioned this, but if nobody had ever tried to make a child theme based off of a theme that they had coded, then they likely would never have ran into this. When you use a child theme, WordPress first loads the child theme’s functions.php (if one exists) and then the parent theme’s functions.php. Since your child theme does not have a functions.php but the parent theme does, the only stylesheets that get loaded are the ones defined in the parent theme’s functions.php. When you’re using a child theme, get_template_directory_uri() returns the parent theme’s folder, so your child theme’s stylesheet never gets loaded(*) at all.

(*) I mistakenly said otherwise a couple of posts ago. I had forgotten that I was experimenting with wp_enqueue_style() in a child theme so I could figure out what your problem was.

Yeah ok so it works! great. So use get_stylesheet_uri() instead of get_template_directory_uri() to get the stylesheet in your child theme to work WELL NOTED. Thank you! stephencottontail really appreciate it.