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.
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.
What's the best way to override woocommerce.css?
In my style.css I have to write those css again to override it, and put !important after each css. I think this is not the best practice to do so.
Anyone has a better idea?
WooCommerce enqueues 3 stylesheets by default. You can disable them all using:
add_filter( 'woocommerce_enqueue_styles', '__return_false' );
For details on how to disable individual WooCommerce stylesheets, see their Disable the default stylesheet article.
There's another approach in an article by Carrie Dills. She's using the Genesis theme but it could be reworked for other themes I think.
In essence, what she recommends is changing the order that your styles load so that your theme's stylesheet is loaded after the WooCommerce stylesheet. i.e. it is enqueued at a higher priority.
For Genesis it looks like the below. If you can access your framework/theme's stylesheet loading with a similar hook, you could do the same.
/**
* Remove Genesis child theme style sheet
* #uses genesis_meta <genesis/lib/css/load-styles.php>
*/
remove_action( 'genesis_meta', 'genesis_load_stylesheet' );
/**
* Enqueue Genesis child theme style sheet at higher priority
* #uses wp_enqueue_scripts <http://codex.wordpress.org/Function_Reference/wp_enqueue_style>
*/
add_action( 'wp_enqueue_scripts', 'genesis_enqueue_main_stylesheet', 15 );
You can override woocommerce.css with custom.css file that can be located either in default wordpress theme or in child theme.
You can also make a fallback to default woocommerce.css if something happens to custom.css file.
add_action('wp_enqueue_scripts', 'override_woo_frontend_styles');
function override_woo_frontend_styles(){
$file_general = $_SERVER['DOCUMENT_ROOT'] . '/wp-content/themes/twentyfifteen/css/custom.css';
if( file_exists($file_general) ){
wp_dequeue_style('woocommerce-general');
wp_enqueue_style('woocommerce-general-custom', get_template_directory_uri() . '/css/custom.css');
}
}
Same thing is for other woocommerce frontend styles (woocommerce-layout and woocommerce-smallscreen).
If you're doing this in child theme, then use get_stylesheet_directory_uri() instead of get_template_directory_uri() and change file path according to child theme name.
My approach is to follow the principle cascade of CSS. So basically the one that loads last will override the previous rules if no !important was defined.
Check here:
//This is the order the css load by default, at leat on the sites I have worked!!!
<link rel="stylesheet" href="http:/css/custom_styles.css" type="text/css" media="all">
<link rel="stylesheet" href="http:/css/woocomerce.css" type="text/css" media="all">
So what is the idea Load your custom CSS after the woocommerce has loaded.
Method 1: Adding a Low priority on the [add_action] for the style add_action like:
function load_my_css(){
wp_enqueue_style('custom-theme', URL TO STYLE);
}
// (the higher the number the lowest Priority)
add_action('wp_enqueue_scripts', 'load_my_css', 5000);
Method 2: Remove woocommerce styles, so you create your own styles
// Or just remove them all in one line
add_filter( 'woocommerce_enqueue_styles', '__return_false' );
Method 3: Add dependency Array to your custom style
function load_my_css(){
wp_enqueue_style('custom-theme', URL TO STYLE, array(DEPENDECIES HERE));
}
Hope one of the Methods helps.
You'll find what you need in WooCommerce documentation. They offer two functions to either:
Stop WooCommerce plugin from loading all or specific stylesheets using their woocommerce_enqueue_styles() function.
Add your custom stylesheets within their plugin using the wp_enqueue_woocommerce_style() allowing you to override woocommerce.css.
Link to WooCommerce documentation « disable the default stylesheets »
For newer versions WooCommerce 4.x+ use this:
add_action( 'wp_print_styles', 'dequeueWooCommerceStyles' );
public function dequeueWooCommerceStyles()
{
wp_dequeue_style('wc-block-style');
wp_deregister_style( 'wc-block-style' );
}
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 have a problem where I've been able to include a custom css in the section of my wordpress theme with the following code:
function load_my_style_wp_enqueue_scripts()
{
wp_register_style('my_styles_css', includes_url("/css/my_styles.css"));
wp_enqueue_style('my_styles_css');
}
add_action('wp_enqueue_scripts','load_my_style_wp_enqueue_scripts');
But the order in the source code is as follows:
<link rel='stylesheet' id='my_styles_css-css' href='http://...folderA.../my_styles.css?ver=3.1' type='text/css' media='all' />
<link rel="stylesheet" id="default-css" href="http://...folderB.../default.css" type="text/css" media="screen,projection" />
<link rel="stylesheet" id="user-css" href="http://...folderC.../user.css" type="text/css" media="screen,projection" />
I want my_styles_css to be the last file to load, overriding default and user files. I've tried to achieve this by modifying wp_enqueue_style in different ways, but without any success. I've tried:
wp_enqueue_style('my_styles_css', array('default','user'));
or
wp_enqueue_style('my_styles_css', false, array('default','user'), '1.0', 'all');
I've seen some related questions without answer or with these last 2 methods that are still failing for me.
The function above is part of a plugin that I've got enabled in my wordpress installation.
The add_action function has a priority parameter that might help:
$priority
(int) (optional) How important your function is. Alter this to make your function be called before or after other functions. The default is 10, so (for example) setting it to 5 would make it run earlier and setting it to 12 would make it run later.
Default: 10
http://codex.wordpress.org/Function_Reference/add_action
Or you could directly link to your css in your header.php file rather than using wp_enqueue_style, and therefore place it exactly where you want.
Otherwise there seems to be an answer here: How to force wp_enqueue_style to display CSS at the very bottom of the head tag to override all CSS rules?
The correct way to add a stylesheet to your theme is by way of the wp_enqueue_style() function:
wp_enqueue_style( $handle, $src, $deps, $ver, $media );
With $deps you specify which stylesheets should be loaded before your custom stylesheet.
What about add_action('wp_head','load_my_style_wp_enqueue_scripts');?
Use wp_head instead of wp_enqueue_scripts.
Why not edit the theme?
You can do this from the Dashboard
Appearance -> Editor -> header.php
Just add your css last.
I have a wordpress theme with a stylesheet that needs to be loaded last, since plugin css are interfering with my theme. I was wondering if there was some type of function I could use to make the main stylesheet load last in my theme.
when you enqueue your stylesheets, use a higher priority, e.g.:
add_action( 'wp_enqueue_scripts', array(&$this, 'theme_styles'), 99 );
If some plugins have hooks on 'wp_print_styles', then you have to use it instead, as 'wp_print_styles' will be written after 'wp_enqueue_scripts', iirc.
And as you have complete control over your theme, you also could include your styles directly into header.php, if the hassle with the actions isn't worth time...
wp_print_styles works better. just add a priority to the call, for example 99.
function load_css() {
wp_enqueue_style( 'homepage-css', get_stylesheet_directory_uri() . '/css/homepage-css.css', array(), 0.256, 'all');
}
add_action( 'wp_print_styles', 'load_css', 99 );
You can always use !important to override other rules, but I recommend to also be sure that the plugin stylesheets are being inserted properly using the following method. By adding the priority number you can render them at a later time.
Be sure your stylesheets are loading before all your scripts inside the tag of your header.
You always need to load stylesheets before scripts and wordpress takes care of that if you use
wp_enqueue_style and wp_enqueue_script
For example in your functions.php you should use
add_action('wp_enqueue_scripts', function(){
wp_enqueue_style('main-style','http://yoursite.com/styles/main.css');
}, 99);
Wordpress then will place main.css in your header and giving a 99 priority means it will add it later than the rest (by default the priority of this function it's 10)
Be sure you got wp_head() in your header file.
Regards
You could add '!important' to the end of the css you want to override other classes
example:
h1 {
color:red !important;
}