Unable to create custom child theme stylesheets

[colonelchlorine]

These two lines in header.php mean that child themes cannot be used.

<link rel="stylesheet/less" type="text/css" href="<?php echo get_template_directory_uri(); ?>/less/bootstrap.less">
 <link rel="stylesheet/less" type="text/css" href="<?php echo get_template_directory_uri(); ?>/less/responsive.less">

Seems like it should be using get_stylesheet_directory_uri().

Cannot get child theme to override CSS/less stylings.

[rianrainey]

I agree with this bug. In order for my styling to be loaded last, I have to manually put
<link rel="stylesheet/less" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/style.css">

it in my child header.php. However, loading my child stylesheet doesn't allow me to overwrite the parent styling and those from bootswatch. I need help getting around this issue. Please help.

[johnblythe]

i'm having the same issue(s).

while i appreciate the workload taken from me having to make things responsive/fluid it seems like that work is now just shifted over to figuring out how to style some basic things because of how difficult it is to override some of it.

was hoping to find a solution, doesn't look like anyone got one :\

[colonelchlorine]

@johnblythe if you override the header.php and replace the lines mentioned in the issue with the following, it should work for you.

<link rel="stylesheet/less" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/less/bootstrap.less?v=1">
<link rel="stylesheet/less" type="text/css" href="<?php echo get_stylesheet_directory_uri(); ?>/less/responsive.less">

you can then create a /less/ folder in your child theme. I think I copied all of the less files into it, and then modified from there. Not ideal because now you have all of the styles, not just the overrides.

it might be possible in childtheme/less/bootstrap.less, to @import the less files from the parent folder, and then selectively override them with your child theme. you would need to do @import "../bootstrap-parent-theme/less/buttons.less"

alternatively you could try just import the parent theme's bootstrap.less in your child theme's bootstrap.less

[johnblythe]

@colonelchlorine

thanks for the reply. maybe i don't understand the usage as well as i had thought. i installed the 320 bootstrap theme just as i would any other theme, applied it, and then went to town customizing it.

yesterday, after working on it all day, the LESS compile (i'm guessing??) went awry. styles i had fixed hours before all the sudden stopped being applied.

this morning i reuploaded the fresh/base LESS files to overwrite and see what happened. it fixed the things that had gone missing/broken but, in turn, necessitated me redoing some of the style work/tweak in the LESS files.

today, after moving forward yet again, some random styles aren't showing up from LESS files. and i haven't been in them for the past hour or two. i've had to check in incognito windows for my changes because it has seemingly cached so heavy in my other browser window. lastly, it now sometimes takes forever to load—sometimes Chrome even asks if i want the page to be killed because it has effectively frozen up—which seems due to the less script (when i checked in FF it asked if I wanted to kill the less.js script that was frozen).

am i doing something terribly wrong here? thanks for any further help-

[thoughtwell]

Is there a way to completely remove the LESS aspect and just use the CSS more traditionally? I like the idea of LESS making stylesheets more manageable, but the use of WP Child Themes is invaluable to me as I don't want to have to reinstate styling edits every time an update is made. I'm glad to see I'm not the only one. All day I have been going crazy trying to figure out why although my child theme loads fine in the admin, the browser doesn't load my child theme at all. I'd really like to use this as the basis for this new project, as the responsiveness works well... but not being able to use child themes is a deal-breaker.

[offroadkev]

I'm nearly about to start using this bootstrap for an upcoming project, but I too, would like to be able to utilize a traditional css stylesheet in a child theme. Have the devs answered this elsewhere maybe? I ask because I can't see someone that is so proactive on developing such an awesome bootstrap wouldn't address this issue for multiple months. I would think they would have addressed this already, which leads me to believe that maybe they have addressed it elsewhere. I'm going to search around to see if I can find us an answer from the devs somewhere else.

[thoughtwell]

@vegaskev, good luck. if you find anything, throw us a bone. I did quite a bit of looking and it seems there is a push from some devs to eliminate the use of child themes altogether to make WP more 'efficient' in speeding up loading. I just think maybe the author got busy w/ other projects, as is the way of many working devs, and given this is FREE, perhaps maybe they will look at it when they have more time, should they still need to if nobody has solved this. My hope is that one day I become better at coding (I lean more towards design) and perhaps I can contribute more.

[SmartyP]

I ran into this same issue trying to create a child theme. I found this article which explains what causes the issue (mentioned above as using get_template_directory_uri() instead of get_stylesheet_directory_uri(): http://wordpress.org/support/topic/child-theme-help-parent-stylescss-still-showing

I actually just changed the following line in functions.php - seemed to make my own style.css start working fine after:

in function theme_styles(): wp_register_style( 'wp-bootstrap', get_template_directory_uri() . '/style.css', array(), '1.0', 'all' );

changed to: wp_register_style( 'wp-bootstrap', get_stylesheet_directory_uri() . '/style.css', array(), '1.0', 'all' );

[djcowan]

Interesting thread. Excellent theme. Having just read thread @: github.com/320press/wordpress-bootstrap/issues/11 and amended the style.css link with apparent success. But I somehow prefer the above @SmartyP approach as more elegant and have included the altered line into my child theme's function.php This worked wonderfully. To retain full css functionality add the @import\ rule to the child theme's style.css

**@import url("../wordpress-bootstrap/style.css");

This leaves me with a virgin, unadulterated wp-bootstrap theme with a healthy, fully functioning child

[dotdog]

Thank you SmartyP and djcowan for a "now" functioning child theme! Your input helped change an otherwise frustrating afternoon.

[robertandrews]

I see that writing the opt-out CSS in to the Jetpack "CSS Stylesheet Editor" ("Edit CSS" under "Appearance") works ok.

[thebeautybudget]

Holy CRAP I figured out a way to do it that I think would be universal for any bootstrap powered theme - and believe me... I went through everything and literatley NOTHING worked.

Here it goes.

First - create your style.css for child theme -

You dont have to do the @import for the other style sheets (atleast on my theme they are all automatically in the header using the'<?php wp_head(); ?>' function .

Copy the theme header and create your child header.php

All you need to do is add:

<link href="<?php echo get_stylesheet_directory_uri(); ?>/style.css" rel="stylesheet">

_(/style.css your child css style sheet)_

directly BELOW your '<?php wp_head(); ?>' line of code in your header.

Now, if you were like me and were editing a style.css file in your actual theme... you may need to copy your images folder into you child theme to get any custom images you were using as backgrounds... WALLA!

P.s.- this requires no new functions in your childs 'function.php' file

[lkoudal]

I discovered this myself today (the hard way) that the style.css was not loaded at all.

I went for including it via functions.php using the action hook 'wp_enqueue_scripts'.

add_action('wp_enqueue_scripts', 'scripts_styles_loader');
function scripts_styles_loader() {
    wp_enqueue_style('styles',get_stylesheet_directory_uri() . "/style.css"); // Uses get_stylesheet_directory_uri() to return the -child- theme's uri.
}

[jchanticleer]

Thanks, lkoudal

Your solution just saved me an afternoon of troubleshooting.

[skybondsor]

@thebeautybudget After a few hours of banging my head against the wall, your solution worked for me! Thanks for posting it.

[jstrott]

@lkoudal That seems to work very nicely for me - thanks for posting your solution.

[cogdog]

It looks like the latest version of wp-bootstrap has made the adjustment so none of this finagling is needed. I just downloaded it from http://320press.com/themes/wp-bootstrap/ and set up my child theme (style.css does NOT need @import - the parent theme's functions load sits own internal styles as well as the childs (registered via get_stylesheet_uri() )

function theme_styles() { 
// This is the compiled css file from LESS - this means you compile the LESS file locally and put it in the appropriate directory if you want to make any changes to the master bootstrap.css.
    wp_register_style( 'bootstrap', get_template_directory_uri() . '/library/css/bootstrap.css', array(), '1.0', 'all' );
    wp_register_style( 'bootstrap-responsive', get_template_directory_uri() . '/library/css/responsive.css', array(), '1.0', 'all' );
    wp_register_style( 'wp-bootstrap', get_stylesheet_uri(), array(), '1.0', 'all' );

    wp_enqueue_style( 'bootstrap' );
    wp_enqueue_style( 'bootstrap-responsive' );
    wp_enqueue_style( 'wp-bootstrap');
}

I was able to interject a simple css change (setting body background color tp black) and my own functions.php via the child theme.