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;
}
Related
Though I can certainly delete the files or references to them in the plugin code, this is not futureproof when I made plugin updates. They say that if I create a copy of their frontend.css file in my {theme}/{pluginname}/css folder, it will override theirs, but that doesn't work.
So I'm left with a style that takes priority because it matches on one of their containers and overrides my default page links.
For example:
.somecontainer a {
color:red
}
I need it gone. Preferably in a way that doesn't use !important or me specifying another instance of the same to override the values because then I have to manage the colors and styles in my original CSS AND in the override.
I already found code to print all enqueued styles and there were none so I can't just unqueue it.
The answer was apparently to DEqueue their styles at the same time I enqueued mine. Not sure why... seems like that would create problems, but this worked:
function my_style() {
wp_dequeue_style( 'pmpro_frontend' );
wp_dequeue_style( 'pmpro_print' );
wp_enqueue_style( 'my-style', get_bloginfo('stylesheet_url') );
}
add_action('wp_enqueue_scripts', 'my_style', 11 );
First you'll need to identify the names/handles that the plugin's stylesheets were originally enqueued under. You can do this
quickly by running a search on your web server in the plugin's
directory, e.g. grep wp_enqueue_style /var/www/mysite/wp-content/plugins/nameofplugin/
Then add a dequeue function to the functions.php file,
and invoke it on the wp_enqueue_scripts with a priority higher than the
priority level set on the plugin's original enqueue function.
function remove_plugin_styles() {
wp_dequeue_style( 'name_of_plugin_stylesheet' );
wp_dequeue_style( 'name_of_plugin_stylesheet_2' );
}
add_action( 'wp_enqueue_scripts', 'remove_plugin_styles', 99 );
There's a bunch of css in my parent theme I don't need and instead of just overwriting it all, I'd like to dequeue it completely and put most of the CSS from the parent theme into the child themes css file.
Is this possible?
First you'll need to identify the names/handles that the parent theme's stylesheets were originally enqueued under. You can do this quickly by running a search on your web server in the parent theme directory, e.g. grep wp_enqueue_style /var/www/mysite/wp-content/themes/parent_theme/
Then add a dequeue function to the child theme's functions.php file, and initialize it with a priority higher than the priority level set for the parent theme's enqueue function:
function remove_parent_styles() {
wp_dequeue_style( 'name_of_parent_stylesheet' );
wp_dequeue_style( 'name_of_parent_stylesheet_2' );
}
add_action( 'init', 'remove_parent_styles', 99 );
You should identify your styles/scripts handle name before dequeue it. A easiest way is install Query Monitor plugin and see in Styles tab. Handle name is in second column.
With this plugin, you also see CSS files are required by any dependants.
Dequeue your CSS:
Append this code to the end of your theme's functions.php file:
function tdt_dequeue_styles(){
wp_dequeue_style('your-handle-name');
wp_deregister_style('your-handle-name');
// Another style dequeue
wp_dequeue_style('your-2nd-handle-name');
wp_deregister_style('your-2nd-handle-name');
}
add_action( 'wp_print_styles', 'tdt_dequeue_styles', 9999 );
I've followed these two links of a "tutorial" to set up a WP page with the use of git and composer.
https://deliciousbrains.com/storing-wordpress-in-git/
https://deliciousbrains.com/using-composer-manage-wordpress-themes-plugins/
My question:
By looking at the network tab of the developer tools on chrome I see that the bootstrap stylesheet gets called as last one, and so its overwrite the theme styles and my child-theme styles.
But I want the following order:
first: bootstrap styles, second parent-theme styles, and third child-theme styles.
How do I accomplish that goal without touching the parent-theme directly?
Or do I get something wrong and this order, as it is now is intended?
You have to use dependency parameter of wp_enequeue_style function : Filenames are used as example, please change according to your need.
add_action( 'wp_enqueue_scripts', 'mytheme_scripts' );
/** Enqueue scripts and styles. **/
function mytheme_scripts()
{
wp_enqueue_style( 'bootsrap-styles', get_template_directory_uri() . '/css/bootstrap.min.css','', 'v1' );
wp_enqueue_style( 'main-css', get_template_directory_uri() . '/css/main.css',['bootsrap-styles',''], 'v1' );
}
You can do this through your theme's functions.php
add_action('wp_enqueue_scripts', function(){
wp_enqueue_style('mainstyle', get_template_directory_uri() . '/main.css' );
}, 99);
Wordpress will place the stated .css file in your header and giving a 99 priority, which means it will add it later than the rest. You can do this for each of the desired .css files and maintain your own preferred order.
I'm working on a WordPress theme.
My theme uses bootstrap and another framework, plus some custom CSS as well.
I'd like to know if there's a way to decide the order of the stylesheets to include so that my custom CSS is loaded ALWAYS after the vendor ones.
I had a look around, also this question is basically asking the same thing as I am (Ordering Wordpress Stylesheets?) but the problem is that it's not a nice and clean solution in my opinion.
I don't want to use important on everything to override, and I don't want to manually add my styles to the header.php (the wp_enqueue_style function is there for a reason, and I'd like to use that function instead).
Reading the documentation, the only thing that may be slightly related is the use of the deps array, but I'm not sure it will do what I need.
here's the link to the documentation or your reference: https://developer.wordpress.org/reference/functions/wp_enqueue_style/
the way I enqueue my stylesheets now is pretty basic:
in my functions.php:
function hw_resources()
{
wp_enqueue_style('fontawesome-css', '/wp-content/themes/hwTheme/assets/css/font-awesome.min.css');
wp_enqueue_style('bulma-css', '/wp-content/themes/hwTheme/assets/css/bulma.css');
// wp_enqueue_style('bootstrap-css', '/wp-content/themes/hwTheme/assets/css/bootstrap.css');
wp_enqueue_style('animate-css', '/wp-content/themes/hwTheme/assets/css/animate.min.css');
wp_enqueue_style('hw-css', '/wp-content/themes/hwTheme/assets/css/hw.css');
wp_enqueue_script('hw-js', '/wp-content/themes/hwTheme/assets/js/hw.js', array(), false, false);
}
add_action('wp_enqueue_scripts', 'hw_resources', 0);
The stylesheets are included, but mine (hw.css) is NOT the last one and so Bulma (which goes at the bottom) overrides some of my custom style.
any suggestions? Is the deps array useful for this reason? how do I use it?
thanks
Well you can set your bulma.css as a dependency on your hw.css.
So first you register your css via wp_register_style and then you use wp_enqueue_style.
Like so:
function hw_resources()
{
wp_register_style( 'hw-css', get_template_directory_uri() . '/hw.css', array(), '1.0', 'all' );
wp_register_style( 'bulma-css', get_template_directory_uri() . '/bulma.css', array( 'hw-css' ), '1.0', 'all' );
wp_enqueue_style('hw-css');
}
add_action('wp_enqueue_scripts', 'hw_resources');
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' );
}