How to Add a Pagination and a Search Box in WordPress Editor with Meta Box Plugin

Easily Add Paginations & Search Boxes in WordPress Editor with Meta Box

Adding the pagination and the search box feature on the back end will be useful for WordPress users in many cases. Especially in the page / post editor of WordPress, you need to choose details like background image, colors, … for your Gutenberg blocks sometimes. It doesn’t matter if you only have a few options. But when there are dozens of options, you should definitely add the pagination and the search box to find them easily.

Continue reading "Easily Add Paginations & Search Boxes in WordPress Editor with Meta Box"

How to disable Gutenberg without using plugins

How To Disable Gutenberg Without Using Plugins

Although Gutenberg is the default editor in WordPress, not everyone wants to use it because of the bad editing experience. And Gutenberg loads CSS files and lots of inline styles on the front end, which will affect your website loading speed. This article will guide you on how to disable Gutenberg with a simple code without using plugins.

Disable Gutenberg without plugins in WordPress
Recover the classic editor in WordPress

Why disable Gutenberg?

Gutenberg is the new editor added in WordPress 5.0. This editor promises to bring a whole new change and experience to users.

Nevertheless, after launching, it received plenty of criticism (more than praises) as it caused some problems for users, such as:

  • Heavy JavaScript features make the editing experience bad or not smoothy
  • Articles editing, images inserting are a bit more difficult than the previous editor
  • Unable to use powerful features of the editor toolbar brought by the TinyMCE Advanced plugin.
  • Can’t integrate the short-code buttons from other plugins into the editor toolbar.

Therefore, while Gutenberg is not really stable, it should be disabled. Otherwise, if you are using other plugins and you have conflicting problems, you should disable it and go back to the old editor interface.

Besides, Gutenberg outputs a lot of CSS and inline styles in your website's <head>. Here is a screenshot:

Gutenberg inline global styles

Disabling Gutenberg can help you have a better writing experience, and also increase the performance and loading time of your website by removing unused CSS. At the end, it will give your users a faster website, and might help to increase the search rankings.

How to disable Gutenberg with code?

It’s simple to disable Gutenberg, all you need to do is add the following code into the functions.php file in your theme:

// Disable Gutenberg on the back end.
add_filter( 'use_block_editor_for_post', '__return_false' );

// Disable Gutenberg for widgets.
add_filter( 'use_widgets_block_editor', '__return_false' );

add_action( 'wp_enqueue_scripts', function() {
    // Remove CSS on the front end.
    wp_dequeue_style( 'wp-block-library' );

    // Remove Gutenberg theme.
    wp_dequeue_style( 'wp-block-library-theme' );

    // Remove inline global CSS on the front end.
    wp_dequeue_style( 'global-styles' );

    // Remove classic-themes CSS for backwards compatibility for button blocks.
    wp_dequeue_style( 'classic-theme-styles' );
}, 20 );

The snippet does these the following things:

  • Disable Gutenberg for posts on the back end
  • Disable Gutenberg for widgets. It's very useful when you want to use the old widgets screen as before, and
  • Remove Gutenberg's CSS file and inline styles on the front end. Without it, Gutenberg will enqueue an unnecessary CSS file and output huge inline styles in your website's <head>. That will decrease your website performance and slow it down.
  • Remove the classic theme styles for backwards compatibility for button blocks.

If you want to disable Gutenberg for a specific post type, use the code below:

add_filter( 'use_block_editor_for_post_type', function( $enabled, $post_type ) {
    return 'your_post_type' === $post_type ? false : $enabled;
}, 10, 2 );

Alternative ways to disable Gutenberg

There are other ways to disable Gutenberg that are suitable if you're not familiar with adding snippets to your theme. We recommend the plugin Falcon - an optimization plugin from us (eLightUp) to disable Gutenberg. It offers a lot of optimization tweaks like:

  • Disable Gutenberg
  • Disable emojis
  • Cleanup the header
  • Asynchronous load CSS
  • Cleanup menu class

And much more. It's very lightweight and requires little configuration. Here is the plugin screenshot:

Falcon - WordPress Optimizations & Tweaks
Falcon - WordPress Optimizations & Tweaks

If you haven't used Falcon yet, we'd suggest trying it. It's simple, fast and very easy to use. Coded by us, so we guarantee about the coding quality and the performance.

In conclusion, we think disabling Gutenberg is a good way to write posts in WordPress. At Meta Box, we completely disable Gutenberg and all the related stuff with Falcon. It helps us have a better writing experience and not have to fix unpredictable bugs with the block editor. It also helps us have a better performance on the front end by removing unneccessary CSS, which is a pain point in optimizing the website for pagespeed.