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');
Related
On wordpress, using GeneratePress free template, I'm trying to push my custom script after all others.
The big problem is that all the scripts of a plugin (Visual Portfolio) are always loaded at the very end, after my scripts.
I tried to put a very high $priority parameter in the add_action() functions but it doesn't work.
function register_scripts_and_styles() {
wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom-js.js', null, true);
}
add_action( 'wp_enqueue_scripts', 'register_scripts_and_styles', 99999 );
Do you have any idea how to fix this problem?
Thank you very much.
Here's idea, js and css files in WP use different technique to figure out in what order js\css files should be loaded.
here's function
wp_enqueue_script('custom-js', get_stylesheet_directory_uri() . '/js/custom-js.js', array('js-handle-of-some-dependency','js-handle-of-some-other-dependency'), true);
Each script has it's handle, it's first argument to this function, in your case it's custom-js.
Based on digging into plugin's code it's main js has handle visual-portfolio
So you can just enqueue your script with setting it's handle as dependency.
And final solution will be:
function register_scripts_and_styles() {
wp_enqueue_script( 'custom-js', get_stylesheet_directory_uri() . '/js/custom-js.js', array( 'jquery', 'visual-portfolio' ), '1', true );
}
add_action( 'wp_enqueue_scripts', 'register_scripts_and_styles' );
I've also added jquery as dependency as I guess you are using jQuery in your js code, you can remove it if not.
I've also set version to '1' - it's a query string version which will be applied to your JS code so when you do update and move code live you can force user's browsers to load a fresh one just changing version here.
And see last argument true, it denotes that your script will be injected in footer.
If your code relies not only on main.js of this plugin you might need to add more dependencies as this plugin enqueues bunch of scripts, see whole list of them in /wp-content/plugins/visual-portfolio/classes/class-assets.php from line 350, at the end of register_scripts method of class defined in this file. So you really can put exactly all script's handles on which your custom js code relies and WP will figure out right order of linking those files to page for you.
Happy codding :)
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've enqueued a style sheet using
wp_enqueue_style( 'home-custom-style', get_stylesheet_directory_uri() .
'/css/style.css');
in my child theme
then when I tried to modify it, I've realised that wordpress gave it an automatic version, which now I can't change.
I have tried modifying the enqueue code adding a version,
wp_enqueue_style( 'home-custom-style', get_stylesheet_directory_uri() .
'/css/style.css' , array(), '30140222');
also tried dequeuing it and enqueuing it again, and deleting the file and readding it in the folder but nothing is working.
except null.
For now I made a hard refresh (bypassing my cache) pressing Ctrl + F5 in the browser, cause I'm on the local host, but still need an answer to use it on the server.
heads-up the following applies to scripts too, just replace style with script and you're good to go
The problem is that you're trying to modify an already registered style. See, when you call wp_enqueue_style(), the style is registered and enqueued at the same time(vs calling wp_register_style() and then wp_enqueue_style() which I recommend).
However, if a style has already been registered, when you try to enqueue it the extra parameters are not used, they're just ignored.
What you need to do is the following( make sure to fill in the correct parameters in the wp_register_style() below):
wp_deregister_style( 'my-style' );
wp_register_style( 'my-style', ... );
wp_enqueue_style( 'my-style' );
This first deregisters the still you want to modify and then registers it again with the modified parameters. This will work with styles that are used as a dependency or have dependencies of their own, because dependencies are resolved at the time the style is being loaded on the page and not when it's registered/enqueued.
For what you're trying to achieve though, I would personally just register whatever scripts and styles I want to override in the child theme before the parent theme does it. That way you won't have to deregisters and register them. Here's an example(part of it is the sample parent theme's code):
function parent_theme_enqueue_scripts(){
wp_enqueue_style( 'example-style', get_bloginfo( 'template_directory' ) . '/css/example.css', array(), 'v1.0.0' );
}
add_action( 'wp_enqueue_scripts', 'parent_theme_enqueue_scripts', 10 );
function child_theme_enqueue_scripts(){
wp_register_style( 'example-style', get_bloginfo( 'stylesheet_directory' ) . '/css/example.css', array(),'v1.2.0' );
}
add_action( 'wp_enqueue_scripts', 'child_theme_enqueue_scripts', 5 );
The important thing to notice here is the priority on child_theme_enqueue_scripts - it's lower than that of parent_theme_enqueue_scripts. Also note that we're not directly enqueue-ing the style, but instead we're just registering it. That's in order to not mess up the loading order of styles(in case the parent theme enqueues multiple styles but doesn't use dependencies to do that).
Just add this function in function.php
function wpa() {
wp_enqueue_style( 'home-custom-style', get_stylesheet_directory_uri() . '/css/style.css' , array(), '30140222' );
}
add_action('wp_enqueue_scripts', 'wpa');
You should try to search your themes & plugins folders for functions that modify your enqueued styles and scripts.
I was looking for lines containing style_loader_src or ver= and discovered a plugin called "Child Theme Configuratior" that was the culprit.
Turned that plugin off and everything started to work as expected.
I am currently developing a theme and i am having issues when it comes to wp_enqueue. This is what i got but it isn't working.
function theme_name_styles() {
wp_enqueue_script( 'style-name',get_template_directory_uri() . '/css/dropdown.css' );
}
add_action( 'wp_enqueue_scripts', 'theme_name_styles' );
secondly i am trying to tell if the toolbar is active on the frontend of wordpress or not and using conditions to display something if it is not active.
wp_enqueue_script is used to enqueue script , use wp_enqueue_style instead
other thing is its better to register script or style first before using
wp_register_script // to register script
wp_register_style // To register style
then enqueue using wp_enqueue_script wp_enqueue_style // learn more about it on codex
Try this :
add_action( 'wp_enqueue_scripts', 'register_plugin_styles' );
function register_plugin_styles() {
wp_register_style( 'style-name', get_template_directory_uri() . '/css/dropdown.css' );
wp_enqueue_style( 'style-name' );
}
More info : http://codex.wordpress.org/Function_Reference/wp_register_style
For the toolbar, maybe you can find something here: http://digwp.com/2011/04/admin-bar-tricks/
There are specific functions to enqueue scripts and styles in wordpress. wp_enqueue_script is used to enqueue scripts only and wp_enque_style is used to enqueue stylesheets. These enqueued files will be attached at the point where you called the wordpress function wp_head. Note that these functions check for MIME type so that if you trying to enqueue a script using the wp_enqueue_style then it'll assume your stylesheet as a script and vice versa. You can see the type and explanation of the error if you use a debugger tool. The developers tool in google chrome is quite awsome. You can use this.
There is a function is_admin_bar_showing which can tell explicitly whether the admin bar is showing in the front end or not. http://codex.wordpress.org/Function_Reference/is_admin_bar_showing
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;
}