WordPress.org

Forums

My child theme style.css is not working? (15 posts)

  1. lucaz5520
    Member
    Posted 1 year ago #

    So I am developing locally on my mac with Mamp and I have a bootstrap based wordpress theme that I am trying to make a child theme for and for some reason the styles that I give in the style.css within the child theme folder is not working.
    I checked my directory is correct and my stylesheet.

    my-theme/wp-content/themes/my-theme
    my-theme/wp-content/themes/my-theme-child ( this is where I put my style.css )

    Here is my style.css ( Name of the theme is "bootstraptheme" )

    Theme Name:   BootstrapTheme Child
     Theme URI:    http://example.com/bootstraptheme/
     Description:  Bootstrap Child Theme
     Author:       Dan Elmer
     Author URI:   http://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; }

    As you notice I gave random styles just to test that the styles are working which they are not.
    And no it is not my cache I have emptied that already and tested in other browsers.
    And yes I have activated the child-theme in my admin area.

  2. 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:    http://example.com/bootstraptheme/
     Description:  Bootstrap Child Theme
     Author:       Dan Elmer
     Author URI:   http://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; }
  3. lucaz5520
    Member
    Posted 1 year ago #

    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:    http://example.com/bootstraptheme/
     Description:  Bootstrap Child Theme
     Author:       Dan Elmer
     Author URI:   http://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..

  4. jimmyesl
    Member
    Posted 1 year ago #

    can you provide a link to your site please

  5. lucaz5520
    Member
    Posted 1 year ago #

    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.

  6. I can't because I am developing locally on MAMP

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

  7. lucaz5520
    Member
    Posted 1 year ago #

    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.

  8. 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.

  9. lucaz5520
    Member
    Posted 1 year ago #

    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.

  10. stephencottontail
    Member
    Posted 1 year ago #

    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".

  11. lucaz5520
    Member
    Posted 1 year ago #

    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.

  12. stephencottontail
    Member
    Posted 1 year ago #

    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.

  13. lucaz5520
    Member
    Posted 1 year ago #

    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.

  14. stephencottontail
    Member
    Posted 1 year ago #

    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.

  15. lucaz5520
    Member
    Posted 1 year ago #

    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.

Topic Closed

This topic has been closed to new replies.

About this Topic