CODEWITHSUNDEEP
csswordpress
WouterB
WouterB

Reputation: 235

Wordpress Child-Theme CSS not Reflecting on Site

I've semi-successfully created a wordpress child-theme. By successfully I mean:

  1. I managed to create a child-theme directory in my themes folder, next to my main theme
  2. I created a style.css file in the child-theme dir
  3. I saw the style show up on my Wordpress back-end and managed to activate it
  4. I added templates (header.php, sidebar.php,...) to the directory
  5. I made changes to the above templates and saw the changes on my site

However, there is one huge problem:

  1. Whatever CSS I try to add to the style.css file, it's not affecting the site

I know the "information header" must be ok since I was able to see/activate the child-theme. But I really can't figure out what is wrong. I tried removing the @import rule, which according to the Wordpress codex should remove all styles from my site - nothing happened.

I'm using the Panorama theme and created "panorama-technology" as a child. Below you can see the code I have in the style.css file inside the child-theme: "panorama-technology":

/*
Theme Name: panorama-technology
Template: panorama
*/

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

#search{
margin: 15px 15px 0 0;
}

Upvotes: 1

Views: 16520

Answers (4)

Jeff Gu Kang
Jeff Gu Kang

Reputation: 4869

Do not use import.

Add time after css uri for refreshing everytime.

In your function.php

function child_style() {
    wp_enqueue_style( 'parent-child', get_stylesheet_uri().'?'.time());
}
add_action( 'wp_enqueue_scripts', 'child_style', 20 );

Upvotes: 1

maioman
maioman

Reputation: 18734

Watch out from caching :

  1. wp cache plug-ins

  2. server side cache (APC etc.)

  3. local browser cache

Upvotes: 0

justin
justin

Reputation: 101

WouterB, I had the same problem with my child theme loading in the backend, and child php pages overriding the parent theme php pages, but NO child CSS changes loading to override the parent styles.

So,although with different coding, it turns out my parent theme was written in such a way that the header was also looking for the stylesheet in the template directory, so your solution was spot on in concept.

Thus, by changing the call in the header from : 

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

to:

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

--did the trick like magic. At least as far as I can tell so far.

You get major credit in my book!

Upvotes: 10

JCam
JCam

Reputation: 614

First I'd try an absolute path to be sure that the path isn't the problem. If that does not solve the issue. Place the @import at the very top of the css file or directly after thelast "*/". I think white space is probably the culprit here.

Upvotes: 1

Related Questions