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 );
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 );
I'm having issue in overwriting parent theme file via child theme. Normally I copy parent theme file to child theme by following same file structure/path and it works. But this time it is not working. I'm not sure, what is the problem...
The parent file is located at:
wp-content/themes/THEMENAME/assets/js/FILENAME.js
and I put at this path in child theme:
wp-content/themes/CHILDTHEME/assets/js/FILENAME.js
Same problem on this file:
Parent Path:
wp-content/themes/THEMENAME/includes/FILE.php
Child Path:
wp-content/themes/CHILDTHEME/includes/FILE.php
I'm pretty sure, I'm missing something technical but I'm unable to figure out. Looking for help!
Child theme doesn't override css/js files, to achieve that, You will need to dequeue these scripts in the child functions.php file, You need to get the script handle name that parent theme uses to enqueue it.
add_action( 'wp_enqueue_scripts', function(){
wp_dequeue_script( 'script-handle-name' );
}, PHP_INT_MAX );
Child theme only overrides the template files Template Hirarchy
To override a php file, There are two conditions:
1) If the file function you want to override is hooked to action / filter then create a function in the child theme functions.php file with a different name and hook it with a higher priority.
2) If you want to override the function itself, you can recreate the function in the child theme functions.php with the same name only if The function is created in the parent theme with the condition.
if ( ! function_exists ( 'my_function' ) ) {
function my_function() {
}
}
otherwise, It will raise a fatal error.
A WordPress website loads a lot of things before the main css file. The stylesheet was previously hard-coded in the head in the header.php file, I have enqueued it in the functions.php file, but it is possible to give this file priority now so it loads first before everything else? As it is now, it loads last and it's very visible for the users.
function twentyfourteen_style(){
wp_enqueue_style( 'main_css', get_template_directory_uri() . '/css/styles.css' );
}
add_action( 'wp_enqueue_scripts', 'twentyfourteen_style' );
try to use dependency parameter in enqueue/register style function (see https://codex.wordpress.org/Function_Reference/wp_register_style). Set dependency on styles which you want to load after main style OR choose one first style after you can load main style as dependency.
EDIT: or add priority to your action
add_action( 'wp_enqueue_scripts', 'twentyfourteen_style', 1 ); // added 1 as priority 1, everything else will be loaded after this action
I am creating a child theme for an existing theme. When setting up I noticed a few layout changes for the child theme cf the parent theme. Eventually I have worked out that this is due to the header pulling in the css files in a different order.
In the parent it goes:
pile of css files
theme styles.css
In the child them it goes:
theme styles.css
pile of css files
child styles.css
I want to get the order in the child them same, but just have the child one added on at the end,
In my child functions.php I have this.
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
I have tried adding an large index to the end of the add_action call but that just messes things up even more.
So, how can I get the files in the right order please
Your add_action function has a 'priority' argument you can use
http://codex.wordpress.org/Function_Reference/add_action
you can pass an arg on add_action for priority like
add_action( 'wp_enqueue_scripts', 'pile_name_scripts', 5 );
With 5 being loaded before the default priority of 10.
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;
}