WordPress remove legacy CSS and include new CSS - css

Trying to remove old CSS and include new CSS, however when I inspect my code I still get the old CSS and not the new, have I written the code correctly?
My code
function se_remove_styles() {
if ( is_page_template( 'template/page-main.php' ) ) {
wp_dequeue_style( 'styles', get_template_directory_uri().'/assets/css/vendor.min.css',array(),'1.0.0');
wp_enqueue_style('styles',get_template_directory_uri().'/assets/css/vendornew.min.css',array(),'1.0.0');
}
}
add_action( 'wp_print_styles', 'se_remove_styles', 99 );

Probably something related to cache.
One way to update CSS in Wordpress without having to refresh the cache through the browser is to update its version.
As you see, the versions are 1.0.0 in both CSS you are calling. Change them to 1.0.1 and test it again. Like this:
function se_remove_styles() {
if ( is_page_template( 'template/page-main.php' ) ) {
wp_dequeue_style( 'styles', get_template_directory_uri().'/assets/css/vendor.min.css',array(),'1.0.1');
wp_enqueue_style('styles',get_template_directory_uri().'/assets/css/vendornew.min.css',array(),'1.0.1');
}
}

Related

I have a question regarding wp_dequeue_script

I would like to block to load comment-reply.js file on pages.
Theme functions.php,
function theme_enqueue_scripts() {
if (is_singular() && get_option('thread_comments'))
wp_enqueue_script('comment-reply'); }
So, I added codes to block that js file in child theme's functions.php,
function comment_load_script() {
if ( is_single()) {return;}
wp_dequeue_script('comment-reply');}
add_action( 'wp_enqueue_scripts', 'comment_load_script' );
However, comment-reply.js is still loaded on every page. I need your help. Thanks in advance. :)
Try this code. Its working fine.
function comment_load_script(){
wp_deregister_script( 'comment-reply' );
}
add_action('init','comment_load_script');

Remove Gutenberg CSS

I have Gutenberg plugin installed in WordPress v4.9.8 and am trying to remove the CSS that comes with it so I can supply my own.
This is the sheet that gets included:
<link rel='stylesheet' id='wp-block-library-css' href='/wp-content/plugins/gutenberg/build/block-library/style.css?ver=1535795173' type='text/css' media='all' />
I have tried the following:
add_action( 'wp_print_styles', 'wps_deregister_styles', 100 );
function wps_deregister_styles() {
wp_dequeue_style( 'wp-block-library-css' );
wp_deregister_style( 'wp-block-library-css' );
}
As well as variations of this, but the file persists. How can I remove it?
I'm adding this as a more complete answer than my comment:
You need to remove the -css when trying to dequeue the script. That's added to the HTML markup and not the actual tag for the css file.
If you search the code (the location of the enqueue may change as Gutenberg gets rolled into core), you can find:
wp_enqueue_style( 'wp-block-library' );
As you can see, there is no -css. This solution may work for other plugins that people have trouble dequeuing styles.
Edit:
Since this still gets some traction, here is the code to handle it:
add_action( 'wp_print_styles', 'wps_deregister_styles', 100 );
function wps_deregister_styles() {
wp_dequeue_style( 'wp-block-library' );
}
I am use this code to to remove default style.
//Disable gutenberg style in Front
function wps_deregister_styles() {
wp_dequeue_style( 'wp-block-library' );
}
add_action( 'wp_print_styles', 'wps_deregister_styles', 100 );
I use Wordpress 5.1. Tried the most upvoted answers and they didn't work for me, 'wp_enqueue_scripts' instead of 'wp_print_styles' does the trick.
Here is my whole WordPress 5.1 solution to get rid of Gutenberg without bloat stylesheets loading:
// Disable Gutenberg editor.
add_filter('use_block_editor_for_post_type', '__return_false', 10);
// Don't load Gutenberg-related stylesheets.
add_action( 'wp_enqueue_scripts', 'remove_block_css', 100 );
function remove_block_css() {
wp_dequeue_style( 'wp-block-library' ); // Wordpress core
wp_dequeue_style( 'wp-block-library-theme' ); // Wordpress core
wp_dequeue_style( 'wc-block-style' ); // WooCommerce
wp_dequeue_style( 'storefront-gutenberg-blocks' ); // Storefront theme
}
Edit:
It works with WordPress 5.2 as well and because it handles the stylesheets added by WooCommerce and Storefront theme, I made this one of the settings in my new plugin:
https://wordpress.org/plugins/extra-settings-for-woocommerce/
Paste the following code on your functions.php file
function custom_theme_assets() {
wp_dequeue_style( 'wp-block-library' );
}
add_action( 'wp_enqueue_scripts', 'custom_theme_assets', 100 );
Please like if this has helped you.
As the wp_dequeue_style-approach did not work to disable wp-editor-font (wp-editor-font-css) I used the following code:
function my_remove_gutenberg_styles($translation, $text, $context, $domain)
{
if($context != 'Google Font Name and Variants' || $text != 'Noto Serif:400,400i,700,700i') {
return $translation;
}
return 'off';
}
add_filter( 'gettext_with_context', 'my_remove_gutenberg_styles',10, 4);
Also see https://github.com/dimadin/disable-google-fonts/blob/master/disable-google-fonts.php
In 2021 I tried variations of most of the approaches above and they all failed. Looking at the WordPress code, I believe the reason why is that Gutenberg styles are not enqueued anymore. The only way I have found to remove it is to remove it just before it is printed.
// This is what works for me.
add_action( 'wp_print_styles', 'wps_deregister_styles', 9999 );
function wps_deregister_styles() {
global $wp_styles;
$wp_styles->remove('wp-block-library');
}
This doesn't really answer the question, but I suspect others like me have ended up here trying to resolve something this question alludes to but doesn't address: how do you remove the inline (WP 5.5+) storefront-gutenberg-blocks-inline-css so you can use the editor even though it's using white on white or black on black in the storefront theme?
The following will do just that. Put it in your functions.php file or a plugin.
function clean_storefront_gutenberg_block_editor_customizer_css( $string ) {
// return empty so the editor doesn't suck
return '';
}
add_filter( 'storefront_gutenberg_block_editor_customizer_css', 'clean_storefront_gutenberg_block_editor_customizer_css' );
This just defuses the generated CSS so there's nothing appended to the back-end editor. The front-end remains unchanged.
Remove Gutenberg Block Library CSS from loading on the frontend
function smartwp_remove_wp_block_library_css()
{
wp_dequeue_style('wp-block-library');
wp_dequeue_style('wp-block-library-theme');
wp_dequeue_style('wc-block-style'); // Remove WooCommerce block CSS
}
add_action('wp_enqueue_scripts', 'smartwp_remove_wp_block_library_css', 999);
None of the above answers removed all the styles in the block editor, the following worked for me:
add_action( 'admin_print_styles', function() {
global $wp_styles;
$stylesToRemove = ["wp-reset-editor-styles", "wp-format-library", "wp-block-library", "wp-block-library-theme", "wp-block-directory", "wp-edit-blocks"];
foreach ($stylesToRemove as $styleToRemove) {
foreach ($wp_styles->registered as $style) {
$dep = array_search($styleToRemove, $style->deps);
if ($dep !== false) {
unset($style->deps[$dep]);
}
}
wp_deregister_style($styleToRemove);
}
}, 1 );
add_action('wp_enqueue_scripts', 'wps_deregister_styles', 200);
Works for me.
As the latest Gutenberg update has been released recently, a lot of people are wondering how to remove wp-block-library from WordPress. As the guide shows, below you need you to reference the 100 in your add_action.
Firslty, you must create a function that holds your wp_dequeue_style for wp-block-library and then call it as such:
add_action( 'wp_enqueue_scripts', 'custom_function', 100 );

Wordpress / CSS File only for one Menu-Page in the Backend

I have a own Plugin and I want to add a css file to style the menu-page for this plugin in the backend. Right now the css file works for all pages in the backend but it should only works for my plugin.
function ww_contact_backend_style() {
wp_enqueue_style('admin-styles', '/wp-content/plugins/ww- contact/css/backend.css');
}
add_action('admin_enqueue_scripts', 'ww_contact_backend_style');
I tried this, but it didn´t work:
if(menu_page_url('ww_options')){}
Example: Load CSS File from a plugin on specific Admin Page
function load_custom_wp_admin_style($hook) {
// Load only on ?page=mypluginname
if($hook != 'toplevel_page_mypluginname') {
return;
}
wp_enqueue_style( 'custom_wp_admin_css', plugins_url('admin-style.css', __FILE__) );
}
add_action( 'admin_enqueue_scripts', 'load_custom_wp_admin_style' );
See wp doc

How can I use is_page() inside a plugin?

I want my plugin to register a script only in a certain page.
For example, inside my plugin file I want to write something like this:
if (is_page()) {
$pageid_current = get_the_ID();
$page_slug = get_post($pageid_current)->post_name;
if ($page_slug == 'articles'){
wp_register_script('myscript', '/someurl/main.js');
}
}
But I get the error:
is_page was called incorrectly. Conditional query tags do not work
before the query is run. Before then, they always return false. Please
see Debugging in WordPress for more information. (This message was
added in version 3.1.)
How can I, inside of a plugin, register a script in a certain page?
is_page() only work within template files.
And to use it within plugin files, you need to use it with the combination of template_redirect action hook.
This action hook executes just before WordPress determines which template page to load.
So following snippet would work:
add_action( 'template_redirect', 'plugin_is_page' );
function plugin_is_page() {
if ( is_page( 'articles' ) ) {
wp_register_script( 'my-js-handler', '/someurl/main.js', [], '1.0.0', true );
}
}
You could use is_page() after template redirect so you need to add in the hook like this :
add_action('template_redirect','your_function');
function your_function(){
if ( is_page('test') ) {
// do you thing.
}
}
You must register your script as if you want it to work everywhere.
You can de-register it after the job is done, like this:
function deregister_my_script() {
if (!is_page('page-d-exemple') ) {
wp_deregister_script( 'custom-script-1' );
}
}
add_action('wp_print_scripts', 'deregister_my_script', 100 );

Using WordPress' parse_request function for dynamic CSS

following the tutorial at http://josephscott.org/archives/2010/03/database-powered-css-in-wordpress-themes/ i am trying to use wordpress' parse_request function to add some php-driven CSS... mostly style options set in my theme's options panel. i am aware that my code looks a little different from the author's, but i tried it his way already. i can add the
function kia_wp_head() {
wp_enqueue_style('dynamic', get_bloginfo('stylesheet_directory') . '/admin/ . '?my-custom-content=css');
}
add_action('wp_print_styles', 'kia_wp_head');
//this shows up properly enqueued but when i click on it in source it just brings up a directory listing for the admin folder
function my_custom_wp_request( $wp ) {
if( isset($_GET['my-custom-content']) && $_GET['my-custom-content'] == 'css' ) {
# get theme options
header( 'Content-Type: text/css' ); ?>
body {
background-color: <?php echo 'red'; ?>
}
<?php
exit;
}
}
add_action( 'parse_request', 'my_custom_wp_request' );
but since the background never turns red, I am either not implementing this properly or the tutorial is missing a critical step. i've also tried the other method of putting the dynamic css in its own custom-css.php file, which is my ultimate goale, but i was just trying to see if i could interact with the parse request function properly:
function my_custom_wp_request( $wp ) {
if (
isset($_GET['my-custom-content'])
&& $_GET['my-custom-content'] == 'css'
) {
# get theme options
header( 'Content-Type: text/css' );
require dirname( __FILE__ ) . '/custom-css.php';
exit;
}
}
add_action( 'parse_request', 'my_custom_wp_request' );
here i'm not sure what dirname( FILE ) means exactly, but i have also tried using a hardcoded path and that didn't work either.
so how do i get parse_request to see my php-driven stylesheet?
/* EDIT FOR SOLUTION */
basically this doesn't work w/ wp_enqueue_style
wp_enqueue_style('dynamic', get_bloginfo('stylesheet_directory') . '/admin/ . '?my-custom-content=css');
but DOES work as described at josephscott.org by inserting the style tag directly into the head
. '/admin?my-custom-content=css">
i found that it doesn’t work w/ wp_enqueue_script. it does work as written in the tutorial by manually adding the script tag to the header.

Resources