Skip links
Rearranging Wordpress Editor

How to Reorganize the Post Editing Screen in WordPress

Table of Contents

When it comes to content creation, WordPress is widely regarded as one of the most versatile and user-friendly CMS platforms available. Indeed, this is one of the reasons why so many well-known brands depend on WordPress to run their websites.

Now, when it comes to the WordPress content editing system, there are many options, two of which are especially popular: the older version of the WordPress editor known as Classic (which is now available as a plugin of the same name) and the modern, block-based editor known as Gutenberg. Although opinions on which of the two editors is better are still divided within the WordPress community, that isn’t the subject of this post. Rather, this time I’ll look at how you can customize the post edit screen in both WordPress editors to fit your needs.

You can create a cleaner atmosphere and one that feels less clogged up and distraction-free by rearranging and/or hiding various areas and choices inside your WordPress editor that you don’t use very much. This way, you’ll be able to concentrate entirely on the task for which each of these editors were created in the first place: content production.

So stay with me as I teach you how to rearrange your WordPress post edit screen in both the Gutenberg and Classic editors.

Reorganising the Post Edit Screen in Gutenberg

The launch of the Gutenberg editor, according to many, has elevated the experience of creating content in WordPress to a whole new level. The editing process is now more effective, simpler, and modern than it has ever been. However, as you become more familiar with Gutenberg’s interface, you’ll likely find that some areas and parts can be skipped. Of course, which ones you choose to get rid of would be entirely dependent on your personal preferences. Here’s a list of everything you can do to tailor the Gutenberg editor’s appearance to your taste.

Using Meta Boxes to Hide Specific Meta Boxes

This is how Gutenberg’s default post editing screen looks like:

Gutenberg Editor

Now, if you look at the right-hand side of your computer, you’ll see two types of settings: Document and Block settings. The former are global settings for your page or article, while the latter are unique to the block you’re editing inside the editor.

Gutenberg Documents Block

You’ll also notice the three dots that, when selected, bring up a menu.

Gutenberg-settings-Dots-Options

You can check (and uncheck) different meta boxes that appear on the right side of the screen, such as Permalink, Categories, Discussion, Excerpt, and so on, once you pick Options (located at the bottom of the menu).

wordpress-posts-Options-Screen


We suggest hiding any of these solutions if you don’t use them often and want a cleaner working space in your editor.

ALSO READ  Create Responsive Tables In Elementor On A WordPress Website

For example, without the Excerpt, Categories, and Tags panels, the Document Options screen would look like this:

gutenberg-Document-Options-2

Moving the Block Toolbar to the Top

You can now rearrange the position of the block toolbar, which is normally displayed above the block you’re working on.

To move the toolbar to the top, open the menu by clicking the three dots and selecting the “Top Toolbar” option.

wodpress-Toolbar

Through doing so, you’ll be able to access the toolbar options for your blocks from the same location (at the top), making the whole editing process simpler when you switch between blocks.

The end result is as follows:

wordpress-Toolbar-Options

Taking Out the Right Panel

You can also clear out your editing area completely and delete the panel on the right side of the screen to reduce distractions when creating content. To do so, simply click once on the gear symbol, and the panel will vanish.

wordpress-Editor-Gif-1

Of course, you can always press the same gear icon to bring up the panel again.

Activating Fullscreen Mode

You can still hide the admin toolbar and sidebar if you want to work with even less distraction. To do so, simply hover your mouse over the three dots and select Fullscreen mode. Both your toolbar and sidebar will vanish as a result of this.

wordpress-Editor-Gif-2

If you unmark this alternative, they will reappear:

gutenberg-Normal-Preview-2

It’s worth noting that WordPress remembers which choice you choose, so the editor will appear exactly as you left it the next time you visit.

Spotlight Mode

Spotlight Mode is a feature that allows you to see what’s going on around you.
The Spotlight mode is especially useful since it highlights the block you’re currently editing by reducing the opacity of others, allowing you to concentrate better on the task at hand and find the block you’re working on faster. This choice is allowed by default in Gutenberg, so there’s no need to adjust anything if you want to use it.

gutenberg-Spotlight-Mode

If you want to disable this function, go to the three-dotted menu and uncheck the Spotlight mode box.

gutenberg-Unmark-Spotlight

In the Document Panel, collapsing the Meta Boxes

The ability to cover such meta boxes in the Document Panel has already been stated. If you’d rather just momentarily cover them rather than fully remove them from the screen, simply collapse one, more, or all of the boxes by clicking the upward arrow on each one.

gutenberg-Editor-Gif-3

This will make the document look much cleaner and better in general.

ALSO READ  15 Best WordPress Tips And Tricks For Every Website

In the Classic Editor, rearrange the Post Edit Panel.

If you prefer the Classic editor to Gutenberg, you’ll be pleased to know that there are plenty of ways to reorder and hide various parts in this editor as well. We’ll go through them one by one.

Meta Boxes are being minimised.

In addition, the Classic editor has a segment on the right side of the screen with different meta boxes. The Publish box, Categories, Tags, Featured Picture, and so on are all part of this.

wordpress-Classic-Editor-Sidebar-2

Click the upward arrow on the box in question to collapse it, just as you would in the Gutenberg editor.

gutenberg-Classic-Editor-Arrows-2
editor-Arrows-Down

Simply click the downward arrow to display the options inside the meta boxes once more.

editor-Category-Arrow

Repositioning the Meta Boxes

You can also drag and drop these boxes from inside the editor to adjust their individual positions and rearrange them in a way that best suits your needs. You can, for example, shift the Tags box closer to the top and the Categories box closer to the bottom.

gutenberg-post-Editor-Gif-4

There are a few boxes immediately below the post editor that you’ll note. You can also press and move each of these boxes to the right-hand side of the screen, or vice versa – drag the boxes on the right-hand side to the bottom of the editing screen.

Alternatively, you can move each box up or down and make it switch places with another box by using up or down arrows:

Hide Metaboxes.

You can also fully cover unique meta boxes using the Screen Options panel in the top right corner. Then uncheck the boxes that you want to hide.

You can also label the boxes you want to see or leave them alone if they’re already checked.

ALSO READ  Add Copy Text To Clipboard Feature To Your WordPress Website

You can also switch between a single column and a double column style here. This will affect the appearance of your meta boxes in the editor. All meta boxes will be displayed below the editor in one column, while some boxes will be displayed below the editor and others on the right side of the editing screen in two columns (this is the default setting).

Distraction-Free Writing Mode Activation

The fullscreen mode is also available in the Classic editor, just as it is in Gutenberg. This alternative blurs the admin toolbar above while eliminating all meta boxes and the admin sidebar. To do so, simply press the ALT+Shift+W key combination on your keyboard or click the fullscreen icon in the editor.

If you don’t see this feature in your editor, you can enable it by checking the option “Enable full-height editor and distraction-free features” in the above-mentioned Screen Options.

You should be aware that if you hover over the sidebar or meta boxes, this mode will be automatically exited.

Final Thoughts

WordPress is a highly adaptable and user-friendly platform that helps you to streamline your content creation process. If you’re using the latest Gutenberg editor or the Classic one, you’ll find plenty of options to help you build a tidy, distraction-free atmosphere. During the process, you can cover various boxes you don’t need, use fullscreen mode to hide the admin sidebar, and much more. The best part is that you can still restore the appearance of your editing screen to its original state at any time.

Share This Article:
Facebook
Twitter
LinkedIn
Pinterest
WhatsApp
Email
Reddit
Related Articles:
migrate wordpress to aws
Linux
Migrating WordPress Website To Lightsail On AWS – Part 2

In the previous post of this series, we have learned how to set up the AWS Lightsail servers to be ready for the WordPress website. If you haven’t read this post yet, we highly recommend you give it a read here: https://underwp.com/migrating-wordpress-website-to-lightsail-on-aws-part-1/ So far we have set up the server

Read More »
seo programming
Search Engine Optimization (SEO)
Learn SEO Programming And Digital Marketing Coding

Search Engine Optimization programming is not a coding language. It is a collection of codes and programs that are usually used by SEO experts to perform Technical SEO on the website. You do not have to learn a programming language to become an SEO expert. SEO is independent of any

Read More »
Subscribe to our newsletter
[newsletter_signup_form id=1]
Chat With Our SEO community members On discord

Leave a comment

This site uses User Verification plugin to reduce spam. See how your comment data is processed.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Explore
Drag