Wordpress Child-Theme CSS not Reflecting on Site

1
votes

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;
}
4
csswordpress
WP codex says: **Template. (required) directory name of parent theme, case-sensitive. Attention: You have to switch to a different theme and back to the child theme when you modify this line. ** Maybe that is your problem? - Ivan Ivanic
tech-papers.org/how-to-create-wordpress-child-theme - Balwinder SIngh
@IvanIvanić: stupidly, this solves everything. And stupidly, the note you mention is now sadly removed from the official documentation. Yours should be added as answer and marked as correct to save head-scratching :) - Henrik Erlandsson

4 Answers

10
votes

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!

1
votes

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.

0
votes

Watch out from caching :

  1. wp cache plug-ins

  2. server side cache (APC etc.)

  3. local browser cache

0
votes

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 );