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.
Related
I'm including a .css file in my plugin and the files show up on my page and I can see the path and click through the path to see the raw .css content. However, It is not applying to my HTML elements.
I removed the wp_enqueue_style() that included my CSS file in my plugin and placed the code in my theme's custom CSS template I'm using (just the raw css) and refresh and that works; the CSS is applied to my HTML elements as expected.
One thing to note is that in the same plugin I'm returning HTML that I want this CSS to be applying to through a shortcode on a page.
Is it something with the CSS not being registered/applied in time to pick up or find the elements if it's adding from a plugin? I need the CSS to be added from the plugin and not from the theme's template. Is there something I'm missing?
Thanks!
I figured out my own problem.
My plugin code was:
wp_enqueue_style('nbfx-fs-css', plugins_url('/assets/css/nbfx-fs.css', __FILE__), array(), null, true);
I took a look at my HTML source and found this:
<link rel='stylesheet' id='nbfx-fs-css-css' href='MY-CORRECT-CSS-FILE-PATH' type='text/css' media='1' />
And I noticed the media='1'. So apparently I need to leave the 4th parameter blank or provide 'all'.
I hope this helps someone else who copy and paste the wp_enqueue_style() function with set parameters from someone else.
I'm trying add CSS to testimonial slider (3rd Party plugin) on my wordpress theme. But my custom CSS file loads before the plugin CSS file.
Is there a way I can make the my custom CSS load after the plugin CSS?
I don't want to make any changes to the Plugin code.
Edit:
I noticed that the plugin is using "wp_print_styles" to load it's css file.
You'll need to update your plugin code to do this the "proper way" I believe.
Since you need it to load last I would take the common path of utilizing the wp_enqueue_scripts hook/function to set a low priority for it being processed. This way you can guarantee that the HTML remains valid and that you are loading your styles and scripts after all the default ones within WordPress plugin's code:
function my_plugin_unique_style() {
$base = get_stylesheet_directory_uri();
wp_enqueue_style( 'style-my-plugin-style', $base.'/styles.css' );
}
add_action('wp_enqueue_scripts', 'my_plugin_unique_style', 11 );
Of course you will have to modify this to use your plugin's css file name but this is the basic way to do this and have valid markup. It's worth mentioning that if this still loads before another CSS file in the HEAD of the page you should bump up the number from 11 to some other higher number.
You can read more about wp_enqueue_scritps here.
I have created a child theme of twenty fifteen. I'd like to remove the google fonts loaded in wp_head but I can't get it to work. What is loaded is:
<link rel='stylesheet' id='twentyfifteen-fonts-css' href='//fonts.googleapis.com/css?family=Noto+Sans%3A400italic%2C700italic%2C400%2C700%7CNoto+Serif%3A400italic%2C700italic%2C400%2C700%7CInconsolata%3A400%2C700&subset=latin%2Clatin-ext' type='text/css' media='all' />
I've created a function.php in my child theme but I can't figure out how to remove this. I've gotten other things remove using:
remove_action('wp_head', '...');
But I can't figure out how to remove the fonts.
Also, any tips on how to remove the IE condition statements and css would be very helpful!
Thanks!
TwentyFifteen uses a custom function to build a Google fonts URL which is then used with wp_enqueue_style(). To remove Google fonts create a function in your child theme to dequeue the stylesheet.
Use the wp_enqueue_scripts hook and make sure to give it a higher priority than the hook in the parent theme. The default is 10 so in my example I use 20.
Example:
function wpse_dequeue_google_fonts() {
wp_dequeue_style( 'twentyfifteen-fonts' );
}
add_action( 'wp_enqueue_scripts', 'wpse_dequeue_google_fonts', 20 );
Deregister/Dequeue styles is best practice
https://codex.wordpress.org/Function_Reference/wp_deregister_style
https://codex.wordpress.org/Function_Reference/wp_dequeue_style
But you can use 'style_loader_src' filter too, to filter out styles with string condition, or other conditions, here is example for google fonts
add_filter( 'style_loader_src', function($href){
if(strpos($href, "//fonts.googleapis.com/") === false) {
return $href;
}
return false;
});
Open theme's functions.php and find a function called twentyfifteen_fonts_url() - it handles all the fonts stuff. In default file it starts on line 144. Edit it to your needs.
Other options:
Use a plugin to control fonts - https://wordpress.org/plugins/typecase/
Use a plugin to remove default fonts - https://wordpress.org/plugins/remove-open-sans-font-from-wp-core/
Use wp_deregister_style() function to manually unregister that stylesheet. See here.
As for the IE conditional - check the next function in functions.php, called twentyfifteen_scripts(). It starts on line 196.
Not sure if I worded it correctly but basically I wanted to load plugin CSS/JS on pages only that uses the actual plugins.. I have gotten a lot of it done by search thru the plugin files for any handles used in wp_enqueue_script within the plugins and simply wp_dequeue_script them in functions.php
However, there are some enqueues for style that include a .php and not a css file, for example.. in the plugin it enqueues a file
wp_enqueue_style("myrp-stuff", MYRP_PLUGIN_URL . "/myrp-hotlink-css.php");
so I've tried:
wp_dequeue_style('myrp-stuff');
wp_deregister_style('myrp-stuff');
It doesn't work
However, when the page/post is rendered it shows as
<link rel='stylesheet' id='myrp-stuff-css' href='http://www.modernlogic.co/wp/wp-content/plugins/MyRP/myrp-hotlink-css.php?ver=3.4.2' type='text/css' media='all' />
It addes -css to the id and it refuses to dequeue/deregister and be moved.
I have also tried the following with no luck
wp_dequeue_style('myrp-stuff-css');
wp_deregister_style('myrp-stuff-css');
Any suggestions?
Scripts and styles can be enqueued in any order and at anytime before wp_print_* actions are triggered. Which can make it difficult to remove them from the queue before output.
To make dequeue work consistently hook into into wp_print_styles or wp_print_scripts with a high priority, as this will remove the scripts and styles just before output.
For instance in your plugin loader code or template's functions.php file you could have a function and action hook like this:
function remove_assets() {
wp_dequeue_style('myrp-stuff');
wp_deregister_style('myrp-stuff');
}
add_action( 'wp_print_styles', 'remove_assets', PHP_INT_MAX );
Setting a high priority (third argument to add_action) when hooking into the action will help ensure that the callback remove_assets gets called last, just before scripts/styles are printed.
Note, while this technique is legitimate for removing scripts/styles it should't be used for adding assets. See this Wordpress Core blog post for more info.
Just to be sure, have you placed your code inside a function called by an action like this?:
add_action('wp_enqueue_scripts', 'dequeue_function');
function dequeue_function() {
wp_dequeue_style( array('myrp-stuff', 'myrp-stuff-css') );
wp_deregister_style( array('myrp-stuff', 'myrp-stuff-css') );
}
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