I used a plugin to auto-generate a child theme and necessary files, and it did a good job...my new style.css loads after the parent and works great. the problem is that I have a plugin that requires heavy modification to it's injected divs, and it is a nightmare to overwrite anything because they !important the entire sheet, so I have to work around it.
I'm trying to enqueue my child-theme style.css after the plugin using a priority 99 thing I found on another thread here, and it isn't doing anything. All I did was append to the end of my child functions.php.
Potential issue 1: I did not remove the previous code to enquee this css file...do I need to do that? I thought maybe it would just re-enqueue it if it got to this new code at the end of the file. But maybe it does it once and ignores my code since it's already done.
Potential issue 2: Code error on my part. If my style.css is in the same folder as my functions.php I refer to the file as just 'style.css' right? I assume so because of relative locations because I was not sure if PHP required something that I am unaware of.
Here is my code that is not working.
wp_enqueue_style( 'child-css', get_template_directory_uri() . 'style.css' );
}
add_action( 'wp_enqueue_scripts', 'my_theme_enqueue_styles', 99 );
I also saw this in my functions.php...it's weird because it looks like it's trying to enqueue a parent theme css file, but the relative location points to the child theme. Very confusing. it already had the same add_action priority thing in it from the thing I posted above, so I just change the number to 99, but it also didn't work. It was set to 10.
add_filter( 'locale_stylesheet_uri', 'chld_thm_cfg_locale_css' );
if ( !function_exists( 'chld_thm_cfg_parent_css' ) ):
function chld_thm_cfg_parent_css() {
wp_enqueue_style( 'chld_thm_cfg_parent', trailingslashit( get_template_directory_uri() ) . 'style.css', array( 'font-awesome-5-free','saasland-dark-support','bootstrap','themify-icon','saasland-elementor','saasland-remove-animation','magnific-popup','eleganticons','saasland-wpd','saasland-main','saasland-elements','saasland-comments','saasland-footer','saasland-gutenberg' ) );
}
endif;
add_action( 'wp_enqueue_scripts', 'chld_thm_cfg_parent_css', 99 );
Any tips? Thanks
get_template_directory_uri will always refer to the parent theme folder for assets.
get_stylesheet_directory_uri will refer to the "current" theme folder for assets (which could be the parent or the child, depending on where it is called).
If you are enqueueing style.css file for the child theme then,
wp_enqueue_style( 'child-css', get_stylesheet_directory_uri() . '/style.css' );
Related
I use Elementor to build my website and there are a lot of functionalities that I'm not using but are none the less loaded on every page of my website. So I decided to dequeue the css files I'm not using in my child theme's functions.php and dequeue the css files which I'm only partially using, replacing them with a 'cleaned-up' version of the file.
This is how I wanted to start doing it:
function adg_dequeue_unnecessary_files() {
wp_dequeue_style( 'elementor-frontend' ); // remove Elementor's custom-frontend.min.css
wp_deregister_style( 'elementor-frontend' );
wp_register_style( 'new-elementor-frontend-css', get_stylesheet_directory_uri() . '/custom-frontend.min.css' ); // Purified replacement for Elementor's custom-frontend.min.css
wp_enqueue_style( 'new-elementor-frontend-css' );
}
add_action( 'wp_enqueue_scripts', 'adg_dequeue_unnecessary_files' );
But while the second part of my function adds my new custom css file nicely, the first part removes almost 10 other Elementor's css files along with the one I actually wanted to dequeue.
This is the list of files being dequeued:
custom-frontend.min.css
post-1501.css (this is the css file of the page I was looking at while making these changes)
frontend-legacy.min.css
post-1396.css (some global Elementor's css)
post-3556.css (this one and the 5 below are templates from a plugin I'm using across my website)
post-4473.css
post-5653.css
post-3489.css
post-3464.css
post-3458.css
I'm guessing it has something to do with the handler 'elementor-frontend' not being correct. The custom-frontend.min.css file had the 'elementor-frontend-css' ID in the link tag of the HTML code, so I was guessing the handler from there.
Does anyone know how I can dequeue only the custom-frontend.min.css file?
After that I wanted to dequeue these files as well:
animations.min.css
elementor-icons.min.css
global.css
frontend-legacy.min.css
swiper.min.js
I've been browsing this for a few days and I'm starting to feel lost, so any help will be much appreciated!
You can dequeue the Elementor CSS file with the use of wp_deregister_style and wp_dequeue_style. For this, you need to pass the CSS file handle name. You can use the below code to dequeue the Elementor plugin global.css file.
function dequeue_elementor_global__css() {
wp_dequeue_style('elementor-global');
wp_deregister_style('elementor-global');
}
add_action('wp_print_styles', 'dequeue_elementor_global__css', 9999);
Here elementor-global is the handle name of the global.css file. You can get any file handle name by stylesheet id. For example:
If any stylesheet id is the elementor-global-css then this file handle will be elementor-global
My understanding is that all Elementor frontend styles, e.g. your post-1234.css files, are children of 'elementor-frontend', which means if you unload it, none of them will load.
If you load your new, optimised frontend.min.css files with the same name, then it should work.
e.g.
function adg_dequeue_unnecessary_files() {
wp_dequeue_style( 'elementor-frontend' ); // remove Elementor's custom-frontend.min.css
wp_deregister_style( 'elementor-frontend' );
wp_register_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/custom-frontend.min.css' ); // Purified replacement for Elementor's custom-frontend.min.css
wp_enqueue_style( 'elementor-frontend' );
}
add_action( 'wp_enqueue_scripts', 'adg_dequeue_unnecessary_files' );
Also. Can you not just add your custom-frontend.min.css to the relevant location in your Child Theme and it will overwrite the Parent theme version by default?
This seems to work. Tested on a few pages and posts:
add_action( 'elementor/frontend/after_enqueue_styles', function() {
wp_deregister_style( 'elementor-frontend' );
wp_dequeue_style( 'elementor-frontend' );
wp_register_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/assets/css/custom-elementor-front-end.css' );
wp_enqueue_style( 'elementor-frontend', get_stylesheet_directory_uri() . '/assets/css/custom-elementor-front-end.css' );
} );
I made a child theme for 'Square Theme' in Wordpress and my 'functions.php' code in my child theme looks like this:
<?php
function square_child_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style', get_stylesheet_directory_uri() . '/style.css', array( 'parent_style' ));
}
add_action( 'wp_enqueue_scripts', 'square_child_enqueue_styles' );
?>
The thing is, I also want to edit another css file, that its path in the parent theme is "/css/owl.carousel.css".
So, should I create an "owl.carousel.css" file in my child theme too? And also, which code should I add to my child-theme's "functions.php"?
Depends whether that owl css is loaded in the child theme too and what you mean by 'edit'. Child theme normally inherits all the parent php template files, and the parent functions.php but not the base css. So normally one has to enqueue the parent css if one wants to use it. I imagine in this case if it's not the main css it might be being loaded anyway? (View source to check)
1) If you don't want it at all, you could use wp_dequeue_style to get rid of it.
or
2) if by 'edit' you mean you just want to make minor modifications, you could add those minor mods to override the owl css in your own stylesheet.
Actually my problem is that I already had a functional Child theme with a functions.php and many others filesname.php and also a style.css which work properly, but when I try to add an other stylesheet like for instance modules.min.css The theme is only reading it in the parent folder so I can't change stylesheets in my website and this is annoying
Some data:
File in the parent folder I want to override: \wp-content\themes\startit\assets\css\modules.min.css
File in the child folder I want to be readable: \wp-content\themes\startit-child\assets\css\modules.min.css
I also tryed to put the modules.min.css right here in my child theme next to the styles.css but I can't override the parent folder \wp-content\themes\startit-child\modules.min.css
This is what look like my functions.php :
<?php
function startit_enqueue_styles() {
$parent_style = 'startit-style'; // This is 'twentyfifteen-style' for the Twenty Fifteen theme.
wp_enqueue_style( $parent_style, get_template_directory_uri() . '/style.css' );
wp_enqueue_style( 'child-style',
get_stylesheet_directory_uri() . '/style.css',
array( $parent_style ),
wp_get_theme()->get('Version')
);
}
add_action( 'wp_enqueue_scripts', 'startit_enqueue_styles' );
?>
Thank you !
There are couple of ways to do that and the simplest one is:
Remove/Dequeue Parent CSS file
Add/Enqueue new CSS file
function PREFIX_remove_scripts() {
wp_dequeue_style( 'put_modules_file_handler_here' );
wp_deregister_style( 'put_modules_file_handler_here' );
// Now register your child CSS here, using wp_enqueue_style
}
add_action( 'wp_enqueue_scripts', 'PREFIX_remove_scripts', 20 );
Some Common Confusions
Should you enqueue child styles as well as parent styles? Is it necessary? This is where a lot of confusion exists regarding enqueueing stylesheets in child themes. The answer depends on how the parent styles are included in the parent theme. For example, if the parent theme is using get_stylesheet_uri() to enqueue styles,
for example as in Twenty Sixteen:
wp_enqueue_style('twentysixteen-style', get_stylesheet_uri());
then you don't need to enqueue the child styles. This is because get_stylesheet_uri() returns the URL of the current active theme, which in this case is the child theme.
This is how URLs are returned, when working with child themes
get_stylesheet_uri() = http://example.com/wp-content/themes/example-child/style.css
get_template_directory_uri() = http://example.com/wp-content/themes/example-parent
get_stylesheet_directory_uri() = http://example.com/wp-content/themes/example-child
So, I would recommend you to check your parent functions.php and see, how the style is enqueued so you can handle it properly.
// Add css file or js file
function activate_css() {
wp_enqueue_style('min_style_css', get_template_directory_uri() .'assets/css/modules.min.css'));
));
}
//add css
add_action( 'init','activate_css');
I am trying to link my stylesheet to another page in Wordpress. The actual Wordpress installation is within a folder, within the actual site. It's set up this way because I only want to use WP for a specific section of the site (it was an afterthought, I know this is isn't necessarily the "correct" way to do things...)
I have the front page set up and the styles are all working fine. But when a create a new page and try to use get_header to pull in the styles, they don't work. The browser is looking for a page called styles.css, not a stylesheet.
I've tried to use "enqueue" in the functions.php file, but it still won't work. I have a copy of my style sheet in the theme folder and also one inside a css folder.
Example of using enqueue for the copy inside the css folder:
wp_enqueue_script( 'styles', 'get_stylesheet_directory_uri()' . 'css/styles2.css' );
*I am using get_header in my page template file, (same header as the front page which is working fine), and it is linked this way:
<link rel="stylesheet" type="text/css" href="../css/styles2.css">
I'm pretty sure the issue is the "../" but when I substitute echo get_stylesheet_directory_uri()....... instead of the ../, it doesn't work as it should.
Any help would be great as I'm newer to WP development.
Thanks everyone
You have to write like this for linking template style sheet ...
wp_enqueue_script( 'styles', get_template_directory_uri(). 'css/styles2.css', array(), '0.0.1' );
Add Style sheet like this:
wp_enqueue_style( 'styles', bloginfo('template_url').'/css/styles2.css' );
You can view more detail at here
You need to hook the css:
If you are using child theme then hook like:
add_action( 'wp_enqueue_scripts', 'enqueue_unique_function_name_here', 0);
function enqueue_unique_function_name_here()
{
wp_enqueue_style( 'css_unique_handle_name_here', get_template_directory_uri(). 'folder_path_inside_child_theme/style_sheet_file_name_here.css', array(), '0.0.1' );
}
If you are using parent theme (no child theme) then hook like:
add_action( 'wp_enqueue_scripts', 'enqueue_unique_function_name_here', 0);
function enqueue_unique_function_name_here()
{
wp_enqueue_style( 'css_unique_handle_name_here', get_stylesheet_directory_uri(). 'folder_path_inside_child_theme/style_sheet_file_name_here.css', array(), '0.0.1' );
}
If want to enqueue in admin side then just change hook name "wp_enqueue_scripts" to "admin_enqueue_scripts".
Try now.
You have used wp_enqueue_script() instead of wp_enqueue_style()
wp_enqueue_style used for Enqueue Style
wp_enqueue_script used for Enqueue Script
wp_enqueue_style( 'styles', 'get_stylesheet_directory_uri()' . 'css/styles2.css' );
Here is the full example for the same.
add_action( 'wp_enqueue_scripts', 'enqueue_custom_style');
function enqueue_custom_style()
{
wp_enqueue_style( 'styles', 'get_stylesheet_directory_uri()' . 'css/styles2.css' );
}
This is probably easy but I just want to make sure I'm doing it correctly. Basically I've been making a bunch of Wordpress sites using child themes and usually the style.css is in the root folder of the theme and I've been using this in my functions.php file
<?php
add_action( 'wp_enqueue_scripts', 'theme_enqueue_styles' );
function theme_enqueue_styles() {
wp_enqueue_style( 'parent-style', get_template_directory_uri() . '/style.css' );
}
While this file exists in the parent theme I'm using, it's blank and I realized the CSS file being used was a different file name and nested in
\THEME-NAME\framework\css\site\stacks\THEME-CSS.css as opposed to just
THEME-NAME\style.css
So for the child theme do I have to recreate that folder structure and place a same named THEME-CSS.css in the same folder or do I just call it style.css and put it in the child themes root folder like it normally would be? Any other advice would be helpful. Thanks.
To add a stylesheet when in a child theme, these are the two options/behaviors:
// This will point to style.css in child theme
wp_enqueue_style( 'my_child_styles', get_stylesheet_directory_uri().'/style.css' );
// This will point to style.css in the parent theme
wp_enqueue_style( 'my_parent_styles', get_template_directory_uri().'/style.css' );
As you said, when using get_template_directory_uri() the path will always point to the parent theme folder. Use get_stylesheet_directory_uri() to point to the current / child theme folder, if applicable.