I want to remove css and js file from a template in WordPress by using wp_dequeue_script and wp_dequeue_style function but my code is not working.
Js File: <script type='text/javascript' src='http://localhost/worpress/wp-content/themes/goliath/theme/assets/js/vendor/jquery.hoverintent.min.js'></script>
Css File: <link rel='stylesheet' id='plsh-bbpress-css' href='http://www.smeadvisor.com/wp-content/themes/goliath/theme/assets/css/bbpress.css' type='text/css' media='all' />
I am using goliath theme and I have added below code in goliath-child theme functions.php file
add_action('wp_print_scripts','example_dequeue_myscript');
function example_dequeue_myscript() {
wp_dequeue_script( 'jquery.hoverintent' );
}
add_action('wp_print_styles','example_dequeue_mystyle');
function example_dequeue_mystyle() {
wp_dequeue_style( 'bbpress' );
}
Please help me in these!
wp_dequeue_script() and wp_dequeue_style() works only if the related CSS and JS files are included in the website by wp_enqueue_script()..
wp_dequeue_script and wp_dequeue_style work by taking the handle as the parameter.
You should have registered as like follows :
wp_register_style('pagination-style', plugins_url('style.css', __FILE__));
wp_enqueue_style('pagination-style');
and script like this :
wp_register_script('jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js');
wp_enqueue_script('jquery');
And then use handle for removing css and js as follows:
wp_dequeue_style('pagination-style');
wp_dequeue_script('jquery');
Hope Remove css and js
Try
add_action('wp_enqueue_scripts','example_dequeue_myscript', 30);
function example_dequeue_myscript()
{
wp_dequeue_script('jquery.hoverintent');
wp_dequeue_style('bbpress');
}
You have to enqueue these file in header or footer, not directly write in script or link tag that is proper method and then enqueue your script in condition. like this
add_action('wp_enqueue_scripts','example_dequeue_mystyle');
function example_dequeue_mystyle() {
if(!is_page('my-page-slug')){
wp_enqueue_style( 'bbpress' );
wp_enqueue_script( 'jquery.hoverintent' );
}
}
Hope you got that.
If the files are enqueued (not hardcoded in title) then the problem may be in wrong script/style names. Try to use this in functios.php first:
function remove_head_scripts() {
global $wp_styles;
var_dump($wp_styles);
global $wp_scripts;
var_dump($wp_scripts);
}
add_action( 'wp_enqueue_scripts', 'remove_head_scripts', 101 );
Then you can see all of the enqueued styles & scripts with their respective slugs printed somewhere inside your html (try to use ctrl+U in browser). Looking in that lists you can locate your desired script & style & find out it's slugs. If you can't see them, try to play with priority (101) or hook (wp_enqueue_scripts)
After you know exact slugs of your script & style, replace snippet above with new one:
function remove_head_scripts() {
wp_dequeue_style( 'exact_style_slug' );
wp_dequeue_script( 'exact_script_slug' );
}
add_action( 'wp_enqueue_scripts', 'remove_head_scripts', 101 );
Again, you can play with priority & hook. It highly depends on where your theme/plugin is enqueueing that script & style.
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'm working on a site on which I need to load two Google fonts. In an attempt to keep things moving as efficiently as possible, I would like to combine the loading of both fonts into one request. I've never had a problem with this before. Google generates the path, and I have always just been able to copy it into my functions.php file and register it there. However, doing the same thing this time is not working. The syntax of the string looks a bit different now as well. There used to be a pipe character (|) separating the two fonts in the path that Google would generate, but now there is not. If I split each font into it's own request, everything works fine.
The first snippet provided below is how I'm attempting to register my fonts using the link Google provided with both fonts combined into one request.
function load_google_fonts() {
wp_register_style( 'my-google-fonts', 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght#400;700&family=Open+Sans:wght#300;700' );
wp_enqueue_style( 'my-google-fonts' ); }
add_action( 'wp_enqueue_scripts', 'load_google_fonts' );
I've also tried placing a '|' between 'family' and 'Open' in that string, as I know that's how two fonts in one request used to be separated. No luck there either.
The next snippet is the only way I've gotten the fonts to load properly, which is by splitting them up into multiple requests.
function load_google_fonts() {
wp_register_style( 'my-google-fonts', 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght#400;700' );
wp_register_style( 'my-google-fonts-2', 'https://fonts.googleapis.com/css2?family=Open+Sans:wght#300;700' );
wp_enqueue_style( 'my-google-fonts' );
wp_enqueue_style( 'my-google-fonts-2' );
add_action( 'wp_enqueue_scripts', 'load_google_fonts' );
Is there something wrong with the combined link Google is providing me? If so, what needs to be changed? If not, what am I doing wrong? Has anyone else run into this problem before? Any help would be very much appreciated.
EDIT:
Since the last Google Font update, you're required to use the following line:
<link rel="preconnect" href="https://fonts.gstatic.com">
Upon selecting the required fonts on Google Fonts, here is the embed snippet they're giving us:
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Maven+Pro:wght#400;700&family=Open+Sans:wght#300;700&display=swap" rel="stylesheet">
YOU are currently loading your font using the default Google Fonts url from the url bar. Both are not the same (See right ad wrong bellow).
Right = https://fonts.googleapis.com/css2?family=Maven+Pro:wght#400;700&family=Open+Sans:wght#300;700&display=swap.
Wrong = https://fonts.google.com/specimen/Maven+Pro?query=Maven&sidebar.open=true&selection.family=Maven+Pro:wght#400;700|Open+Sans:wght#300;700.
The proper code snippet will appear on the right side column once you've selected a font on the Google font website.
Loading scripts, stylesheets and fonts from the function.php file is the best practice.
Of course we have to adapt the code snippet given by Google Font to our Wordpress environment.
<?php
/**
* Theme scripts
*/
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if ( ! is_admin() ) {
/**
* Register then enqueue google fonts
*/
wp_register_style( 'google_fonts', 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght#400;700&family=Open+Sans:wght#300;700&display=swap' );
wp_enqueue_style( 'google_fonts' );
};
}; ?>
When using CDNs, you want to be sure that the source is available. We can Use #fopen(); to "test" our url and make sure our CDN is working, if not we return a fallback file hosted on our website server.
<?php
/**
* Theme scripts
*/
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if ( ! is_admin() ) {
/**
* Register then enqueue google fonts
*
* Check if CDN's url is valid, if not return fallback
*/
$test_google_fonts = #fopen( 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght#400;700&family=Open+Sans:wght#300;700&display=swap', 'r' );
if ( $test_google_fonts !== false ) {
wp_register_style( 'google_fonts', '//fonts.googleapis.com/css2?family=Maven+Pro:wght#400;700&family=Open+Sans:wght#300;700&display=swap' );
} else {
wp_register_style( 'google_fonts', get_stylesheet_uri() . '/assets/font/_my_awesome_font_fallback_' );
};
wp_enqueue_style( 'google_fonts' );
};
}; ?>
On a side note, if you intend to register and enqueue a script straight away, you don't need to do both, you can jump straight to the enqueuing part.
<?php
/**
* Theme scripts
*/
add_action( 'wp_enqueue_scripts', 'theme_scripts' );
function theme_scripts() {
if ( ! is_admin() ) {
/**
* Register then enqueue google fonts
*/
wp_enqueue_style( 'google_fonts', 'https://fonts.googleapis.com/css2?family=Maven+Pro:wght#400;700&family=Open+Sans:wght#300;700&display=swap' );
};
}; ?>
For anybody else that comes across this issue, the problem was that I had not added this snippet to the <head> within header.php.
<link rel="preconnect" href="https://fonts.gstatic.com">
This was not required before, and I'm not sure exactly why it is now, but that solved my problem. All thanks to #amarinediary for pointing it out to me.
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' );
}
Hi
i need some help with the creation of a custom css file for my page template.
There are many topics out there regarding this issue but with each thread i read i get more information and more confused.
I created a child theme for the twentyfourteen theme and added a page template. How can i add custom css to this template. I discovered that
this code added to the child-theme's functions.php selects the appropriate class with my css. But how and where do i put this class? I read that i have to add the class to the body tag in the header.php but i am not sure. Is this the correct way?
if (is_page_template( 'mytemplate.php' )){
$classes[] = 'myclass';
}
Use the is_page_template() conditional to selectively load CSS.
In the function below we're hooking into wp_enqueue_scripts and checking if we're on the custom page template to determine whether to load additional CSS.
If the result is true we'll load a CSS file titled page-template.css from a css/ folder inside your theme. Update the path to load the correct file.
function wpse_enqueue_page_template_styles() {
if ( is_page_template( 'mytemplate.php' ) ) {
wp_enqueue_style( 'page-template', get_stylesheet_directory_uri() . '/css/page-template.css' );
}
}
add_action( 'wp_enqueue_scripts', 'wpse_enqueue_page_template_styles' );
How about this solution ?
<?php
function mypage_head() {
echo '<link rel="stylesheet" type="text/css" href="'.get_bloginfo('stylesheet_directory').'/includes/mypage.css">'."\n";
}
add_action('wp_head', 'mypage_head');
?>
<?php get_header(); ?>
You can use wp_head hook to add you custom stuff (Javascript, CSS..) into your custom template. I think this way is better because all changes will contain in your template file, so you don't have to check in another place.
I get this solution from : http://scratch99.com/wordpress/development/custom-page-template-external-css-file/.
How about this one?
function my_custom_styles() {
wp_register_style( 'custom-styles', get_template_directory_uri().'/lib/styles/custom-styles.css' ) );
if ( is_home ) {
wp_enqueue_style( 'custom-styles' );
}
}
add_action( 'wp_enqueue_scripts', 'my_custom_styles' );
I have tested all three answers from here; and all of them works great. Does anybody know which one is faster & better?
I recently started working on a wordpress site.
I have the woo commerce plugin working and he mystile theme. SO far so good!
However the gallery sucks!
I am trying to fiddle aroundwith it, but do not know my way around wordpress too well.
Question:
How do I add a line into the header?
Say for the single product, I would want to include a Javascript file. Do you know how I would do that?
What file do I augment?
Please let me know if you need more information.
Bo
To add a javascript file to the wordpress theme, you have 2 alternative:
Suppose we have a jquery.js inside the directory root of the theme.
Method A)
Open header.php file in wordpress theme. Add this inside <head> tag:
<script src="<?php echo get_template_directory_uri(); ?>/jquery.js"></script>
Method B)
Open functions.php file in wordpress theme:
Search something like add_action( 'wp_enqueue_scripts', 'blahblah' );,
If exist, find a function with blahblah name and add this code inside it:
wp_enqueue_script(
'jquery',
get_template_directory_uri() . '/jquery.js', array(), '1.8.3', false );
Otherwise: You should add a function and add_action method:
function scripts_styles() {
wp_enqueue_script(
'jquery',
get_template_directory_uri() . '/jquery.js', array(), '1.8.3', false );
}
add_action( 'wp_enqueue_scripts', 'scripts_styles' );
Note: Replace jquery string with your file name so.