I've semi-successfully created a wordpress child-theme. By successfully I mean:
I managed to create a child-theme directory in my themes folder, next
to my main theme
I created a style.css file in the child-theme dir
I saw the style show up on my Wordpress back-end and managed to activate it
I added templates (header.php, sidebar.php,...) to the directory
I made changes to the above templates and saw the changes on my site
However, there is one huge problem:
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;
}
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!
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.
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 );
Watch out from caching :
wp cache plug-ins
server side cache (APC etc.)
local browser cache
Related
I'm starting from a blank Storefront child theme template I found on GitHub. The child theme's style.css contains some author information but everything is commented out. A GTmetrix scan shows that this stylesheet file is being loaded and recommends that I load it inline, but I'm thinking since it's essentially empty, why load it at all?
I add my style customizations in the Additional CSS box of the Wordpress Customizer, so I wish to dequeue the enpty child theme's style.css and hopefully optimize page load speed a little bit.
So I added the following to my functions.php:
/* Dequeue Storefront Child Theme style.css */
add_action( 'wp_enqueue_scripts', 'dequeue_storefront_child_theme_style ');
function dequeue_storefront_child_theme_style() {
wp_dequeue_style(' storefront-child-style ');
}
But I can see it is still being loaded in the page source (and on GTmetrix re-scan).
<link rel='stylesheet' id='storefront-child-style-css' href='https://www.mywebsite.com/wp-content/themes/storefront-child-theme/style.css?ver=1.0.0' type='text/css' media='all' />
So my questions are, am I correct in my assumption that this blank stylesheet ise unnecessary because it slows down page load? And how do I go about dequeueing it properly?
using the code above was not working because it has a space in this 'dequeue_storefront_child_theme_style ' and ' storefront-child-style '
After fixing this, this code worked for me with a higher priority:
You should probably not set it that high but pick a value suited to you.
add_action( 'wp_enqueue_scripts', 'dequeue_storefront_child_theme_style',9999);
function dequeue_storefront_child_theme_style() {
wp_dequeue_style('storefront-child-style');
}
The style.css file is a necessary file as per the WordPress docs as it tells WordPress basic info about the theme, including the fact that it is a child theme with a particular parent.
On Wordpress.org, I activated a BLANK theme by Chris Coyier.
I edit index.php and my changes are showing up on my website. Fantastic.
I edit the existing style.css file but none of my edits are showing up. Ugh.
I delete style.css and the website still works. Why?
I repeat these steps with a different blank theme. Same issues.
Questions
Why am I unable to edit style.css of ANY blank theme? I am confused because I am able to edit style.css of Twentyfourteen theme.
If I delete style.css from the blank theme, the website still works and still shows the same CSS styling. How is this possible?
For blank themes, the stylesheet is called in header.php as
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" />
But for Twentyfourteen theme, I don't see any call for a stylesheet.
Why do regular themes not have a call for a stylesheet in header.php? Is this why I cannot edit style.css of blank themes?
Most likely your browser is caching the CSS?
What happens when you use your browsers dev tools to check the CSS source.does that show your edits?
When you say "delete the CSS" do you get a missing resource error on the browser console?
If it does not, try force reloading your page.
I encountered a problem with my wordpress (canvas) site in ie8 and traced it to the stylesheet link in the header of my child theme - this code:
href="<?php bloginfo('stylesheet_url'); ?>"
translates in the browser as "...canvas-child/style.css" which is wrong - according to woothemes instructions you should customize css in your child theme with 'custom.css' only, and leave 'style.css' in your parent 'canvas' theme. I really need to know 1. is this an error 2. what should this php code be pointing to? Thanks.
Check out: http://codex.wordpress.org/Child_Themes for information on child themes.
style.css is the one and only required file in a child theme. It provides the information header by which WordPress recognizes the child theme, and it replaces the style.css of the parent.
When you use Child Templates, just copy a file with the same name to your child theme and enter your adjustments here.
I have just followed a tutorial about creating custom WordPress theme, each and everything went just fine from static to dynamic conversion but when I activate that theme and I come up with a plain HTML document with blue hyperlinks which mean the site is not picking up the css file of style.css
Am I doing something wrong? Please help me.
Check your source HTML and see that the path to your CSS is correct.
You can use bloginfo() to find the correct path by using:
<link rel="stylesheet" href="<?php bloginfo('template_directory'); ?>/style.css">
If your style.css resides in the root folder of your template.
Where did you add the link to the file? - View the source of the page to see if the link is there and try navigating to it to see if it returns a 404 (Not Found) or other error.
My preferred way to include theme stylesheets is adding something like this to my functions.php.
add_action('wp_enqueue_scripts','enqueue_my_styles_scripts');
function enqueue_my_styles_scripts() {
wp_enqueue_style('my-styles',get_stylesheet_directory_uri().'/style.css');
}
Check out wp_enqueue_style and make sure you have a wp_head() call in your header file
I am creating a Wordpress JigoShop Online Store. Having bought their Jigotheme, I have created a child theme and activated it (with Jigotheme as parent template).
I tried to import the styles from the jigotheme using:
#import url("../jigotheme/style.css");
(as per wordpress instructions)
The stylesheet is not pulling in - child theme works fine aside from this CSS import issue.
I know that no code can be above the #import code in the stylesheet - but would it not be working because the parent style.css also has #import code at the top of it? Are they conflicting perhaps?
Any help would be really appreciated!
You could just add an other <link>element to the head or enqueue it.
The import statement should work. Double check the directory path and .css filename. If you're using Chrome, you can check the network tab to see if the parent style.css is actually being accessed.
Follow few steps:
Replace bloginfo('template_directory'); ?> with php bloginfo('stylesheet_directory'); ?> (Credit goes to #WouterB)
Check if your parent theme using stylesheet which is located under sub-folder (eg. theme/css/style.css), in this case you have to place your child theme css under that folder.
Remember to change path (may be you have to ../ before previous url)