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 );
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
I'm trying to do a plugin that will change the behavior of a theme.
In the theme file I have a get_template_part('libs/templates/user_menu');
I want to make my plugin to "force" the get_template_part return another slug file (a path to a file in plugin folder).
So far this is my code inside the plugin:
function wpse21352_template_part_cb( $slug )
{
if(slug == 'user_menu') {
return WP_PLUGIN_URL.'/'.$slug;
} else {
return $slug;
}
}
do_action( "get_template_part_user_menu", 'user_menu' );
add_action( 'wpse21352_template_part_cb', 'get_template_part_user_menu', 10, 1 );
First of all, get_template_part does not return anything. It loads a file from your theme based on the parameters you pass to it. The function does not support filtering, which means you can not actually overwrite what is outputted by get_template_part.
The only thing the action get_template_part_[slug] allows you to do is output something before the theme file is loaded. For example, using
function myplugin_before_login( $slug, $name ) {
echo 'Example';
}
add_action( 'get_template_part_login', 'myplugin_before_login', 10, 2 );
would output "Example" before the loading the theme file when calling get_template_part( 'login' );.
Actions and filters
In general, however, I believe you might misunderstand how actions and filters work. The WordPress Codex offers extensive information on their use and usage.
I am developing a plugin for a website.(Which is my first plugin for Wordpress)
The basic functionality is querying the database and in specific pages show the data from the database with a specific style instead of the content from the pages.
So far I managed to show some text in every specific page.
This is my code after some basic configurations:
global $wpdb;
global $wp_query;
add_action( 'wp', 'check_which_page' );
function check_which_page()
{
$page_type=get_post_type();
$page_id=get_the_ID();
//echo $page_id;
switch($page_id)
{
case 50:technologyPage();break;
case 82:medicalPage();break;
}
}
function technologyPage()
{
return print "Technology";
}
function salesPage()
{
return print "Sales";
}
function medicalPage()
{
return print "Medical";
}
I've read this post, but I couldn't solve my problem.
WordPress replace content of a page (plugin)
I already read the Wordpress documentation but I havent find anything there.
I found myself a solution, using shortcodes.
global $wpdb;
global $wp_query;
add_shortcode( 'sector_page_display', 'check_which_page' );
function check_which_page()
{
$page_type=get_post_type();
$page_id=get_the_ID();
//echo $page_id;
switch($page_id)
{
case 50:technologyPage();break;
case 82:medicalPage();break;
}
}
function technologyPage()
{
return print "Technology";
}
function medicalPage()
{
return print "Medical";
}
See that instead of add_action I changed to add_shortcode
Then on everypage I will use to show info from the database I add
[sector_page_display]
in the page, so it call my method. You can add variables in there if you want.
You'll want to run that code before WordPress has fully loaded.
Try this
global $wpdb;
global $wp_query;
add_action( 'init', 'check_which_page' );
function check_which_page()
{
$page_type=get_post_type();
$page_id=get_the_ID();
//echo $page_id;
switch($page_id)
{
case 50:technologyPage();break;
case 82:medicalPage();break;
}
}
function technologyPage()
{
return print "Technology";
}
function salesPage()
{
return print "Sales";
}
function medicalPage()
{
return print "Medical";
}
I changed the add_action to now run the code when WordPress is being initialized.
When custom php function is called, need to register and enqueue script from within that called function. Then the whole thing gets added to wp_footer hook.
the echoed div in code below shows up in the developer tool, but the script is not showing or even giving any errors, i.e.- if this were an issue with the file path, then there would be resource error, yes? Any comments as to why there wouldn't be an error in loading the script?
The code:
if(get_option('show_content')) {
function add_time() {
echo '<div id="txt">' . '</div>';
// add script tut pro word plugin dev ch12.3
function py_enqueue_script () {
wp_register_script( 'timescript', plugin_url('../time.js', __FILE__));
wp_enqueue_script( 'timescript');
} // end py_enqueue_script
add_action('wp_enqueue_scripts', py_enqueue_script);
} // end show add_time
add_action("wp_footer",add_time);
} // end if
Try this (spotted some syntax errors):
if(get_option('show_content')) {
function add_time() {
echo '<div id="txt">' . '</div>';
// add script tut pro word plugin dev ch12.3
function py_enqueue_script () {
wp_register_script( 'timescript', plugins_url('../time.js', __FILE__), false, null, false));
wp_enqueue_script( 'timescript');
} // end py_enqueue_script
add_action('wp_enqueue_scripts', 'py_enqueue_script');
} // end show add_time
add_action('wp_footer', 'add_time');
} // end if
Brackets on add_action custom action (i.E. 'add_time' instead of add_time).
Plugins URL Function goes plugins_url not plugin_url
Some very good additional article on enqueueing scripts: http://wp.tutsplus.com/tutorials/the-ins-and-outs-of-the-enqueue-script-for-wordpress-themes-and-plugins/
Some additional info on plugins_url:
http://codex.wordpress.org/Function_Reference/plugins_url