child theme local css not being applied

1 Views

I am new to the whole WordPress themes so please bear with me while I try an explain the problem especially after most answers to child css applies to the style.css.

I have downloaded the roots theme and then created a child theme with that so then I could just play with the theme with out causing any issues.

Read More

My problem is the local css folder that contains the app.css, bootstrap.css etc is not being set.

Using the same folder structure as the parent theme I have noticed that the local folder is still loading the parents local folder and not the child’s local folder.

What I am getting is:- 

<link rel="stylesheet" href="http://localhost:8080/infinity/wp-content/themes/parent-theme/assets/css/bootstrap.css">

What I was expecting is :- 

<link rel="stylesheet" href="http://localhost:8080/infinity/wp-content/themes/child-theme/assets/css/bootstrap.css">

Could anyone explain what I am missing because it is giving me a headache or ultimately a possible solution to this problem.

Thanks

Post Views: 1

Related posts

Leave a Reply

2 comments

  1. Still no specific solution but after asking the same question on the roots group page I was informed that roots was intended to be a ‘Starter theme’ and not a parent.

    Effectively meaning the coding around roots makes it difficult to use as a child theme.

    My suggestion is make css changes to the app.css file these means the bootstrap css stay the same and your changes are in one page.

    Hope this helps someone.

  2. Why not try to import the css file you need in your child-theme style.css ?

    It seems that the overwrite of parent theme only applys to style.css and wordpress template php files. So for your situation, try this in your child-theme style.css:

    /*
Theme Name:     xxx Child
Theme URI:      http://example.com/
Description:    Child theme for the xxx theme
Author:         Your name here
Author URI:     http://example.com/about/
Template:       xxx                             
Version:        0.1.0
*/
@import url("../xxx/style.css");
@import url("assets/css/bootstrap.css");
@import url("assets/css/app.css");
@import url("etc.");
/*Here goes other styles*/

    I’m also coming across the similar problem, but what bothers me is an js file and some non-template php files. Merely keeping the same filename and the same structure as in parent theme won’t help.

    Anyone knows how to keep my changes with those files after updating my parent theme?